- 投稿日：2021-12-01T23:10:26+09:00
ご注文はNintendo Switchですか??
ご注文はNintendo Switchですか?? Nintendo Switchが欲しい今日この頃、ふと思いました。 HTML、CSSで「Nintendo Switchのロゴ作れるんじゃないか？？」と。 ということでJavaScriptで動きを入れつつ、HTMLとCSSでNintendo Switchのロゴを作ってみました。 完成品 完成品は以下となります。(少しバウンドがずれているのはご愛嬌ください) フォントは特に合わせていません。 ソースコード HTMLは以下です。 前提 リセットCSSとしてdestyle.cssを当てています。 CDN: https://cdn.jsdelivr.net/npm/destyle.css@3.0.0/destyle.css バウンドのアニメーションはanime.jsライブラリを使用しています。 CDN: https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js CSSはSassを使用しています。 左のコントローラーは<div id="left-logo"></div>です。 右のコントローラーは<div id="right-logo"></div>です。 HTMLは至ってシンプルな構造です。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="../../images/favicon.png"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.0/destyle.css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <title>Nintendo Switch</title> </head> <body> <main id="main" class="wrapper"> <div id="logo-container"> <div id="left-logo"></div> <div id="right-logo"></div> </div> <div id="name-container"> <p id="nintendo">NINTENDO</p> <p id="switch">SWITCH<span>TM</span></p> </div> </main> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="js/script.js"></script> </body> </html> SCSSは以下です。 各コントローラーはdisplay: flexで横並びにしてjustify-content: center;を当てています。 コントローラー自体のスタイルもborder-radiusやborderくらいをいじるくらいでかなりシンプルです。 各コントローラーにある「円」は擬似要素のafterを使用し、position: absolute;で位置を固定しています。あとはborder-radiusをいじって円にするだけです。特に難しくないでしょう。 style.scss @charset "utf-8"; $base-color: #E7000B; $main-color: #fff; html { font-size: 100%; } body { background-color: $base-color; color: $main-color; } .wrapper { max-width: 800px; margin: 0 auto; padding: 0 4%; } #main { display: flex; flex-direction: column; margin-top: 240px; #logo-container { display: flex; justify-content: center; #left-logo { position: relative; width: 132px; height: 270px; margin-right: 14px; border-radius: 70px 0 0 70px; border: 22px solid $main-color; &:after { position: absolute; top: 36px; left: 22px; width: 50px; height: 50px; border-radius: 50%; background-color: $main-color; content: ""; } } #right-logo { position: relative; width: 112px; height: 270px; margin-left: 14px; border-radius: 0 70px 70px 0; background-color: $main-color; &:after { position: absolute; top: 122px; left: 28px; width: 50px; height: 50px; border-radius: 50%; background-color: $base-color; content: ""; } } } #name-container { margin-top: 40px; text-align: center; #nintendo { font-size: 2.6rem; font-weight: bold; letter-spacing: 22px; } #switch { font-size: 4.8rem; font-weight: bold; letter-spacing: 10px; span { font-size: 0.8rem; font-weight: normal; letter-spacing: 0; } } } } ロゴ自体は本当にシンプルな要素やスタイルのみで作成できました！ JavaScriptは以下です。 anime()はanime.jsライブラリが用意しているもので、簡単にアニメーションをしてくらる軽量のライブラリです。 moveRightLogo()は右のコントローラーのアニメーションをする関数で、moveLeftLogo()左コントローラのアニメーションをする関数を定義しました。 targetsはアニメーションさせたいセレクターを指定します。 translateYは垂直方向のアニメーションを配列で定義できます。 valueはアニメーションさせる移動距離です。 durationはアニメーションの長さ(ms)です。 delayはアニメーションの開始遅延時間(ms)です。 easingは時間の経過に伴うパラメーターの変化率を指定します。 上記の値はいい感じにアニメーションしてくれるものを指定しました。 script.js $(function () { moveRightLogo(); moveLeftLogo(); }); function moveLeftLogo() { anime({ targets: '#left-logo', translateY: [ { value: 32, duration: 40, delay: 460, easing: "easeInQuint" }, { value: 0, easing: 'easeOutCubic' } ] }); } function moveRightLogo() { // ロゴのボーダーを含む高さを取得する const height = $('#right-logo').outerHeight(); anime({ targets: '#right-logo', translateY: [ // 初期は(高さ/2)から下に落ちるようなアニメーション。 // バウンドした後は高さ0に戻す。 { value: -(height / 2), duration: 0, easing: 'linear' }, { value: 32, duration: 500, easing: 'easeInQuint' }, { value: 0, easing: 'easeOutSine' } ] }); } 参考文献 まとめ この記事では、JavaScriptで動きを入れつつ、HTMLとCSSでNintendo Switchのロゴの作成方法を紹介しました。意外と簡単にできました。 他にも何かロゴを作ってみたいと思います。(リクエストなどあればお願いします！)
- 投稿日：2021-12-01T22:57:07+09:00
HTML/Canvas ImageDataのバイトデータ操作による描画をWebAssembly(AssemblyScript)でやってみた
この記事は Web グラフィックス Advent Calendar 2021 の1日目の記事です。 発端 Flutter 仕事でAndroidの業務アプリを作ることになり、IonicまたはFlutterの二択ということになりました。筆者はAngular使いなのでIonicを選んだのですが、小心者なので、選ばなかったFlutterのことが気になってしかたなかったです。 それでFlutterについて後追いで調べていて、これは良いなと思ったのが、2DグラフィックスライブラリのSkiaをWebAssemblyにしたもの（CanvasKit）を使っているところでした。 描画をWebAssemblyにしてしまえばどのブラウザでもネイティブでも同じ描画結果にできるわけで、それはすごい安心感があります。 WebViewに依存しないのもいいですね。IonicはWebView依存なのでOSに更新が入ると何が起こるか不安で夜しか眠れないようなところがあります。 WebAssemblyでの描画は速いのか？ 気になるのは実行速度です。 ベンチマークみたいのは面倒なので、Flutterのパーティクルのサンプルあたりを見たところ、「めちゃくちゃ速い」とも「めちゃくちゃ遅い」ともいえないと感じました（技術者にあるまじき役に立たない感想）。描画面積が大きいと面積に比例してFPSが下がるのがはっきり分かります。低スペックなモバイル端末だときつそうな気もしますが、解像度が低いのであれば問題ないのかもしれません。 しかし自分が知りたかったのはFlutterというよりWebAssemblyによる描画がどうなのかだったので、最小構成の描画処理を作ってみることにしました。それで速かったらなんか嬉しいし、遅かったら、遅いことが分かります。分かって何が嬉しいのかは分かりませんが、それでもいい…とりあえずプログラマーはそういう生き物だと思います。 JavaScriptで作ってみた 最小構成ということで、まずGLSLをJavaScriptで再現するプログラムを作ってみました。 ライブデモ ソースコード 作ったのは、ピクセル単位にバイトデータを計算してグラフィックスを描画するプログラムです。ラスタライザというやつです。 canvasの描画機能はほとんど使わず、描画結果を画面に表示する目的でのみcanvasを使用します。canvasに表示するバイトデータを扱うにはImageDataを利用しますので、ImageData.dataへの書き込みが主たる処理ということになります。 ここはWebAssemblyは使わないため、CodePenにしてみました。 See the Pen HTML/Canvas ImageDataのバイトデータ操作による描画（JavaScript版） by 柏崎ワロタロ (@warotarock) on CodePen. なおGLSLはGLSL Sandboxから拝借しました。 AssemblyScriptでも作ってみた WebAssemblyを書く方法はたくさんありますが、自分はTypeScript使いなので、TypeScript風でとっつきやすそうなAssemblyScriptで作ってみました。i32とかf64とか暗黙で型変換されるところを合わせるのが少し面倒でしたが、移植は難しくありませんでした。ImageDataにメモリをバインドするやりかたを見つけるのが一番大変だったかも。 ライブデモ ソースコード なお、微妙に異なる二種類の描画方法で実装してみています。 JavaScriptから渡された関数をAssemblyScriptから呼んでピクセルデータを書き込む方法 AssemblyScriptで確保したメモリを共有し書き込む方法 下の方法のほうが若干速いです。 拡張子はtsですがAssemblyScriptの拡張子はtsが標準みたいです。 index.ts（AssemblyScript） // instantiate時に渡されたモジュール declare namespace main { function putPixel(offset: f64, r: f64, g: f64, b: f64, a: f64): void } // JavaScript関数経由で描画 export function drawViaFunction(width: u32, height: u32, time: f64): void { const pixelBytes: u32 = 4 const lineBytes: u32 = width * pixelBytes const density: f64 = 0.05 const amplitude: f64 = 0.3 const frequency: f64 = 10.0 const scroll: f64 = 0.1 const fwidth = width as f64 const fheight = height as f64 const sin = Math.sin const abs = Math.abs let offsetY: u32 = 0 for (let y: f64 = 0.0; y < fheight; y += 1.0) { const posy = y / fheight - 0.5 let offset = offsetY for (let x: f64 = 0; x < fwidth; x += 1.0) { const posx = x / fwidth - 0.5 // from https://glslsandbox.com/e#76927.0 const line1 = (1.0 / abs((posy + (amplitude * sin((posx + time * scroll) * frequency)))) * density) * 255 const line2 = (1.0 / abs((posy + (amplitude * sin(((posx - 0.1) + time * scroll) * frequency)))) * density) * 255 const line3 = (1.0 / abs((posy + (amplitude * sin(((posx - 0.2) + time * scroll) * frequency)))) * density) * 255 main.putPixel( offset, 0.10 * line1 + 0.05 * line2 + 0.05 * line3, 0.05 * line1 + 0.10 * line2 + 0.05 * line3, 0.05 * line1 + 0.05 * line2 + 0.10 * line3, 255.0 ) offset += pixelBytes } offsetY += lineBytes } } // メモリ共有で描画 export function drawToByteArray(data: Uint8Array, width: u32, height: u32, time: f64): void { const pixelBytes: u32 = 4 const lineBytes: u32 = width * pixelBytes const density: f64 = 0.05 const amplitude: f64 = 0.3 const frequency: f64 = 10.0 const scroll: f64 = 0.1 const fwidth = width as f64 const fheight = height as f64 const sin = Math.sin const abs = Math.abs let offsetY: u32 = 0 for (let y: f64 = 0.0; y < fheight; y += 1.0) { const posy = y / fheight - 0.5 let offset = offsetY for (let x: f64 = 0; x < fwidth; x += 1.0) { const posx = x / fwidth - 0.5 // from https://glslsandbox.com/e#76927.0 const line1 = (1.0 / abs((posy + (amplitude * sin((posx + time * scroll) * frequency)))) * density) * 255 const line2 = (1.0 / abs((posy + (amplitude * sin(((posx - 0.1) + time * scroll) * frequency)))) * density) * 255 const line3 = (1.0 / abs((posy + (amplitude * sin(((posx - 0.2) + time * scroll) * frequency)))) * density) * 255 data[offset + 0] = clampU8(line1 * 0.10 + line2 * 0.05 + line3 * 0.05) data[offset + 1] = clampU8(line1 * 0.05 + line2 * 0.10 + line3 * 0.05) data[offset + 2] = clampU8(line1 * 0.05 + line2 * 0.05 + line3 * 0.10) data[offset + 3] = 255 offset += pixelBytes } offsetY += lineBytes } } function clampU8(value: f64): u8 { if (value > 255) { return 255 } else { return value as u8 } } // 型付き配列をJavaScriptと共有するために必要な型のエクスポート export const Uint8ArrayID = idof<Uint8Array>() index.html（JavaScript部分の抜粋） function initializeWasmRender(wasmModule) { // AssemblyScriptで実装した関数が登録されたオブジェクトを取得 wasmRender = wasmModule.exports // WebAssembly内に画像用メモリを作成 const dataLength = canvas.width * canvas.height * 4 imageDataArrayPtr = wasmRender.__newArray(wasmRender.Uint8ArrayID, dataLength) wasmRender.__pin(imageDataArrayPtr) // GCで開放されないように設定 // 画像用メモリをImageDataのバッファとして設定 imageDataArrayView = wasmRender.__getArrayView(imageDataArrayPtr) viewArray = new Uint8ClampedArray(wasmRender.memory.buffer, imageDataArrayView.byteOffset, dataLength) // Uint8ClampedArrayにバッファを渡すことでメモリを参照するTypedArrayが作成されます wasm_ImageData = new ImageData(viewArray, canvas.width, canvas.height) // ImageDataにUint8ClampedArraを渡すことでバッファを参照するImageDataが作成されます } js_ImageData = new ImageData(canvas.width, canvas.height) data = js_ImageData.data function putPixel(offset, r, g, b, a) { data[offset + 0] = r data[offset + 1] = g data[offset + 2] = b data[offset + 3] = a } 速いのか JavaScriptが思った以上に速かったのもあり、WebAssemblyで書いても正直いってそれほど速い気がしませんでした(WebAssemblyあるある)。Flutterのデモはもっと複雑そうなのにもかかわらず、面積が広くても同じかそれ以上にFPSが出ている感じがしますから、自分の作りが悪いかAssemblyScriptが遅いのかもしれません。もしくはsin関数が重かったりするのか…。 まとめ、将来性 まとめです。 JavaScriptとAssemblyScriptで単純なバイトデータ操作による描画処理を実装してみた AssemblyScriptは使いやすかった 速度は期待したほどではなかった 将来については、ブラウザだけでなく、どこででもWebAssemblyを実行できるようにしようという動きが、もうけっこう進んでいるらしいです。 JVMみたいなものかなーと最初は思いましたが、開発言語にJavaしか選択肢が無かった（当時）のと違い、WebAssemblyをサポートしている言語は圧倒的に多いです。言語が多ければ利用者の人口も多いということで、多くの人が動けば世界が動くという感じで、いずれ何か大きな流れになるんじゃないかなーという感じがします。 今からWebAssemblyを使いこなせる必要は少ないかもしれませんが、これから新しい言語を学ぶならWebAssemblyを活用しやすいものを選んでおくと、将来性があるかもしれません。自分はGo、Rust、Dartは挫折しました。 それではWebグラフィックス アドベントカレンダー初日でした。 最終日までよろしくおねがいいたします。
- 投稿日：2021-12-01T17:11:08+09:00
webデザインの知識無用！ Boootstrapを使ってみた（超初級者編）
初めに 現在書けるプログラミング言語はHTML・CSSのみです。 そんな私が初めてBootstrapを使ってみた感想を書いていきたいと思います。 ○Bootstrapとは BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークで、HTMLおよびCSSベースのデザインテンプレートとして用意されています。 ○Bpptstrapを使うメリット・初心者にお勧めする理由  https://getbootstrap.jp/docs/5.0/layout/columns/を参照 写真のように他にも様々なフレームワークが用意されています。 また、初心者でもBootstrapにはサンプルコードがあるため、webデザインの知識がなくてもレイアウトを簡単に整えることができます。 ○実際使ってみて感じたメリット・デメリット メリット ・webデザインの知識がなくてもレイアウトを整えることができる ・作業時間の短縮 ・様々なデバイスに対応が可能 デメリット ・オリジナル性が低い ・カスタマイズできない まとめ Bootatrapは、デザインを組み込んでいるがために、まったく違うデザインに変更しようとした場合かなり手間がかかりますが、初学者でソースコードがわからなくても簡単に使う事ができるためお勧めです。
- 投稿日：2021-12-01T15:47:57+09:00
学生のフロントエンド開発入門について
初めに 今回は、現在所属しているチーム開発に私がフロントエンド担当として参加するまでに行った勉強方法をQiitaの記事として残そうと思ったので書いて行こうかなと思います。 今回のフロントエンド開発として、typescriptの開発に入るまでの流れを記事に残していこうと思います。 プログラミング経験 私のプログラミングの経験としては、railsを半年くらい触ってからの状態からはじめました。レベルとしては、簡単なECサイトが実装できる程度になります。なので、特に才能があるわけでもできるわけでもありません。笑笑 今回主にtypescript開発に参加するまでの自分の勉強の道筋を示していくわけですが、私自身JavaScriptでrandom関数を使用したおみくじプログラム(超簡単)すらも全く分からず単位を落としそうになっていたくらいプログラミングが苦手だったので心配しなくて大丈夫です！ 勉強していく順番（ざっくりと！） Html,css cssフレームワークを触ってみる！ javascript学習（ES6) reactの学習 figmaの学習（UI, UXデザインの学習） reactで何か簡単なものを作成してみる！（軽いポートフォリオ？） フロントエンドとバックエンドを分けて何か作ってみる。 typescriptの学習 効率的な学習のコツ 効率的な学習のコツとしては、これは私の意見ですが、同じサイトを繰り返しで最低3回は復習をすることをお勧めします。 教科書、答え、詳しい人に聞きながらでもとりあえず実装をしてみる。 教科書だけをみて実装をしてみる（もしどうしても無理だったら答えを見る） エラーなどをもとに検索をしながら実装をする。 私が一番大事だなと感じているのは、3回目の工程になるかなと思います。 3回目まで復習をする理由としては、エラー文をしっかり読むようになるのと検索した記事を自分の場合だったらどのように書き換えれば良いのかという読み替える能力がかなりコードを書いていく上で重要だなと感じているからです！ぜひこの工程で勉強してみてください〜 具体的な進め方 HTML, CSS Progate まず一番最初はフロントの基礎である、HTML,CSSですね〜。 HTML,CSSは最初は仕組みを知ることが大事なのかなと思います。 一番最初の入門としては、やはりProgateに限ると思います。 Progateは、値段も安く教科書も初心者向けなので最初の理解としてはかなり助けになるかなと思います！ 模写コーディング Progateの学習が終わったら、次にHTML,CSSの実践練習になります。具体的には、簡単な構成で描かれているHTMLのサイトのコピーを作成する練習がいいのかなと思います。私が実際に使用したサイトはもうなくなってしまったのですが、レベルとしてはこちらのサイトくらいのサイトを模写するのが練習になるかと思います！ 模写コーディングを学習していて、答えはどうするの？という疑問が生まれるかなと思いますが、そんな時は開発者ツールを使用しましょう！ この開発者ツールを開くには、サイトに移動してからサイトの上で右クリックをして検証というタブを開く、もしくはF12、command+option+Jのショートカットキーでも開くことができます。この開発者ツールのElementsという場所に実際のコードが乗っているのでこちらが答えになります。 模写するサイトで使用されている画像の撮り方としては、Sourceというタブのページのaseetsのフォルダの中にサイトで使用されている画像が格納されているので、assetsで画像を開いて開いた画像の上で右クリックでsave image as...をクリックして保存を行いましょう！ css フレームワーク bootstrap bootstrapはかなり初心者向けのCssフレームワークになるかなと思います。素のCssだけで書いていた人からするともう目から鱗の状態なのではないかなと思います。最初からcssのフレームワーク使えばよかったのではないか？と思われる方もいらっしゃるかもしれませんが、私が最初からフレームワークを使用しなかった理由としては、cssのプロパティが何があるかわからない状態で使用しても効率が悪いと思ったからです。最初はCDNで1行読み込むだけで使えるようになっているところから始めるのがいいかなと思います！ bootstrapCheatsheetや公式リファレンスをみながらぜひ勉強してみてください。 サンプルコード↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>タイトル</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> </head> <body> <div class="container">Hello!</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html> 余力があれば！！ tailwind css bootstrapの上位互換のフレームワークになります。bootstrapと基本的には書き方は同じになりますが、指定できる値が細かくなるのでその分カスタマイズ性も高くなり難しくもなります。フロントエンド開発の現場でも最近取り入れられているので、学習しておいて損はないと思います。bootstrapはjavascriptの記述も入っているのに対して、tailwindCssは純粋なCssで書かれているので他のコードとの競合が起きにくいという利点があり、この利点が実際の現場でも取り入れられている理由の一つです。 material ui マテリアルUIはreact開発の王道Cssフレームワークになります。かなり多くの現場で昔から使われているものになりますので学習しておけば間違いのないcssフレームワークになるかなと思います。bootstrapとは若干使い方が変わってくるのでそこは注意かなと思います。 実行環境について ここからは余談ですが、学習を行う際の実行環境についてお話をしたいと思います。 jsなどを走らせるためには、その言語を実行できる環境を用意する必要があります。 環境構築は、qiitaなどに環境構築の方法を検索するとたくさん出てきますが使っているパソコンごとにパスの通し方が違ったりコマンドがありませんよ〜ってエラーが出たりするので初心者にはかなりきついものがあるかなと思います。 私は自分のローカルに環境を構築して開発を進めておりましたが、環境構築だけで何日も取られてしまいかなり勿体無いことをしたな〜と反省をしました。笑 なのでここでは、環境構築をしなくても開発を進めることができるテキストエディターサイトを紹介したいと思います。 playcode こちらはjavascriptの勉強に使えるかなと思います！（私は使ったことありません笑） codesandbox こちらはreactやtypescriptの勉強に使えるかなと思います！ 後々に紹介するじゃけえさんの講義でもcodesandboxを使用しているのでおすすめです！ nodeのパッケージもコマンドを打たずともインストールができるので感覚的に使えるので最初の入りとしてはかなり良いのかなと思います！ cloud9 最後に紹介するのは、cloud9というamazonのawsが運営しているサービスになります。 cloud9が上記の二つと違うのは、ほとんど全ての言語に対応をしている点です。 cloud9では、プロジェクトの新規作成の際にコマンドを打つ必要があります。 しかし、コマンドを実行する環境はどのかたが使っても同じになっているのでqiitaや公式リファレンス記事をそのまま実行すれば間違いなく動くはずです。 react環境構築 (https://qiita.com/naitya0412/items/6ca962e16d77e0d04273) typescript環境構築(若干難しい） (https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/sample-typescript.html) javascript学習(ES6) Progate こちらの学習もまずはprogateのjavascriptのコースを受講してみてください。コースとしては、ES6のjavascriptを受講することをお勧めします。 udemy progateの受講が終了した後は、udemyのじゃけえさんの講義を受講することをお勧めします。しかし、この段階ではjavascriptまでしか学習をしていないのでjavascriptでTodoアプリを作成するところまで進めましょう。 react学習 Progate こちらもreactの講座があるので、reactの講座を受講しましょう。 udemy その後はjavascriptと同様、じゃけえさんの講義を最後まで受講することをお勧めします。この講座では、素のjavascriptで作ったtodoアプリと全く同じものをreactで作るという講座の内容になっているため、reactがなぜ便利なのかreactで書くとどのようなメリットがあるのかを感じられるためかなり勉強になります。 figmaの学習（UI, UXデザインの学習） サンプルサイトのトレース figmaの学習方法としては、すでにあるサイトをfigma上でコピーしてみるのがかなり勉強になると思います。 yutube この辺の初学者向けfigmaの動画も参考になるかと思います！ udemy udemyでの学習ではudemy講座この講座の評価が良かったので参考にするのもアリかと思います！ reactで何か簡単なものを作成してみる！（軽いポートフォリオ？） ここまでできたら簡単なアプリをreactで作ってみましょう。 簡単なアプリの目安としては、Todoアプリに毛が生えたくらいのレベルのもので問題ないと思います。 私はこの段階では、自分が読んだ本の感想を投稿するアプリを作成しました。 フロントエンドとバックエンドを分けて何か作ってみる。 このセクションでは、今までは一つの言語だけで何かアプリを制作してきましたが、これまでのものはデータベースを接続していないので投稿を行っても一度リロードを行ってしまうと消えてしまう仕様になっておりました。そこでこの章では、実際にバックエンドのコードを追加してreactで作ったtodoのタスクが保存されるようにアップデートをしてみましょう！ フロントエンドとバックエンドを分けて作成する際に、バックエンドとして使用する言語は何を使用しても問題はないと思います！私が作成した時には、フロントエンドはreactでバックエンドの言語としては、pythonのフレームワークであるflaskを使用して作成いたしました。 今回フロントエンドとバックエンドを分ける理由としては、それぞれフロントエンドに強い言語とバックエンドに強い言語があり言語を分けて作成することがかなり多いので、その際にフロントエンドとバックエンドを接続するという作業が生まれます。その際に、使用するjson（データフォーマット）やproxy(代理サーバー）などの技術を知っている必要があるのでフロントとの接続を勉強することはかなり大事な勉強になるかなと思います！ yutube(react × flask) reactとflaskを使用して作成する場合の参考にしたサイトとしては、この動画を参考に勉強しました。全部見ると長いと思うので、この動画の50分過ぎから視聴するのがいいかなと思います！ yutube(react × rails) もう一つ全部を見たわけじゃないのですが、reactとrailsを使用して作成する場合はこちらの動画を参考にしてみるのもいいかと思います！ 近年バックエンドの言語としてrailsを導入している企業も多いので、railsを使用してみるのもアリかもしれないです〜〜！ typescriptの学習 いよいよtypescriptにここで突入になります〜〜 typescriptはなんと言っても型の理解が重要になってくるのかなと思います。最初は型の理解から始めていくのがいいかなと思います！！ udemy 超Typescript入門 完全パック この講座は14時間とかなり長いのですが、typescriptの基礎的なものを全て解説してくれており最後には健康管理アプリをtypescriptで作成するハンズオンもあるのでかなり充実したコースになっているかと思います！ 書籍 プログラミングTypeScript 書籍の学習であれば、この本の評価が高かったので書籍で勉強する方が良いという方はこちらの本を購入して勉強してみるのもいいかもしれません。私は、本は昔から苦手なので動画で勉強しました。笑 最後に ここまで長くなりましたが、この記事を読んでくださりありがとうございました！ 私はこの記事の内容のことをおよそ3ヶ月かけて学習を進めていきました。 javascriptを触るのがほとんど初めてということもあり、かなり苦戦をしましたが昔に比べればかなり書けるようになった気がします！私の学習方法が、参考になりましたら幸いです！！！
- 投稿日：2021-12-01T14:43:52+09:00
HTMLで文章を横三等分にする
文章を三等分にする方法 HTMLファイル <div style="display: flex;"> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル1 </h1> <P> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </P> </div> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル2 </h1> <P> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </P> </div> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル3 </h1> <P> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </P> </div> </div>
- 投稿日：2021-12-01T08:45:25+09:00
UXデザイナーとして4ヶ月で学んだこと
初めまして、NSSOLにてUXデザイナーをしている1年目の濱岡と申します。 今回縁あってQiita Advent Calendarに投稿させて頂くことになりました。 本記事の要件は以下になります。 目的 新卒配属からUXデザイナーとして、約4ヶ月で取り組んできたことと所感の共有 想定している読者 Qiita Advent Calendarの参加メンバー、Qiitaの閲覧者。あわよくばUXデザイナー/NSSOL/サービスデザイン部に興味がある就活生も。 読者の方々に伝えたいこと UXデザイナーがどんなことをしているのかを理解し、面白い！と思ってもらう。また、自分がこれまでの取り組みから得た学びを実践してもらう。 目次 1.自己紹介 2.11月までにやったこと 3.これまでに得た学び 4.おわりに それでは記事の内容に入ります。 1. 自己紹介 まずお主誰じゃ、というツッコミが入るかと思うのでサラッと自己紹介します。自分は現在NSSOLのDXIC（Digital Transformation & Innovation Center）という事業部の、サービスデザイン部に所属しています（新卒1年目）。趣味は旅行、食べログランキング上位のお店巡り、読書、サウナ、韓ドラの視聴です。大学では材料科学の分野を専攻していました。入社時のITスキルはというと、Progateを触ったり基本情報技術者試験の勉強をしたぐらい。デザインの事もノンデザイナーズ・デザインブックを、興味本位で読んだことがあるぐらいのまっさらな状態でした。 ではなぜUXデザイナーを志望したか、理由は2つあります。 1つ目は、好奇心が強く色々なことをしてみたいと思ったからです。かなりのミーハーなので、新しいもの・面白そうなものがあったら飛びついてしまうんですね。SI業界を選んだのも、同様の理由です。 2つ目は、人の体験に関わるような事をしてみたかったから。これまでの人生を振り返ると、自分の人生を豊かにしてきたのは「モノ」よりも「体験」だと感じていました。外車に乗るとか、良い時計を付けたいなどの野心的な物欲があまりなく、それよりも旅行やスポーツなどを通じ、自分の記憶に残るような体験を毎日したいと考えていました。それが転じて、自分のみならず人の体験を豊かにできるような仕事をしたいと思うようになったのだと思います。 2. 11月までにやったこと 次に自分が4月から現在（11月末）までにやってきたことをざっくり紹介します。 4~6月：全体研修（ビジネススキル、WF開発の進め方、Java・基盤系の基礎） 7月上旬〜7月中旬：デザイン＆アジャイル研修（デザイン思考とアジャイルのマインドを身につける） 7月下旬〜9月上旬：サービスデザイン部に本配属され、社内サービスをスクラムで開発していくPJに参加。UXデザインで具体的にやったことは以下になります。 ユーザインタビュー ペルソナの作成 OOUI（オブジェクト指向UI）の概念の学習 Material Designの読み込み スタイルガイドの作成 Adobe XDを使って画面をデザイン 9月中旬〜9月末：内定者向けの事業部紹介資料をリデザイン 資料の用途や目的、ターゲット及びターゲットに起こして欲しいアクションの整理 DXICの所長や、各部署の部長にインタビュー（緊張しました！） スタイルガイドの作成 インタビュー内容を元に、各スライドの中身をメッセージが強調されるよう修正 10月〜11月末（現在）：模擬PJに復帰 Reactを用いて実装（HTML/CSS/JavaScript） 開発しているサービスのブランディング 途中で色彩検定/基本情報技術者試験/応用情報技術者試験/認定スクラムマスター研修などの資格も取得したり、10月末にDesignshipというイベントに参加したりもしましたが、やってきたことは大体こんな感じです。 3. これまでに得た学び さて、ここからの内容は自分がこれまでに得た学びになります。 チームワークがめちゃ大事 これは自分がスクラムチームに参加してから強く感じ、かなり衝撃でした。なにせ自分の中ではデザイン/エンジニア/リモートワークという言葉からは、黙々と個人作業を進めていくイメージが想起されていたからです。ところが現在行っているスクラム開発では、スクラム/アジャイル的にこの考え方・振る舞いはどうか？チームとして問題解決に取り組めているか？と、チームやメンバーの動きに関する議論が非常に多く交わされています。 スクラムやアジャイルに関するドキュメントは下記を参照。 就活時に「チームで働くのが好きな人はSIerに向いている」と聞いていましたが、こういうことなのかなと実感しています。実案件でスクラムに取り組んでいる先輩方の話を聞いていても、技術的な問題よりもスクラムとして成立しているかどうかがPJの成否を分けると耳にするので、スクラムやアジャイルの価値観を大事にしてチームとして動いていこうと思います。 使いやすいものの裏にはデザインの営みがある Googleの公開している、「Material Design」をご存知でしょうか？これはGoogleが提唱しているデザインのガイドラインのことで、「見やすく、直感的に操作できるWebページ・サービス」を作ることを目的としています。ユーザビリティの高いアプリやサイトは、このMaterial Design、ないしはAppleの公開している「Human Interface Guidelines」に準拠して作られています。 世の中の使いやすいWebサイトはこれらのガイドラインに沿って作られているという事を知り、自分が画面のデザインをする際にはMaterial Designを辞書の如く参照するようになりました。使いやすさの裏にはこのような共通した法則というか、ガイドラインがあるのですね。 皆が惹かれるモノの裏にもデザインの営みがある これはDesignShipでマツダのデザイナー、前田 育男さんがお話されていた事になります。前田さんは車のデザインをアートに昇華すべく、美しいクルマづくりに挑戦されています。マツダの車といえば高いデザイン性が特徴として挙げられますが、その裏にはこんな取り組みがありました。 マツダでは車を、ヒトと心を通わせ一体となれるような生き物のようにしたいと考えていました。そこで、「クルマに命を吹き込む」ために野生動物の躍動感ある写真のスケッチを行い、それを抽象化した立体である「御神体」を1年がかりで作成。そしてそれを作成してからそれをクルマのフォルムに落とし込む段階では、全てをCADのようなデジタルツールで行うのではなく、必ずクレイ（粘土）モデルを作り、感触を確かめながら手で削って形を作っていくそう。こうした取り組みから生まれた車体には独特のフォルムに絶妙な陰影が付いており、その美しさは世界的に高い評価を受けるようになりました。 1台のクルマが生まれるまでにここまで徹底したデザインのプロセスがあることに感服し、世の中のモノを見る視点が変わりました。美しいと感じるもの、何故か心惹かれるものの裏にはデザインという仕掛けがある。自分もデザインというプロセスを通じて、そういうものを作っていきたいですね。 デザインと実装の二刀流がシナジーを生む えっ、デザイナーってプログラミングするの...？と思われた方もいらっしゃるかと思います（自分もそうでした）。スクラムチームでは、スクラムマスター/プロダクトオーナー/開発者という3つの役割があるのですが、「開発者」にはエンジニアもデザイナーも関係なくひとくくりにして含まれています。機能横断的なチームがあるべき姿なので、自分はデザインしかやらない！基盤しかやらない！なんてことはありません。なので自分も実装をするようになりました。 ちなみにスクラムに限らず、今後はデザイナーとエンジニアの境目がどんどん曖昧になると言われています（下記の記事を参照）。 とはいえ自分はデザインも初心者だったのでまずはデザインを学ぼう、ということで9月まではAdobe XDを用いて画面を描いていましたが、実装はほとんどしていませんでした。先輩から「実装をした方がUIも描けるようになる」と言われていましたが、その意味をこの時点では理解出来ず。しかし10、11月と実装をしてみて、デザインと実装の両方を経験する以下のメリットに気づきました。 挙動をイメージできるようになる 当たり前ですが、デザインツールを用いて画面を描く際は画面は動きません（画面遷移などをプレビューできるプロトタイプ機能ぐらいはありますが）。しかし実際に作るものは「動くソフトウェア」なので、画面の各要素の挙動を想定してデザインをする必要があります。実装を経験したことで、必須項目が入力されていない時のエラーメッセージはどのように表示されるか、画面幅を縮めた際にはレイアウトがどう変わるか、文章が長い場合は「...」で表示するか、などを想定してデザインするようになりました。 divが見える これは実装をしてみてのアハ体験でした。実装の際には各セクションをdiv（ないしは他のHTMLタグ）で区切って要素を配置しますが、それを一度経験すると画面上のdivの区切りが見えてくるようになります。例えば左下の図を見ただけでも、脳内には右下のようにdivがうっすらと浮かびます。 divを意識するようになったことで、デザインをする際に親要素のdiv幅内に子要素を配置するなど実装上無理のないUIをデザインできるようになりました。「実装をした方がUIも描けるようになる」とは、まさにこの事ですね！ ユーザ目線でのレビューができる 前述のMaterial Designを一読した上で自分で一度デザインをすると、要素同士の間隔は4or8の倍数になっているか、ユーザが入力する箇所のフォントサイズは16pxで指定されているか、などCSSの指定をかなり細かくチェックするようになりました。実装だけをしていると実際に書かれたコードを見て、コードの可読性や処理の書き方に注目するあまりユーザ目線が抜けがちですが、ユーザにとって価値があるのは「動くソフトウェア」なのでこの視点は忘れないようにしたいです。 複雑性を担う覚悟が生まれる UXデザインをする上で意識すべき1つの法則として、「テスラーの法則」というものがあります。これは、「どんなシステムであってもそれ以上シンプルにすることのできない固有の複雑さがあり、その複雑さはユーザか開発側のどちらかが担わなければならない」というものです。 例えばメールアプリでは、差出人と宛先の2つの情報が必要になり、これらはいずれも必要不可欠な複雑性になります。この複雑性をユーザに担わせないために、最近のメールアプリでは差出人（自分）を予め入力しておくこと、また過去のメールや連絡帳から宛先を予想し候補を表示してくれます。つまり、差出人と宛先の入力という複雑性を、ユーザに代わって引き受けるようなメールアプリをデザイン・実装することで、メールを書くことを楽にしてくれているのです。 このようなことを開発側として実際にやろうとなると、なかなか面倒に感じました。ユーザにとってあったら嬉しいけど必須じゃないし、の割に実装やデザインがややこしかったりするし...イチ開発者としては、できればやりたくない！と思うこともありました。デザイナーもエンジニアも、自分たちで複雑性を担うのってかなりの覚悟が必要なのだなと。 なのでGoogleやAppleの提供するようなシンプルでUI/UXの優れたサービスは、エンジニアとデザイナーがユーザの代わりに複雑性を担ってくれている賜物で、サービス提供側の本気度の表れなんだと尊敬の念を抱くようになりました。と同時に、デザイナーがエンジニアに対して何でこのデザインにするのか、そのこだわりについて語れなければUI/UXの優れたサービスは実現できない、と感じました。開発者に納得してもらえるよう、誰よりもユーザを中心に考えこだわっていきたいです。 予防線を張らない これはDesignshipで、HI(NY) design というデザイン会社の渡邊デルーカ 瞳さんがお話されていた内容になります。 渡邉さんは過去にNYのSVAという美大に留学した際に、アメリカの学生よりも日本の学生の方がアウトプットの質は高いが、ストーリーテリングが上手いのはアメリカの方だと感じたそうです。正直作品のクオリティは高くないのに、自信満々に自分の作品をプレゼンする。そんなアメリカの学生を見て、「予防線を張るような発言をしてしまうと作品の良さが半減する。批判されるのは当たり前と思って、その作品の良さを最大限伝えよう！」と考えるようになった、とお話されていました。 自分も「あんまり自信がないですが」「ちょっと初めてだったので」のように、成果物を見せる際に予防線を張ってしまう事は多々ありました。謙遜の意味合いの場合もありますが、自信があるからこそ批判されて傷つきたくないがために予防線を張ってしまう事がほとんどだったので、このお話を聞いてハッとしました。作品の価値を落とさないために、予防線は極力貼らないように気を付けています。 4. おわりに 4ヶ月で多くの学びを得ましたが、スキル的にはまだまだ見習いの域を出ません。本職のデザインの力を伸ばすにもまずは実装の基礎体力をつけるべく、年内はReactの勉強に注力します（今は下記の本で勉強中）。 モダンJavaScriptの基本から始める React実践の教科書 そんなにロジカルな人間ではないので実装に向いてるとは思いませんが、新しい知識を習得したときや、あれこれ試行錯誤して動くソフトウェアができた時の喜びを大切にしていきたいです。年明けごろにはデザインの勉強にシフトして、Google UX Design Certificateの習得を始めたいですね。 最後になりますが、まさか自分がこんな分野の事を勉強しているとは学生の頃には想像がつきませんでした（DesignshipもReactも、名前すら聞いたことがありませんでした）。 自分の好きなUXデザイナーの安藤 剛さんが、以前Youtubeで「技術的なキャッチアップは組織に所属していなくても可能だが、文化的なキャッチアップは組織に所属していないと難しい」とお話されていましたが、まさしくそれを実感しています（動画は下記リンク）。 今の時代はネットや本から技術は学べるものの、アジャイルやデザインの文化・トレンドを学べるのは組織に所属している人の特権ですよね。自分は組織に所属しているメリットを最大限に活かし、技術と文化をこれからもアップデートしていきたいと思います！ ここまで読んで頂き、ありがとうございました。