REQLY開発ブログスマートフォン用の表示で見るREQLY開発ブログプロの料理レシピ専門検索エンジンREQLY(レクリー)の開発ブログです。この広告は、90日以上更新していないブログに表示しています。プログラミングはじめにREQLYではGoogleの提唱するマテリアルデザインに基づいた実装が行われています。material-uiは、マテリアルデザインを構成するUIパーツのReactライブラリであり、REQLYではスマホ版のAppBarなどの実装に取り入れられています。material-uiの1つ1つのコンポーネントの使い方は、公式のDemoページにサンプルコードと共に丁寧に書かれていますが、どのようにして複数のコンポーネントを組み合わせて実用的なデザインを組み上げていくのか、という実践的な内容についての情報は多くありません。今回は、REQLYのAppBarを例にmaterial-uiの実践的な使い方をしっかり説明していきたいと思います。ReqlyTokyo/appbarにて公開しています。DockerによるReact開発環境の作成まずは、Dockerを用いて逐次実行可能なポータブルなReact環境を作成するところから始めよう。facebookが公開しているcreate-react-appというコマンドを使えば、開発のベースとなるReactアプリケーションを簡単に作成することができる。create-react-appコマンドのインストール方法は公式ページを参照されたい。startこれによりhttp://localhost:3000/にデフォルトページが立ち上がるはずだ。次にこのアプリケーションをDockerfileとdocker-compose.ymlを使ってコンテナ化しよう。installをRUN命令で実行することで、必要なライブラリがインストールされたDockerイメージを作成できる。./myapp/public:/myapp/public3000番ポートの公開のほか、volumes命令によって./myapp/srcと./myapp/publicをそれぞれマウントしている。これにより、Dockerコンテナを立ち上げた状態でホスト側で./myapp/srcや./myapp/public以下のファイルを編集したときに、リアルタイムで更新が走るようにできる。npmへの依存関係を定義する。coreだけでなくiconsも使えば、マテリアルデザインの公式アイコン集を簡単に実装に組み込むことが可能になる。buildを実行すれば、無事に必要なライブラリが揃ったDockerイメージが作られる。次に通常モードと検索モードを表現するクラスをそれぞれ独立に実装していこう。GitHub)イメージに非常に近いものがDemoページの3番目に既に実装されている。MenuIconを廃止し、SearchIconを新たに導入すれば、ほとんどイメージに近いものが得られる。この段階ではSearchIconにonClickが定義されていないので遷移自体は起こらないが、マテリアルデザインに基づいたクリック時のエフェクトなどが既に自動的に付与されていることが分かるだろう。GitHub)検索ウィンドウ自体はmaterial-uiに実装されていないが、material-uiを用いて実装された検索ウィンドウがMITライセンスで公開されている。これについても、一番左にBackIconを追加するだけで、ほぼイメージ通りの検索バーを実装することができる。AppBarの出し分けの実装Default.jsとSearchBar.jsが定義されたので、あとはこの2つを出し分ける親クラス(ReqlyAppBar.js)を実装すれば目的は達成できる。ReqlyAppBar;ReqlyAppBarは、searchというbooleanのstateを持ち、それがTrueだった場合は検索モード、Falseだった場合は通常モードを描画するクラスだ。DefaultBarの呼び出し時に渡していることが分かるだろう。あとは、検索アイコンまたは戻るボタンがクリックされた場合に、このコールバック関数を発火するようにすれば、ReqlyAppBarクラスのstateが変更されてReqlyAppBarが再描画され、2つのモードが切り替わることとなる。クリック時の発火はそれぞれのIconButtonのonClickパラメタにて登録できる。/></IconButton>以上により、サーチモードに切り替え可能なAppBarが無事実装できた。おわりにREQLYではAppBarの他にもレシピカードなどにmaterial-uiが使用されています。»プロフィールid:reqly-tokyoプロの料理レシピ専門検索エンジンREQLY(レクリー)の開発ブログです。アーカイブはてなブログをはじめよう!reqly-tokyoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。