-
Next.jsでSassファイルを使う！node-sassモジュール設定方法
Next.jsでSassモジュールを使えるようにしたい？その手続き、私がお手伝いしましょう。 Next.jsには、もともとstyled-jsxが用意されています。それによりパッケージを追加せずとも、ReactコンポーネントベースのCSS設計ができるわけです。 コンポーネント単位でスタイルを当てる分には、設定もなくJSX形式で記述できます。しかしextendしたいCSSプロパティなどがある場合には、当該コンポーネントでは完結しません。 そこで取り入れたいのが、アプリケーション全体に適用されるスタイルです。CSSファイルを読み込めば済みますが、開発過程でSassを使用しているケースもあります。それならば折角だから、Next.js環境にもSassを導入したいではありませんか。 それが、このエントリーの動機です。あなたも同様のことでお困りなら、Next.js環境にSassモジュールを追加する方法をご覧になって、ぜひトライしてみてください。 必要なモジュール Next.js環境にSassを導入するには、つぎの２つのモジュールが必要です。 @zeit/next-sass node-sass 対象の環境にインストールします。コマンド実行後は、package.jsonに追加されることを確認してください。 または next.config.jsの修正 next.config.jsの先頭行で、「@zeit/next-sass」モジュールを読み込みます。当該モジュールは定数「withSass」格納してください。続いて、withSassメソッドをmodule.exportsに代入して、モジュール化しています。 CSS Modulesにする withSassメソッドにcssModules: trueを与えるとCSS Modulesが適用されます。CSS Modulesは、低レイヤーのUIにフォーカスしたアーキテクチャです。この概念の導入によりグローバル汚染防止に効果的です。styled-jsxも同様の考え方によるものといえるでしょう。しかし共通スタイルを複数コンポーネントに跨って適用したい場合には、使いません。 エラーが発生したら エラーが発生しましたか？私の環境では、つぎのエラーが発生しました。node-sassが環境に適用されていないとのことです。 エラー解消方法 node-sassのGitHubリポジトリにissuesが投稿されていました。 @aleclarson Thanks, it worked for me for macOS and electron 1.6.12. I’ve improved the script a bit to automate it: GitHub 上のシェルスクリプトを保存します。ファイル名は任意で結構。ファイルを、package.jsonがある階層に配置してください。用意が整ったら、シェルスクリプトを実行します。 まとめ Next.js環境でSassを使う方法をお伝えしてきました。共通スタイルにおいては、効率的な作業ができるのではないでしょうか。ただしReactは、コンポーネントベースの開発を勧めるライブラリであるため、各コンポーネントで読み込むなり、styled-jsx記述をするなりして、CSS Modules化を検討することも忘れないでください。
-
入稿データの良し悪しは気配りで決まる！マークアップエンジニアが考える最高のデザインデータ
よい入稿データとは、どのようなものだろうか？ マークアップエンジニアにしてみれば、コーディングしやすいデータに尽きるのだろう。コーディングしにくいデータよりは断然よいに決まっている。工数は短縮できるし、ミスも少なくなる。時間の余裕がソースコード見直しに寄与するわけだ。 それでは「コーディングしやすい」とは、どのようなものか？ 私は、ひと目で構造を読み取れるデータと考えているが、いかがだろうか。構造がシンプルであれば、HTML/CSSが最適化しやすい。ソースコードの構造化ができれば、セマンティックWebに関わる定義に矛盾が生じにくい。さらにコンポーネント・ベースの UI 開発を取り入れることで、運用性があがる。つまりメンテナンス性の担保につながるわけだ。 私はフリーランス時代に、多くのコーディング案件を受託してきた。デザインデータを入稿してもらいHTML/CSSコーディングを行うといった内容だ。JavaScriptによるリッチコンテンツを加えたり、メールフォームの実装だったりもする。 制作会社でコーディングを担当する場合と違い、数多くのデザイナーのさまざまなデザインデータを預かる。癖も違えば、能力も違う。それでも柔軟な対応が求められ、違和感を覚えながらもマークアップをすることも少なくなかった。なかにはパワーポイントによるデザインデータの入稿を申告するケースもあった。きっとデザインと呼べるものではなかったに違いない。 そんななかでも、もっとも素晴らしかったデザインデータをご覧に入れたい。 もしかしたら学べるところがあるかもしれない。画像やバナー、テキストはダミーに差し替えている。その点はご容赦いただきたい。 入稿データ まず目につくことといえば、デザイン内に含まれた指示だろう。これはPhotoshopのレイヤーを活用して表示している。 実際には、これに加えて指示書も添付されていた。とても用意周到なお仕事だと関心したことを記憶している。 指示内容 指示内容には、つぎの２点で メインビジュアルのローテーション指示 デバイスフォント記述箇所の指示 以上のことが示されている。 メインビジュアルのローテーション指示について まずメインビジュアルのローテーション（スライダー）は、参照先を提示している。 これは動作イメージの共有を図ってのことだろう。これができるのは、デザインの段階で明確に動作までを考慮した設計あってのことだと思う。 そして動作イメージにおいて、文章で説明しても伝わりにくいことから参照先を示したわけだ。たとえばスライダーの場合、 一枚ずつ切り替え スピードはゆっくり このような指示があっても漠然としていてよくわからない。すでにイメージしている動きに近いものがあるなら参照先の提示がもっとも効率がよいだろう。 コーディングデータを確認したらイメージと違ったなんてことを未然に防ぐことできるはずだ。 デバイスフォント記述箇所の指示について つづいて、デバイスフォント記述箇所の指示は、透過オーバーレイで提示している。 デバイスフォント指示には、アンチエイリアスを外して示すパターンもある。しかしアンチエイリアスを外すと、カクカクした見栄えからクライアントチェックで不評を招く恐れもあって、およそアンチエイリアスはかけたままが多い印象だ。 そんなことから指示書に記されるわけだが、これも結局文章による説明となってしまい齟齬が発生しやすい。その点、デザイン上で示せるのならばベストといえる。 デザインデータを見ながら指示書を確認する作業は、非常に負荷のかかる行為である。このデータの指示方法には唸らせてもらった。 まとめ デザインとはWebページのレイアウトだけに気にかけていればいい、という類のものではないことを自覚させられたデータだった。 Webページのデザインは言わずもがな素晴らしく、レイヤーの整理、各所の指示内容を明瞭にするなど気配りが感じられたと思う。 デザインに限らず資料作成の際は、細部にまで気配りを加えることが必要だと学ぶことができるデータだったのではないだろうか。
-
【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する
こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。 その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。 欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。 デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.js Express MongoDB Mongoose GraphQL Express まずは必要なパッケージをインストールし、Expressのアプリケーションを作成します。 メインとなるserver.jsを実装していきましょう。 server.jsを実行し、http://localhost:8080/helloにアクセスするとHello Worldが表示されます。 MongoDB MongoDBとの接続を行います。 Mongooseを使用したいので、以下のコマンドで必要なパッケージをインストールしましょう。 次にutilsディレクトリを作成し、その中にDBとの接続を行うdatabase.jsを作成します。 utils/database.js database.jsをimportし、DB.connect()を実行することでMongoDBに接続されるようになりました。 GraphQL GraphQLを実装していきます。 まずはGraphQL関連の必要パッケージをインストールします。 スキーマとモデルのディレクトリを作成します。 今回はサンプルとして本のタイトルと著者のデータとします。 タイトルと著者をString型として定義したモデルを作成します。 models/book.js さらにスキーマも作成します。 ここで本記事の主役であるgraphql-composeを使用します。 graphql-composeはGraphQLのスキーマを作成するToolkitとのことで、 簡単にスキーマを作成することができます。 schemata/book.js これだけでCRUDのGraphQL APIになります。 最後にserver.jsを修正してGraphQLを有効にします。 server.js 再度server.jsを実行して以下のURLを開いてみましょう、GraphQLの実行環境が表示されます。 http://localhost:8080/graphql DBにデータが存在していないのでGraphQLでデータを新規登録してみます。 【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する実行環境の左上に以下のmutationを入力します。 さらに左下のQUERY VARIABLESの部分に以下を入力し実行しましょう。 作成されたデータのIDがレスポンスとして返却されます。 データが作成できましたのでGraphQLでデータを取得してみます。 実行環境の左上に以下のqueryを入力して実行してみます。…
-
Macのターミナルで連番のテストデータを作る
実務の中で以下のようなテストデータが必要になりました。 このようなデータを手作業で作成するのは非合理的なので、ターミナルから簡単に作成してみます。 テストデータの作成 まずディレクトリを作成します。 mkdirコマンドは-pオプションを指定することでディレクトリが存在しない場合に自動的に作成してくれます。 今回のケースではDataディレクトリを作成し、TextDataディレクトリを作成し…という形です。 その後はcd $_で作成したディレクトリに移動しますので、 $ cd Data/TextData/2019/0501のようにわざわざパスを指定して移動する手間がなくなります。 テスト用のテキストファイルを作成するためにtruncateコマンドを使用します。 Macではデフォルトでは使用できませんのでbrewでインストールしましょう。 truncateコマンドをインストールできたらサイズを指定してファイルを作成します。（とりあえず10kbのテキストとします。） このテキストファイルが50件欲しいので連番でコピーします。 printf “%02d”とすることで２桁のゼロ埋めした数値となります。 同じようにディレクトリも連番コピーします。 これで最初に提示した構造のテストデータが作成できました。 手順さえ覚えれば何千件、何万件のデータでも作成できますので覚えておくと役に立つかもしれません。
-
2019子どもの夢とおいしいもの祭りに参加します
5/18(土)、5/19(日)に道の駅あいづ湯川・会津坂下で、ふくしま産業賞受賞企業プレゼンツ「2019子どもの夢とおいしいもの祭り」が開催されます。 ふくしま産業賞は、 福島県内で「独自の光る技術」を持つ企業や「伝統を守り、地域性豊かなものづくり」を続ける人材などに、社会的な評価を与えることを目的とします。また、その活動の情報を発信する中で、新たな市場開拓につなげるなど、県内の企業活動・ものづくりを応援し、人材育成等を通して経済の活性化を図ります。 福島民報 「2019子どもの夢とおいしいもの祭り」には、ふくしま産業賞受賞企業が参加します。最新技術を駆使した先進性を評価された企業・団体によるブースで、子どもに夢を与える企画や魅力的なものづくりを体験できます。また地元の新たな産品や伝統的な味を堪能できるイベントです。 会津ラボは、動物ぬりえAR無料体験をご用意しています。子どもから大人まで楽しんでいただけます。家族連れでお越しください。お待ちしております。
-
いますぐ使えるinput,select,textarea要素のCSSイディオム集
コーディングで手間がかかる要素といえば、フォーム周りではないでしょうか？ブラウザ固有のUIがあったり、ユーザーの操作によって状態に変化があったりと一筋縄にはいきません。 そのような訳で、フォーム周りのコーディングが面倒だと感じている人は少なくないはずです。私がその筆頭に君臨します。デザインに引っ張られることで、毎案件で一貫性がないソースコードを披露してしまう始末。大概フォーム周りは後回しにしてきました。 それが最近ようやく、まとまりのあるコーディングをするようになったと感じています。その一端をご覧ください。 イディオムとは いわゆる慣用句のことで、プログラミングやマークアップにおける定型文をイディオムといいます。 慣用句は、ふたつ以上のものが結合して、まったく別の機能を持つことを表します。 したがって、小さな要素の集まりからなるコンポーネント単位のソースコードも同様です。 きっとあなたも決まった書き方をするコンテンツがあると思います。それがイディオムです。 イディオム集 イディオム集には、input,select,textarea要素を用意しました。スタイルはSCSS形式で記述しています。「いますぐ使える」を目的としたため、コピペで使える状態です。したがって共通している箇所は適宜修正する必要があります。またサイズやボーダー、カラーはデザインに合わせて修正してください。 Input要素 テキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. サーチテキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. チェックボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. ラジオボタン See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen.…
-
MacでLinuxのブータブルUSBを作る
サーバにLinuxをインストールする際にブータブルUSBを作成するのですが、いつも手順を忘れてしまうため備忘録として記事に残します。 ブータブルUSBとは USBメモリからLinuxを起動する仕組みです。 起動したLiveイメージからHDDへのインストールを行う他、 USBメモリを接続するだけでほとんどのPCでLinux環境を起動できるので「WindowsPCにブータブルUSBを刺してLinuxを起動し、CUIでHDDのファイルをコピーする」というような使い方もできます。 ブータブルUSBを作る 「UNetbootin」というGUIのツールで作成することもできますが、私はコマンドラインで作成したい派なのでCUIでの作成手順をまとめます。 https://unetbootin.github.io/ まず作成するUSBメモリを接続し、diskutilコマンドでディスク情報を確認します。 今回使用するUSBメモリは4Gのものですので/dev/disk2が該当のディスクということが分かりました。 USBメモリにイメージの書き込みを行うため、アンマウントします。 USBメモリをアンマウントできたら、メモリに書き込むLinuxのイメージを作成します。 今回はCentOSを使用したいのでCentOSのisoファイルをダウンロードしました。 ダウンロードしたisoファイルをimg形式に変換します。 変換が完了したらimgファイルをUSBメモリ(/dev/disk2)に書き込みます。 少々時間がかかりますが、完了するとブータブルUSBの作成は終わりです。 あとは作成したUSBを対象のPCに接続し起動するとLinuxのLive環境を起動できます。（BIOSの設定が必要な場合もあります。）
-
flexboxでリキッドレイアウト（固定＋可変）にする方法
このエントリーでは、flexboxでリキッドレイアウトを表現する方法をお伝えします。可変カラム＋固定カラムが横並びになるレイアウトにするとき使えるスタイルです。 リキッドレイアウトとは リキッドレイアウトは、可変カラムと固定カラム構成の名称です。ブラウザのサイズやデバイスの違いを柔軟に表示する概念です。 2カラム、あるいは3カラム構成からなるレイアウトが一般に見られるのではないでしょうか。 たとえば、サイドメニューが固定幅で、メインコンテンツが可変幅などが代表的です。 flexboxのリキッドレイアウトが使えるケース レスポンシブデザインに最適 固定、可変する要素があるとき フォームのラベルと入力要素が並ぶとき 使い方（2カラム） 2カラムレイアウトを例にHTML/CSSを記述します。各々のレイアウトに置き換えてご覧ください。 HTMLでは、梱包要素のwrapperクラスと固定カラムのsideクラス、可変カラムのmainクラスが確認できます。 CSSでは、まず梱包要素のwrapperクラスにdisplay: flex;を適用することでフレックスコンテナボックスにすることが目的です。それにより小要素は横並びになります。 続いて、sideクラスにwidth: 300px;の横幅を与えて固定値とします。 最後に、mainクラスにflex: 1;の指定で可変を実現します。flexプロパティはflexのスタイルカスタマイズする省略プロパティです。CSSショートハンドといいます。リキッドレイアウトを実現するにあたって厳密にプロパティを指定する必要性が無いため割愛しますが、気になる方は別途調べるとよいでしょう。[flex – CSS: カスケーディングスタイルシート] まとめ 以上がflexboxでリキッドレイアウトにする方法でした。必要なHTMLは、梱包要素と固定カラム、可変カラムです。必要なCSSは、梱包要素にdisplay: flex;と固定カラムにwidth: ~~px;、可変カラムにflex: 1;と覚えてください。 きっと活用できるケースがあると思い記事にしました。マークアップの一助となれば幸いです。
-
Node.js + Babelで「ReferenceError: regeneratorRuntime is not defined」となる場合
ES6で開発し、Babelでトランスパイルしたものをnode transpiled.jsの形で実行していますが、 「ReferenceError: regeneratorRuntime is not defined」のエラーが表示されるようになりました。。。 環境 package.json .babelrc 原因 await-aysncが原因らしいです。 Webpackの設定などで解決する情報はありましたがNode.js + Babelで解決するのに手間取ったので備忘録として。 対策１ 調べたところによると.babelrcを以下のようにすると良いと発見したので早速変更 .babelrc Error: Cannot find module ‘@babel/preset-env’ もちろんインストールしていないのでエラー yarn add @babelとしても同じエラーが。。。 yarn add @babel/preset-envでインストール？ と試してみるが次は以下のエラー Error: Cannot find module ‘@babel/core’ yarn add @babel/coreと不足しているパッケージをインストールし続けるのは違う、と思ったので別の方法を模索。。。 対策2 babel-polyfillをインストールしてトランスパイル対象のファイルにimport babel-polyfill;を記述することで解決。 という情報を発見。 そんなにシンプルに解決するのか半信半疑でしたが試してみることに。 yarn add –dev babel-polyfillとしエントリーファイルにimport babel-polyfillを追加してyarn build 以外と呆気なく解決。。。
-
インスタ映えに挑戦！AWS Amplifyの認証画面をInstagram風してみた
「インスタ映え」が、2017年のユーキャン新語・流行語大賞にノミネートされてから久しく、今日ではたくさんの写真がシェアされている。 そもそもインスタ映えとは、Instagramにシェアした写真が、見栄えよく映えることを表現した言葉だ。そしてフォトジェニック的な意味合いで用いられることもある。「それ映える！」など、写真にしたとき心が動かされる様を表す感動詞的な用法なのかもしれない。 それならば思うところがある。AWS Amplifyの認証画面をInstagramっぽくしたら、それはもう「インスタ映え」ではないだろうか。と、勝手に解釈してみることにした。 それではさっそくAWS Amplifyの認証画面をInstagram風にして「インスタ映え」なのかを検証してみようではないか。 インストール 「a-theme-react」をインストールする。 a-theme-reactは、AWS Amplify UIテーマをカスタマイズできるパッケージだ。 テーマを変更する テーマをカスタマイズするまえに、デフォルトのUIをご覧いただきたい。 シンプルな認証画面であることが分かっていただけたと思う。このUIをInstagram風に変更するわけである。 テーマを適用する 以上がテーマ適用の記述だ。まったく難しいことはない。a-theme-reactをimportして、theme propsにセットするのみでカスタマイズ完了だ。 「インスタ映え」だったか？ 答えは簡単だ。これは「インスタだぜ！」だ。感動詞的ではあるが、「インスタ映え」ではなかった。 もし実装することがあれば、「インスタだぜ！」と自慢してみてほしい。