-
入稿データの良し悪しは気配りで決まる！マークアップエンジニアが考える最高のデザインデータ
よい入稿データとは、どのようなものだろうか？ マークアップエンジニアにしてみれば、コーディングしやすいデータに尽きるのだろう。コーディングしにくいデータよりは断然よいに決まっている。工数は短縮できるし、ミスも少なくなる。時間の余裕がソースコード見直しに寄与するわけだ。 それでは「コーディングしやすい」とは、どのようなものか？ 私は、ひと目で構造を読み取れるデータと考えているが、いかがだろうか。構造がシンプルであれば、HTML/CSSが最適化しやすい。ソースコードの構造化ができれば、セマンティックWebに関わる定義に矛盾が生じにくい。さらにコンポーネント・ベースの UI 開発を取り入れることで、運用性があがる。つまりメンテナンス性の担保につながるわけだ。 私はフリーランス時代に、多くのコーディング案件を受託してきた。デザインデータを入稿してもらいHTML/CSSコーディングを行うといった内容だ。JavaScriptによるリッチコンテンツを加えたり、メールフォームの実装だったりもする。 制作会社でコーディングを担当する場合と違い、数多くのデザイナーのさまざまなデザインデータを預かる。癖も違えば、能力も違う。それでも柔軟な対応が求められ、違和感を覚えながらもマークアップをすることも少なくなかった。なかにはパワーポイントによるデザインデータの入稿を申告するケースもあった。きっとデザインと呼べるものではなかったに違いない。 そんななかでも、もっとも素晴らしかったデザインデータをご覧に入れたい。 もしかしたら学べるところがあるかもしれない。画像やバナー、テキストはダミーに差し替えている。その点はご容赦いただきたい。 入稿データ まず目につくことといえば、デザイン内に含まれた指示だろう。これはPhotoshopのレイヤーを活用して表示している。 実際には、これに加えて指示書も添付されていた。とても用意周到なお仕事だと関心したことを記憶している。 指示内容 指示内容には、つぎの２点で メインビジュアルのローテーション指示 デバイスフォント記述箇所の指示 以上のことが示されている。 メインビジュアルのローテーション指示について まずメインビジュアルのローテーション（スライダー）は、参照先を提示している。 これは動作イメージの共有を図ってのことだろう。これができるのは、デザインの段階で明確に動作までを考慮した設計あってのことだと思う。 そして動作イメージにおいて、文章で説明しても伝わりにくいことから参照先を示したわけだ。たとえばスライダーの場合、 一枚ずつ切り替え スピードはゆっくり このような指示があっても漠然としていてよくわからない。すでにイメージしている動きに近いものがあるなら参照先の提示がもっとも効率がよいだろう。 コーディングデータを確認したらイメージと違ったなんてことを未然に防ぐことできるはずだ。 デバイスフォント記述箇所の指示について つづいて、デバイスフォント記述箇所の指示は、透過オーバーレイで提示している。 デバイスフォント指示には、アンチエイリアスを外して示すパターンもある。しかしアンチエイリアスを外すと、カクカクした見栄えからクライアントチェックで不評を招く恐れもあって、およそアンチエイリアスはかけたままが多い印象だ。 そんなことから指示書に記されるわけだが、これも結局文章による説明となってしまい齟齬が発生しやすい。その点、デザイン上で示せるのならばベストといえる。 デザインデータを見ながら指示書を確認する作業は、非常に負荷のかかる行為である。このデータの指示方法には唸らせてもらった。 まとめ デザインとはWebページのレイアウトだけに気にかけていればいい、という類のものではないことを自覚させられたデータだった。 Webページのデザインは言わずもがな素晴らしく、レイヤーの整理、各所の指示内容を明瞭にするなど気配りが感じられたと思う。 デザインに限らず資料作成の際は、細部にまで気配りを加えることが必要だと学ぶことができるデータだったのではないだろうか。
-
いますぐ使える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.…
-
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;と覚えてください。 きっと活用できるケースがあると思い記事にしました。マークアップの一助となれば幸いです。
-
インスタ映えに挑戦！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になります。 ユーザーの入力を受け付けるインプットフィールドが設けられていることがわかります。…
-
記事内のソースコードをハイライトするWordPressプラグイン「CodeMirror Blocks」の使い方
「CodeMirror Blocks」プラグインは、ソースコードをハイライトします。 なんと100種類以上のプログラミング、スクリプト、マークアップ、メタ言語をサポート。および56種類ものテーマが用意されています。 技術系チュートリアル記事に最適なWordpressプラグインです。 特徴 軽量で軽い コーディング標準に従いコードを保護する 多岐にわたるオプションと直感的なUI クロスブラウザ互換 すべてのWordpressテーマと互換性あり RTL対応 翻訳の用意が整っている インストール プラグイン新規追加 「CodeMirror Blocks」をキーワード検索 「今すぐインストール」ボタンをクリック、「有効」ボタンをクリック 使い方 ブロック挿入アイコン「Code Block」をクリック 追加されたブロックにソースコードを入力 右メニュー「Language / Mode」から該当する言語を選択 右メニュー項目 Language / Mode該当するプログラミング、スクリプト、マークアップ、メタ言語を選択する Themeハイライトするテーマを選択する Show Line Numbers?行数を表示する Wrap Long Line?右端で折り返すか否か。 Editable on Frontend?記事画面のソースコード入力の可否 Disable Copy on Frontend?記事画面のソースコードコピーの可否
-
Gmailエイリアス機能で別名アドレスを作る方法
私は、メールのやり取りに「Gmail」を利用している。仕事、プライベートともにである。そしてこの記事をご覧になるあなたもGmailを日々活用していることだろう。 そんななか、つぎのような必要に迫られたことはないだろうか？ 「SNSアカウント作成ごとにメールアドレスを変えたい」「ラベル・フィルタの分類を楽にしたい」「新たにメールアドレスが欲しいけど、アカウントは作りたくない」 などに該当する場合は、有効な手段になり得るエイリアス機能を紹介したい。 引き続きご覧いただけると幸いだ。 Gmailエイリアス機能とは？ まずエイリアス機能について解説しよう。Gmailを使うにあたり、Googleアカウントを開設している訳だが、Gmailアドレスは１アカウントにつき１アドレス発行される。 また同一アカウントでサブアカウントは開設できない。つまり「~~~@gmail.com」のメールアドレスをひとつ保有していることになる。 発行されたメールアドレスのユーザー名の後にカテゴリを追加する形式で、容易くメールを分類することができる。 この仕組みが「Gmailエイリアス機能」だ。 概要のつぎは、メリットとデメリットについても明らかにしておこう。 メリット エイリアスを活用すれば、既存メールアドレスを複数個運用することができる。わざわざアカウントを開設する必要がないのである。 さらにエイリアスは、設定等の手間が不要だ。 たとえば、SNSアカウント開設時にエイリアスアドレスを入力するのみ。まったく手間がかからずエイリアス機能が使えるわけだ。 そして利用したエイリアスはフィルタ分類などが簡単に行える。 デメリット デメリットは受信専用ということだ。受信メールは、対象のメールアドレスに届く。 しかし送信用に設定されていないメールアドレスに関しては、エイリアス機能を享受できないのだ。 たとえばエイリアスされたメールアドレスから返信を行うとエイリアス未使用メールアドレスとして送信される。送り返された相手にしてみれば違うメアドから返事が届くわけだから、とても違和感を覚える状態と言える。 とはいえ送信用メールアドレスとしてエイリアスを設定すれば、解消することが可能だ。エイリアスで送信する場合に実施するとよいだろう。 Gmailエイリアス機能の効果的な使い方 Gmailエイリアス機能を使うにあたり効果的と思えるシーンをいくつか提案したい。 SNSに複数アカウントを作る SNSアカウントを開設するには、メールアドレスが必要だ。SNSにサブアカウントを複数開設するにも、おのずとメールアドレスを求められる。そのような場合にエイリアス機能を使うことで、メールアドレス発行に関わるアカウント作成が不要になる。 ラベル＆フィルタで自動振り分けする エイリアスをフィルタ条件にすることで自動振り分けをすることができる。その結果ラベルやスターを付けたり、別のアカウントに転送などを目的とした利用が考えられる。 Gmailエイリアスアドレスの作り方 エイリアス機能は３パターンある。利用するシーンによって使い分けが可能だ。 では順を追って眺めてほしい。 +（プラス）を使う方法 +（プラス）で任意の文字列を連結してエイリアスを作る。つぎのメールアドレスはすべて「yourname@gmail.com」のエイリアスとなる。 yourname+facebook@gmail.comyourname+twitter@gmail.comyourname+work@gmail.comyourname+news@gmail.com .（ドット）を使う方法 .（ドット）でユーザー名を分割してエイリアスを作る。ユーザー名に含む.（ドット）を認識しない特性を利用することでエイリアスを実現しているわけだ。つぎのメールアドレスはすべて「yourname@gmail.com」のエイリアスとなる。 your.name@gmail.comy.o.u.r.n.a.m.e@gmail.com googlemail.comを使う方法 ドメインを@googlemail.comに変更してエイリアスを作る。 @googlemail.comは海外用ドメインだ。これを利用することで、エイリアスが機能する。つぎのメールアドレスはすべて「yourname@gmail.com」のエイリアスとなる。 yourname@googlemail.com まとめ 以上がGmailエイリアス機能の紹介だ。あなたにマッチする使用方法は見つかっただろうか。 とりわけ+（プラス）でエイリアスするケースが多いかもしれない。ユーザー名に任意文字列を結合するシンプルな機構なため分類には相性がよいのだろう。 Gmailエイリアス機能を利用してあなたの問題が解決できることを願っている。