CSSプロパティに順序付けする習慣があることを知っているだろうか？width,heightやmargin,paddingなどのCSSプロパティのことなのだが、実はこれらには記述する順序が存在する。 順序といってもスタイルの優先順位の話ではない。あくまでコーダーが気をつけるべき程度のことなのだが、順序付けを講じたものとそうでないものでは、可読性の良し悪しが表れる。クオリティはもちろんのこと、その後の運用にも影響を及ぼすほどにだ。 たとえば目当てのプロパティを探すとき、順序付けで定められた辺りを確認すればよいものを、セレクタごとにバラけていたら大変効率が悪い。見付けづらいし、気持ち悪い。 CSSプロパティの順序付けを遵守しているマークアップエンジニアに発見されたら、間違いなく「きたねえCSSだ」と罵られるに違いない。 そういう事態にならないためにも、最低限のポイントは抑えておきたいものだ。 このエントリーでは、CSSプロパティの順序付けに言及している記事やサイトをいくつか紹介したい。 順序付けに言及している記事一覧 https://qiita.com/akuden/items/e9c91a7a2b0596d53fd1 CSS3のプロパティ順序も言及している。 視覚整形モデル（display,position,float etc…） 視覚効果（overflow,visibility etc…） ボックスモデル/テーブル（margin,padding,border etc…） 背景（background etc…） 画像（object-position etc…） 色（color etc…） フォント/テキスト（font,text-align etc…） マルチカラム（columns etc…） 生成コンテンツ、自動番号付け、リスト（list-style,quotes etc…） ユーザーインターフェイス（cursor,outline etc…） アニメーション（transition,animation etc…） 印刷 音声 https://9elements.com/css-rule-order/ sassの@extendや@mixin、その他clearfixにも言及している。 SASS INHERITANCE（@extend,@mixin etc…） GENERATED CONTENT（content etc…） POSITION AND LAYOUT（position,float etc…） DISPLAY AND VISIBILITY（display,opacity etc…） CLIPPING（overflow etc…） ANIMATION（transition,animation etc…） BOX MODEL（margin,padding…

フォームに入力した内容が、思わぬ操作によって消え去ってしまった経験はないだろうか。 入力中にページ遷移したり、ブラウザを閉じたりすることで、せっかく入力した内容を失ってしまう。ユーザーはそんなときどうするだろう。 きっとそのサービスを離脱するに違いない。貴重な時間を割いて入力、および選択した内容が忽然と消えてしまうのだから無理もない。たとえそれが本人の不注意によるものだったとしてもだ。 このような事案回避にピッタリなJavaScriptライブラリがある。 このエントリーでは、フォームデータを永続化するJavaScriptライブラリ「FormPersistence.js」を紹介したい。 FormPersistence.jsについて フォームデータを保持するJavaScriptライブラリだ。フォーム項目の入力と選択は、localStorageあるいはsessionStorageに保存される。永続化したデータは、ページ遷移やフォーム更新、再訪問時にフォームに反映が可能だ。 特徴 フォームデータの永続化 HTML要素にライブラリ特有の記述なし JavaScriptの記述は、最小で2行あれば実行可能 FormPersistence.jsを触ってみる 入手する npm (or yarn) でインストール CDNで読み込む jsDelivr 使用する HTML JavaScript 設定する persistメソッド 永続化するフォームとして定義する。 saveメソッド フォームデータをストレージに保存する。 loadメソッド ストレージからフォームに反映する。 clearStorageメソッド ストレージからフォームデータを削除する。 serializeメソッド フォームデータをJSON文字列に変換する。 deserializeメソッド JSON文字列をオブジェクトに変換してフォームに反映する。 まとめ フォームデータを永続化するJavaScriptライブラリ「FormPersistence.js」の紹介だった。フォーム入力が不慮の行為で消えてしまうことが想定される場合にも、フォームデータが永続化されていれば、サイト離脱は免れるかもしれない。ぜひとも実装しておいてもらいたい機能だ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

音声入力で検索したときのことだ。「イオンシネマ」と発声すると「４シネマ」の検索結果が表示されて、とても悲しい気持ちになったわけだが。 そんなことがあったためか、Webの音声認識APIはどんな状況なのか気になってしまった。 このエントリーでは、Web Speech API を触った結果を共有したい。 Web Speech APIとは Web Speech API は音声データを操作するWeb APIだ。 おもに音声認識と音声合成の機能を提供している。音声認識はマイクを介した音声を文字列として返し、音声合成は文字列を読み上げる、というものだ。それぞれSpeechRecognitionとSpeechSynthesisインターフェース経由でサービスを利用することになる。 Web Speech APIの対応状況 Web Speech APIの対応状況がどのような具合なのか確認してみよう。以下は、音声認識のSpeechRecognitionインターフェースと音声合成のSpeechSynthesisインターフェースの対応状況をCan I use… で調べた結果だ。 SpeechRecognitionの対応状況 https://caniuse.com/#feat=speech-recognition ブラウザ対応はほとんど進んでおらず壊滅的といえる状況だ。各種ベンダーはWebにおける音声認識に期待をよせていないのだろうか。とりあえずChromeを使っとけば大丈夫そうだ。 Chrome部分的なサポートとのことで、webkitのプレフィックスは必要。 Firefoxabout:config設定ページの「media.webspeech.recognition.enable」を有効にすることで使える。 OperaSpeechRecognitionインターフェースに対応しているようだが、イベントを捕捉しない。 SpeechSynthesisの対応状況 https://caniuse.com/#search=SpeechSynthesis SpeechRecognitionの状況とは反して、こちらは広くサポートされていることがわかる。文字列の読み上げには関心があったのだろうか。 Chrome バージョン55以降のWindows7と10、その他プラットフォームで、約15秒後に停止するバグあり。 Firefox バージョン49未満の場合は、about:config設定ページの「media.webspeech.synth.enabled」を有効にすることで使える。 音声認識を使ってみる HTML JavaScript 音声合成を使ってみる HTML JavaScript まとめ 以上がWeb Speech API の触ってみた結果だ。音声認識と音声合成のソースコードは体験するにあたり、もっともシンプルな内容としている。実際は、各種イベントやプロパティが用意されていて、もっと複雑な実装もできるはずだった。 実案件に使う予定は無いが、Web Speech APIに触れたことは良い経験値になったと思う。もし関心がもてたならば試してみてはどうだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

Webデザインのストライプ柄をコーディングするには、繰り返しできるか否かを見極めて切り出し、背景画像をリピート表示する。しかしこの手法には問題もある。 たとえば斜めストライプの場合だ。斜め線の角度が45°ならば、かろうじて繰り返しラインを見つけやすいが、この条件を外れると判別がつかない。つまりリピート表示用の画像を切り出すことができないということになる。 代替案は、対象エリア以上のサイズに切り出すことで、可変しても見切れることがないようにするというものがある。 ただデザインデータが、対象オブジェクトにストライプパターンを適用している場合は、当該オブジェクト以上のサイズに修正しなければならない。 また対象エリア以上の画像を配置するというのは、必要以上に大きな画像データを読み込むことに繋がり最善な策とは言い難い。 そんな場合には、CSSのみで対処できないか検討してみてはどうだろう。 このエントリーでは、CSSでストライプを表現する方法を紹介したい。 縦のストライプ（罫線）を書く repeating-linear-gradient関数を使う 90deg,で直角にする #FFF, #FFF 6px,で始点から6px地点まで#FFFにする #FF6C60 6px, #FF6C60 7pxで6px地点から7px地点まで#FF6C60にする See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. 斜めのストライプ（罫線）を書く linear-gradient関数を使う background-sizeで繰り返すサイズを指定する -45deg,で角度をつける #fff, #fff 48.5%,で始点から48.5%地点まで#fffにする #FF6C60 49.5%, #FF6C60 50.5%,で49.5%地点から50.5%地点まで#FF6C60にする #fff 51.5%, #fffで51.5%地点から終点まで#fffにする See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. まとめ 以上がCSSでストライプを表現する方法の紹介だ。ご覧のようにグラデーションを表現するCSS関数（linear-gradient or repeating-linear-gradient）が使われている。…

パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか？できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParallax.js」を紹介したい。 simpleParallax.jsとは パララックス効果を与えるJavaScriptライブラリ。simpleParallax.jsはvanilla JS製で、他フレームワークやライブラリに依存することはなく実装できる。vanilla JS製であることからわかるとおり、非常に軽量であることとシンプル実装が特徴だ。 特徴 vanilla JS製で他ライブラリに依存しない CSSハードウェアアクセラレーションの考慮 画像がターゲットで、余計なHTML要素を書かない simpleParallax.jsを触ってみる それではsimpleParallax.jsのインストール方法と使い方について話そう。 取得する 公式サイトからダウンロード https://simpleparallax.com/ npm (or yarn) でインストール CDNで読み込む jsDelivr 初期化する HTML JavaScript 以上だ。これでパララックス効果が付与される。画像を梱包するHTML要素はいらない。simpleParallax.jsが梱包div要素を生成してくれるからだ。 設定する name type default hint orientation string up up – right – down – left – up left – up right – down left – left…

SPAに代表されるReactには、create-react-appなるスターターキットが用意されている。これはReact開発環境を構築してくれるものだ。即座に開発を始められるようセットアップされいるため、プロジェクトの導入時に利用するケースも少なくない。 これと同様にelmにも、create-elm-appが存在する。elmを触れてみたいと思っていてもなかなか実現しなかった場合にも役立つものだと思う。 このエントリーでは、create-elm-appを紹介したい。 create-elm-appとは elm新規プロジェクトのスターターキット。ワンコマンドで、ローカル開発環境を構築してくれる。 特徴 コマンド一発で環境構築 ホットリロードしてくれる Boilerplateとして活用 create-elm-appを触ってみる create-elm-appのインストール create-elm-appインストールには、Node.jsのバージョン8以上が必要だ。未インストールやバージョンが低い場合は、事前に対応してもらいたい。 プロジェクトを作成する 無事インストールは済んだだろうか。問題なければ、早速プロジェクトを作成してみたい。プロジェクトを作成したいディレクトリに移動して以下コマンドを実行する。＜project-directory＞に、任意のフォルダ名を記述することで、当該フォルダが生成される。 果たして、elm環境のセットアップが確認できる。環境の構造は以下のとおりだ。 .├── .gitignore├── README.md├── elm.json├── elm-stuff│   └── 0.19.0│       ├── Main.elmi│       ├── Main.elmo│       └── summary.dat├── tests│   └── Tests.elm├── public│   ├── favicon.ico│   ├── index.html│   ├── logo.svg│   └── manifest.json└──…

Webアプリで入力を受け付けるコンテンツにtextareaタグがある。これは複数行テキスト入力が可能なコンテンツだ。メールフォームなどのフリーテキストの入力を求める場合に設置することが多く、お問い合わせページやアンケートページなどに入力した覚えがあるのではないだろうか。 このtextarea要素は、複数行入力できるとはいってもプレーンテキストであって、文字入力だけ許されている。機種依存ではあるが、絵文字を表現する程度だろうか。 もし太字や文字サイズをカスタマイズするような要件には向かない。というかtextareaで、これらカスタマイズはできない。文字通りテキストエリアなのである。 それに対して「WYSIWYGエディタ」ならば、太字や文字サイズ、見出し、リストなど表現できるものだ。管理WEB案件ではWYSIWYGエディタを求められるケースも少なくない。 このエントリーでは、WYSIWYGエディタフレームワーク「Editor.js」の紹介をしようと思う。 WYSIWYGエディタとは WYSIWYGエディタ（ウィジウィグエディタ）とは、ディスプレイ画面上で表現した内容そのままを出力するエディタのことで、太字や文字サイズ、画像挿入などをサポートしてくれる。直感的に操作ができることからリッチテキストエディタとも呼ばれ、CMSやブログの管理画面には無くてはならないパーツのひとつである。 Editor.jsについて Editor.jsは、リッチテキストエディタを実装するためのフレームワークで、ブロックスタイルを採用している。ブロックスタイルというのは、かつての単一入力エリアと異なり、入力エリア内でさらに個別のブロックで構成されていて、それぞれ見出し、段落、リスト、画像を担う。これらブロックは、プラグイン定義することで拡張できるように設計されている。 https://editorjs.io/ 特徴 JSONデータ出力 他ライブラリに依存しない 独自ブロックスタイルを作れる オープンソース インストール npm CDN https://www.jsdelivr.com/package/npm/@editorjs/editorjs 設定 Editor.jsの初期化は、いたって簡単でマウント用のHTML空要素とモジュールパッケージをインポートすればよい。以下のとおりだ。 HTML JavaScript プラグイン設定 Editor.jsのブロックで、それぞれプラグイン定義することで拡張できるように設計されているということだった。必要な機能はプラグインで追加していく仕様となっている。 ちなみに段落ブロックはすでに組み込み済みで、プラグイン設定は不要だ。上記のとおり初期化するだけで段落ブロックは機能する。 見出し リンク HTMLブロック 画像 画像（バックエンド要件なし） チェックリスト リスト 埋め込み 引用 以下は、見出しとリストのプラグインを追加した例だ。headerとlistプラグインのimportに際して、事前にインストールしなければならない。インストール方法は、上記リンクのREADME.mdから確認してほしい。 サンプル まとめ Editor.jsのよいところは、特定のライブラリに依存しないところだろう。jQueryやReact、Angular、Vueのいずれとも併用することができる。そして出力データは、JSON形式に生成される。HTML形式で出力されるものと違って、オブジェクトデータの扱いやすさはご存知のとおりだと思う。この違いは大きい。管理Webサイトにリッチテキストエディタの実装を求められた場合、「Editor.js」は、よい選択になり得るかもしれない。 ブロックスタイルのリッチテキストエディタで対抗馬になるのは、Wordpress管理画面に実装されている「Gutenberg」あたりだろうか。Gutenbergのパッケージモジュールがあるようだが、残念ながら使ったことが無いから、その詳細はお伝えすることができない。もし知見を得る機会があれば、比較記事を書こうと思う。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

Webサイトをコーディングするとき、いかにレイアウトを範囲認識するかで、コーディングの出来栄えが左右する。コンポーネントとする範囲が広大だと、上階層CSSセレクタに依存してしまい使い回せず、再利用性に欠けたものになってしまうためだ。 もちろん一意的なレイアウトならば、それで構わないのだが、CSS設計が謳われる昨今では、コンポーネント単位で捉え、ほかを汚染しない再利用を考慮した作りが是とされている。 このエントリーでは、会津ラボサイトを使ってレイアウトの捉え方を説明していく。参考となれば良いのだが、あくまで一例であることは理解いただきたい。 範囲を考える まずデザインを見て、再利用可能な範囲を考えよう。考える作業は、意識内で行ってもよいが、紙にプリントして色ペンで囲うとわかりやすい。視覚的に認識することでコーディング高速化に寄与することだろう。とても、おすすめだ。 会津ラボサイトをコンポーネント単位で見た図である。枠線で囲ったところが、再利用可能な範囲というわけだ。枠線の単位でCSSセレクタ名を与えれば、ほかを汚染することもなくなる。 緑線、赤線の関係は、緑線のコンポーネントに赤線のコンポーネントが入り子構造になっていることを示しているが、CSSセレクタまで入り子構造にするわけではなく、それぞれ独立した再利用可能な状態を保たなければならない。 HTML構造を考える 再利用可能な範囲が理解できたところで、それに沿ったHTML構造を考えよう。 枠線は再利用可能な範囲だった。いかなる箇所に配置しても利用できるHTML構造でなければならない。そのことを念頭にHTMLを組み立てるわけだが、前工程を紙に起こしているのであれば一目瞭然だと思う。 それでは会津ラボサイトのコンテンツを構成するソースコードをご覧いただこう。下記①〜⑨は、単独で成り立つもので、⑩〜⑫は、①〜⑨のコンテンツを内包することで成り立つものとなっている。 ① 会津ラボが掲げるスローガンを構成していて、h1タグを使っているのがポイントだ。 ② グローバルメニューを構成している。 ③ ユーティリティメニューを構成している。 ④ ヒーローエリアを構成している。 ⑤ カード型コンテンツを構成している。 ⑥ 見出しエリアを構成している。 ⑦ 最新情報などのアーカイブコンテンツを構成している。 ⑧ バナーコンテンツを構成している。 ⑨ フッターコンテンツを構成している。 ⑩ ヘッダーコンテンツを構成しているわけだが、そのなかに①②③を内包している。 上述からの変更点は、①②③のトップレベル要素にheader-xxxの要領でclassを付与したことだ。①②③のコンポーネントは、再利用性を担保するため位置に関わることは記述していない。配置された先で余白や幅の指定が邪魔になるからだ。もし余白や幅の指定が不要ならば、class付与しなければよい。 このケースだと、headerコンポーネント内の余白調整は、headerコンポーネントに任せることとなり、それぞれheader-xxxが追記されたというわけだ。 ⑪ カード型コンテンツを並べたエリアを構成していて、⑤を内包している。 ⑤も同様に余白や幅のスタイルは持たず、gridコンポーネントの中で良しなにしてもらう魂胆だ。ところが新たにclass付与はしていない。 もしもfeatureコンポーネントをgridコンポーネントの小要素として余白を与えてしまうと、境界ボーダー1px分だけ片一方のコンテンツ幅が短くなってしまう。そんな理由からgridコンポーネント直下の配置は避けて、横並びした要素に内包するようにしたわけだ。 ⑫ ここは新着情報エリアを構成していて、⑥⑦を内包している。⑥⑦にあたっては、配置先で余白や幅の必要がないため、article-xxxのようなclassは付与していない。 まとめ デザインのレイアウトから再利用可能な範囲を認識して、それをHTML構造にする一連の工程を説明してきた。これは私自身いまでも難しく思うし、やり甲斐を感じる工程である。以前、電車通勤していたころ、中吊り広告を見て範囲を考えるなんてことをしていた。メモ帳に書いてみたりもした。もし暇なときは挑戦してみてはどうだろう。レイアウト認識を習慣付けておけば、仕事でも役立つはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。