会津ラボ

ごく稀に画像の特定エリアにリンク領域を設定しなければならない要件に遭遇する。いわゆるイメージマップのことで、単純な領域ならばデザインソフトで調べることもできるが、多角形ともなると一つひとつ座標を求めなければならず、とてもじゃないがやってられない。 そんなときに役立つのがWebツールだ。このエントリーでは、イメージマップを生成するWebツールを紹介したい。 イメージマップするWebツール HTML Imagemap Generatorは、イメージマップ生成ツールだ。任意の画像ファイルを基準に矩形、円形、多角形を描画する機能を備えている。それら操作に応じてHTMLが編成され、画面に表示される。ユーザーはそれをコピペすれば済む。非常にインタラクティブに優れたWebツールとなっている。 HTML Imagemap Generatorhttp://labs.d-s-b.jp/ImagemapGenerator/ 前述の「HTML Imagemap Generator」とは別のイメージマップ生成ツールも紹介しよう。このImage Map Generatorも同様に、任意の画像ファイルを基準に矩形、円形、多角形を描画する機能を備えている。相違するところは、href属性値とtitle属性値を設定できる程度だ。 Image Map Generatorhttps://imagemap.org/ まとめ イメージマップを生成するWebツールの紹介だった。 その昔、イメージマップの生成は、Adobe Dreamweaverを用いたことがあった。Adobe Dreamweaverでコーディングすることがクールに感じられていたころの話だ。しかし、いまどきAdobe Dreamweaverを使ってコーディングするエンジニアは少ないだろう。リンク領域を求めるためだけにインストールしておく必要が感じられない。たとえそれを許容したところでイメージマップは、忘れたころにやってくるのだから操作が簡単なもののほうが良さそうだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

UIフレームワークの「Material-UI」は、Material Designを踏襲したReactコンポーネントであるが、Webアプリ全般における「Bootstrap」の知名度や実績には遠く及ばない。github stars数からも認識できることだが、Reactアプリ開発ともなると状況は一変して、やはり「Material-UI」が使われるケースのほうが多いように思う。 とはいえReactアプリ開発にも「Bootstrap」を導入したいケースがあるかもしれない。たとえば既存アプリと整合性を保つためだったり使い慣れていたりで、依然として需要があることだろう。 このエントリーでは、Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」を紹介したい。 react-bootstrap について react-bootstrapは、言わずと知れたフロントエンドフレームワーク界の雄「Bootstrap」をReactコンポーネントとして再構築したUIフレームワークだ。Reactコンポーネント構築に際して、jQueryを廃すことで純粋なUIフレームワークに昇華している。 特徴 プレーンBootstrapのスタイルシートに完全依存 jQueryなど不要な依存関係を廃している Reactコンポーネント化されている react-bootstrap に触る さっそくreact-bootstrapに触れていこう。 インストール まずモジュールパッケージをインストールする。インストールするものは次の２つ。 react-bootstrap bootstrap CSSを設置 import 前述したとおりプレーンBootstrapのスタイルシートに完全依存したものであるためreact-bootstrapはCSSファイルを含まず、プレーンBootstrapのCSSファイルをimportすることでスタイルを適用する。 このCSSファイルは、Bootstrap全般のスタイルシートを含むため、index.jsやApp.jsなどのルートコンポーネントに読み込ませるとよいだろう。 CDN もし上述のCSS importをしたくないならば、CDNからCSSを読み込む手段がある。これの利点としては、ユーザーが別サイトで当該CDNサービス経由でCSSを読み込んでいた場合に限り、ロード時間が短縮されてユーザビリティに寄与します。 コンポーネントを設置 パッケージモジュールから各種エクスポートコンポーネントをインポートする。対象コンポーネントのディレクトリまで明示する方法と分割代入でインポートする方法がある。およそのケースで分割代入が便利だろうと思う。以下はボタンコンポーネントをインポートしている。 デモンストレーション まとめ Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」の紹介だった。 プレーンBootstrapを使うときとの相違点として、JSX形式で記述することが挙げられる。本来ならば対象タグにclassを付与することでUIを形成していたが、react-bootstrapはコンポーネントとして読み込み、コンポーネント名のタグを設置する。非常に明快な仕様だと感じた。スタイルテーマにおいても属性(props)で操作が可能だ。Reactアプリ開発でUIフレームワークの導入を求められたならば、検討してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

Webアプリにおいてフォーム機能は不可欠で、もっとも身近なものにログインフォームやお問い合わせフォームなどがある。これらはユーザインタフェースに該当するもので、Webアプリとユーザー間で情報のやり取りするために用いられるツールだ。 実装の側面では、複数の要件が組み合わさリ形成される。たとえば、フォームに関わる状態管理、バリデーションチェック、エラーメッセージの描画、フォーム操作に関わるハンドラーなどだ。これらを複合的に機能させるのだから小難しい実装であるのは間違いない。 このエントリーでは、Reactアプリのフォーム実装を楽にするライブラリ「Formik」を紹介したい。 Formik について Formikは、Reactアプリのフォーム実装を協力にサポートするライブラリだ。 Formikと対比されるライブラリにRedux-Formがある。Redux-FormはRedux Storeによる状態管理が主で、Reduxのセットアップが求められる反面、Formikならばローカル状態管理で済む。ローカルの一時的な状態ということで、パフォーマンスが良くスケーラブルなところが好まれてフォーム実装で覇権をふるっている。 【Formik】https://jaredpalmer.com/formik/ https://github.com/jaredpalmer/formik 特徴 フォームに関わる状態管理 バリデーションチェック エラーメッセージの描画 フォーム操作に関わるイベントハンドラー React Nativeに対応 Formik を使う それではFormikのインストールとデモンストレーションをご覧いただこう。 インストール インストールは下記コマンドで行う。例のごとく２パターンあるから都合のよい方を実行する。 デモンストレーション 下記ソースコードは、メールアドレス入力フィールドと送信ボタンがあるだけの、もっとも単純なフォーム構成のデモンストレーションだ。 まとめ Reactアプリのフォーム実装を楽にするライブラリ「Formik」の紹介だった。 デモンストレーションではスタイルを適用していない。スタイルを適用する場合は、対象タグにclass属性を付与するなりインラインスタイルを当てるなりしなければならない。たとえば<Field class=”input-email” />という具合だ。もしくは「formik-material-ui」なるラッパーもあるようで、これならばMaterial UIが適用される模様だ。管理画面などで適度な見栄えを求められたならば導入を検討しても良さそうだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

道具や工具は、なにかの作業をするとき補助的役割をしてくれる。たとえばハンマーであれば、釘を打ったり打ち砕いたりの作業に欠かせない。ノコギリであれば、木材を切断するために活躍する。これらをITの用語ではユーティリティやソフトウェアなどと呼ばれることもあり、Web上で利用できるものをWebツールやWebサービスと呼ぶ。 道具や工具と同様に、欠かせないWebツールは各種ジャンルにあるもので、作業がはかどった経験があるのではないだろうか。 このエントリーでは、サイトコーディングに役立つWebツールをいくつか紹介したい。 Diffchecker https://www.diffchecker.com/ Diffcheckerは、差分をチェックしてくれる。納品後の修正依頼でクライアントによる修正がどの程度及んでいるか確認するために利用することが多い。瑕疵か追加対応かの判断に役立つ。 Postwoman https://postwoman.io/ Postwomanは、APIクライアントだ。公開されているWebAPIやサーバーサイドでこしらえたAPIリクエストを試すことができる。アプリケーションのPostmanのようなものだ。返り値の構造を確認したいときに役立つ。 アスペクト比計算ツール https://aspect.arc-one.jp/ 縦横比を計算してくれる。レスポンシブデザインをコーディングする場合において、youtubeやGoogle mapの埋め込みに用いられるiframeや2Dグラフィック描画に用いるcanvasで縦横比を保持させるためのパーセント値を算出するときに役立つ。 HTML5 子要素・親要素対応 https://yoshikawaweb.com/element/ HTML5 子要素・親要素対応は、HTMLの梱包および内包が許される関係を視覚化したツールだ。記憶してしまえばそれまでの情報なのだが、HTMLタグの親子関係を説明するときに役立つ。 PXtoEM.com http://pxtoem.com/ PXtoEM.comは、CSSのfont-sizeプロパティ単位「em」を算出してくれるツールだ。まずベースのフォントサイズをセットして、ターゲットpx相当のem値を知ることができる。CSSのcalc()関数やSassで計算できる環境ならば不要なのだが、改修案件で既存のソースコードに手を加えるときに役立つ。 Polyfill.io https://cdn.polyfill.io/v3/ Polyfill.ioは、JavaScriptのモダンな機能が未実装なブラウザで、擬似的に動作するスクリプトをセレクトして結合できるツールだ。古いブラウザ対応を含む案件かつbabel等のトランスパイルする環境にいないときに役立つ。 HTML Arrows https://www.toptal.com/designers/htmlarrows/ HTML Arrowsは、HTMLの特殊文字リファレンスだ。HTMLエンティティやCSSコードを一覧できる。HTML特殊文字に関しては、このサイトより充実したところも存在するが、Unicode、HEX code、HTML code、HTML entity、CSS codeを一覧できるのは、あまり知らない。なかでもCSS codeの一覧は役立つ。 Flexbox Playground https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ Flexbox Playgroundは、CSSのFlexboxプロパティ値を操作して体感するデモツールだ。サイト名のとおり遊び場だ。たくさん操作すればFlexboxの特性を理解できると思う。Flexboxの理解に役立つ。 まとめ サイトコーディングに役立つWebツールの紹介だった。 ここで紹介したツール以外にも、きっとたくさんの有用なWebツールが存在するだろうし、わたしの知らないツールをあなたが知っていて日常的に使用しているケースも往々にあるだろう。その逆にわたしが日常的に使用していて、あなたが知らないケースもある。だからこのたび共有することにした次第だ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

わたしはつい今までyeomanのジェネレーターを用いて静的サイトコーディングに取り組んでいた。yeomanは、cliによる操作ひとつでHTML5 Boilerplateをはじめ、Sass、Bootstrap、Modernizrなどトレンドに富んだ導入環境を構築してくれる。そして環境自体はタスクランナーのGulpであるから作業の自動化が特徴だ。 しかしwebpackが台頭したことでGulpによる環境構築するシーンは圧倒的に激減した。SPAライブラリに代表されるReactやVue、Angularもこぞってwebpackである。まずwebpackはバンドラーと呼ばれるもので、ファイルをガッチャンコしてくれる。そしてGulpはタスクランナーと呼ばれるもので前述したとおり作業自動化してくれる。したがってそもそも役割が違うわけだけれども、webpackは作業自動化も担っていて、Gulpを使うメリットが減ってしまったのだろう。 そんなこんなでwebpackの環境構築は常々検討していたのだけれど、自作のwebpack環境はトレンドやバージョンを考えると気が引けてしまい、それに至ることはなかった。やはりyeomanのようにcliで操作できる容易さがほしかったわけで、webpack製のものを探してはいたのだけれど巡り合うことがなかった。 そしてこのたびyeomanに取って代わるツールを発見したかもしれない。 このエントリーでは、webpack製の静的Webサイトジェネレーター「Spike」を紹介したい。 Spikeについて Spikeは、静的Webサイトジェネレーターだ。yeomanを使ったことがあるならば、そのようなものと捉えてもらうとよいだろう。 【Spike】https://spike.js.org/ 特徴 JavaScriptバンドラーにwebpack HTMLパーサーにReshape CSSパーサーにPostCSS JavaScriptトランスパイルにBabel Spikeに触ってみる それでは、Spikeのインストールと使い方について解説しよう。 インストール Spikeをグローバルにインストールする。Macユーザーは先頭にsudoで試してほしい。 さてインストールが成功したか下記コマンドで確認しよう。 $ spike -v バージョン値が表示されればOKだ。 プロジェクト初期化 Spike環境をジェネレートしてみよう。任意のフォルダで下記コマンドを実行する。 上記コマンド末尾の「my-project」は任意だ。プロジェクト名を適用するとよいだろう。 つづいて、ウィザード形式で進めていく。下記内容が問われる。 果たして、プロジェクト雛形をジェネレートできたならば、つづいてプロジェクトに関わるnodeモジュールをインストールする。cdコマンドでプロジェクトディレクトリに移動したのち、npm installかyarnを実行しよう。 開発開始 開発をスタートさせるときは、下記コマンドを実行する。 するとローカルサーバーが起動して、ブラウザタブにhttp://localhost:1111が開く。 まとめ webpack製の静的Webサイトジェネレーター「Spike」の紹介だった。 まだyeoman使っていたのか、という感想は受け止めなければならない。かなり希少種であることは自覚しているのだけれど、静的コンテンツをコーディングする程度なら、まずまずの使い勝手を誇るのがyeomanだった。 もしわたし以外にもyeomanを使っていて、webpackに乗り換えたい意欲があるならば、よい機会なのではないだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。