-
入稿データの良し悪しは気配りで決まる！マークアップエンジニアが考える最高のデザインデータ
よい入稿データとは、どのようなものだろうか？ マークアップエンジニアにしてみれば、コーディングしやすいデータに尽きるのだろう。コーディングしにくいデータよりは断然よいに決まっている。工数は短縮できるし、ミスも少なくなる。時間の余裕がソースコード見直しに寄与するわけだ。 それでは「コーディングしやすい」とは、どのようなものか？ 私は、ひと目で構造を読み取れるデータと考えているが、いかがだろうか。構造がシンプルであれば、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にセットするのみでカスタマイズ完了だ。 「インスタ映え」だったか？ 答えは簡単だ。これは「インスタだぜ！」だ。感動詞的ではあるが、「インスタ映え」ではなかった。 もし実装することがあれば、「インスタだぜ！」と自慢してみてほしい。
-
CSSフレームワークBootstrapのダイアログを秒速で実装する「bootbox.js」が超便利
CSSフレームワークといえば、Bootstrapといえるほどのネームバリューを誇ります。使用を検討する場合は筆頭候補といえるでしょう。次の画像は「npm trends 」でトレンド調査した結果です。 圧倒的といえるほどのダウンロード数です。新進気鋭の有望なCSSフレームワークがリリースされても、Bootstrapが依然としてトップに立っていることがわかります。 なぜこれほどまでに人気であり続けられるのでしょうか？それには次のようなことが挙げられます。 効率がいい開発を図れる 洗練されたCSS設計（アーキテクチャ）の採用 HTMLモックをすばやく作成できる ルールに沿った使い方で開発速度アップを見込める HTMLにクラス付与するのみの簡単実装 充実したユーザーインターフェースが魅力 トレンドをおさえたアップデートが実施される 統一感のある構築ができる しかし一方で、特定のインターフェースを実装するにしてもHTMLとjQuery(JavaScript)の記述が必要です。Bootstrap経験があるエンジニアやデザイナーのなかには、 「ダイアログだけ使いたい。」「ダイアログを手軽に実装したい。」「HTMLとJavaScriptの記述が面倒くさい。」 という不満を覚えた人も少なくないのではないでしょうか？そこで本日の「bootbox.js」をお伝えしたいと考えました。 「bootbox.js」は、bootstrapダイアログボックス実装に特化したライブラリです。特筆すべきは実装がものすごく簡単です。JavaScript数行の記述でalertやconfirm、custom dialog、promptを作成できます。 基本的な機能 アラートダイアログ 確認ダイアログ プロンプトダイアログ カスタムダイアログ 導入 導入に際して、次のファイルを読み込んでください。 必要なファイル Bootstrap [CSSファイル] jQuery [JavaScriptファイル] Bootstrap [JavaScriptファイル] Bootbox [JavaScriptファイル] 読み込み例 読み込み例では、オンライン上のCDNから取得しています。適宜ダウンロードやnpmインストールを選択してください。 使い方 アラートダイアログボックス 注意を伝えるダイアログです。 基本的な使い方 簡易なアラートダイアログならば、一行で実装できます。 アラートダイアログの表示例です。alertメソッド引数の文字列がダイアログのラベルに表示されます。「Hello world!」となっていることがわかります。 コールバック設定 アラートダイアログが閉じたタイミングでコールバックが走ります。alertメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。 確認ダイアログボックス OK/Cancelボタンを持つダイアログです。 基本的な使い方 確認ダイアログは、コールバックの設定が必須です。confirmメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。OK/Cancelボタンのクリックの是非をコールバック値で判定します。 確認ダイアログの表示例です。confirmメソッド引数の文字列がダイアログのラベルに表示されます。確認ダイアログならではのOKとCancelボタンが表示されていることがわかります。 プロンプトダイアログボックス ユーザー入力を受け付けるダイアログです。 基本的な使い方 プロンプトダイアログは、コールバックの設定が必須です。コールバック関数では、ユーザー入力をコールバック値で取得することができます。ダイアログをキャンセル、またはCancelボタンをクリックした場合はnullになります。 ユーザーの入力を受け付けるインプットフィールドが設けられていることがわかります。…