ファイルアップロードUI設計のややこしさときたら…。<input type=”file” />で済むのなら、なんと明快なことか。そういう覚えはないだろうか。 <input type=”file” />だけであってもボタンとファイル名のスタイルを制御しなければならない。ブラウザそれぞれのUIも考慮しなければならない。そのうえユーザビリティの配慮からドラッグ＆ドロップ機構が求められた場合、さらにややこしい。やれないことはないけど実装時間がかさむ。 これらネガティブな感情を払拭して余りある素晴らしいReactコンポーネントがある。 このエントリーでは、ドラッグ&ドロップのファイルアップロード実装を簡単にする「react-dropzone」を紹介したい。 react-dropzone について react-dropzoneは、ドラッグ＆ドロップでファイルアップロードUIを簡単に実装するためのReactコンポーネントだ。さらにReactアプリ開発のトレンドともいえるReact hooksに対応した作りをしている。ダウンロード数は、317,004（2020/1/6現在）と同種のものと比べると大きくリードしている。いわばファイルアップロードReactコンポーネントの決定版と言って差し支えないだろう。 https://react-dropzone.js.org/ 特徴 HTML5に準拠 React hooksに対応 スタイル適用が最小限 自由にスタイル適用が可能 react-dropzone に触る それではreact-dropzoneの導入から確認していこう。 インストール まずはパッケージをインストールする。package.json同階層で以下コマンドを実行してほしい。インストールするパッケージは「react-dropzone」のみでよい。 インポート インポート方法は2パターン用意されている。まずは、React hooksを使う場合。React hooksを使うわけだからReactのバージョンは16.8以上である必要がある。 もう一方は、ラッパーコンポーネントを使う場合。上記のReact hooksを使えない場合などの代替案と捉えるか、Class componentにしている場合は、いたし方なくラッパーコンポーネントをインポートしよう。 デモンストレーション 下記ソースコードは公式にもある、もっともシンプルなドラッグ＆ドロップファイルアップロード実装で、ファイルをエリアにドロップするとファイル名が表示されるというものだ。 まとめ ドラッグ&ドロップのファイルアップロード実装を簡単にする「react-dropzone」の紹介だった。 実装して気がつくことがある。それはスタイル適用する要素が思いのほか多く残されていること。これは悪い意味ではなくて好感が持てる箇所だと感じた。なぜなら、打ち消しのスタイルを記述することがなく、ソースコードに素直さを保てたからだ。対象要素にclassNameを与えることはできるが、これは決してreact-dropzoneが割り振るclassNameをオーバーライドするためのものではない。上書きする記述が混在しないシンプルなソースコードを保てて良い。ファイルアップロード要件がある場合は「react-dropzone」を検討してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

マークアップエンジニアにおいてエディタは、もっとも身近なツールのひとつで、あなたもきっと日頃使い慣れたエディタでコーディングをしていることだろう。わたしはAtom editorが主ツールでいかなるシーンにおいても活用しているが、それと同時に不便さも覚える。 あなたは不便を感じたとき、どうするだろうか？我慢してそのまま使い続ける？拡張機能で解消する？別のエディタを検討する？ わたし自身は、しばらくAtomを使い続けて、なかなか手放すことができなかったのだけれど、いよいよ不満に耐えかねてVSCodeへ乗り換えを実施した。その手順を記しておきたい。 なぜVSCodeか？ 単純にトレンドだから。安直ではあるが、Atomを使った理由もフロントエンド界隈でトレンドだったから乗り換えたと記憶している。 VSCodeを選択した理由は上述のとおりだが、乗り換えに踏み切った要因は、不便さを覚えた作業をVSCodeで試したところスムーズに動作したことが挙げられる。プロジェクトフォルダを多数表示させなければならないとき、フリーズしたり落ちたりするケースが頻発した。ところがVSCodeだと平然と動作し続けるではないか。これにはとても心を動かされた。 冒頭にも述べたとおり、日頃使い慣れたエディタでコーディングしているわけで、ツールの不良は作業者のストレスとなって、果ては仕事のクオリティに影響するかもしれない。 そう思ったら居ても立ってもいられず乗り換えに踏み切った。そういう次第だ。 設定したこと エディタの乗り換えにおいて重要なのが「操作感」。乗り換えた直後も大体同じように作業できるか否かが重要だ。Atom editorは長年使い続けたことで、いくつかの拡張機能やショートカットキーなど身体が覚えている操作というものなど一緒にしておきたい。それを踏まえて以下のようにした。 「ようこそページ」をOFF 初期インストールしたときには必ず表示されるスクリーンで、ヘルプや設定等へのリンクが示されているが大体不要だろう。「起動時にウェルカムページを表示」のチェックを外すことで今後表示しないようにする。 「Trim Final Newlines」をON 最後の行以降の空白行を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Final Newlines」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。」にチェックを付ける。 「Trim Trailing Whitespace」をON 行末尾の半角を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Trailing Whitespace」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に末尾の空白をトリミングします。」にチェックを付ける。 タブサイズを変える 1つのタブに相当する半角スペース数を変更したい。デフォルトでは1回のタブキー入力で、4つ半角スペースが挿入される。これを2つ半角スペースにする。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Tab Size」を入力することで対象のものが見つかる。「4 → 2」にする。 フォントサイズを変える フォントサイズを変更したい。デフォルト値は12pxだ。これを13pxにする。ツールバーの「Code – 基本設定 – 設定」からVSCodeの定画面を開く。スクリーン上部の検索フィールドに「Font Size」を入力することで対象のものが見つかる。「12 → 13」にする。 空白文字を表示する 空白を視覚化したい。ドットになるあれだ。ツールバーの「Code –…

ごく稀に画像の特定エリアにリンク領域を設定しなければならない要件に遭遇する。いわゆるイメージマップのことで、単純な領域ならばデザインソフトで調べることもできるが、多角形ともなると一つひとつ座標を求めなければならず、とてもじゃないがやってられない。 そんなときに役立つのが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に乗り換えたい意欲があるならば、よい機会なのではないだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

国際宇宙ステーションは地上400km上空を飛行する有人施設であることは周知のことだが、秒速約7.7km（時速約27,700km）ものスピードで飛行を続けていて、地球1周を約90分で周りきるとのことだ。驚異のスピードで想像もつかない。 では国際宇宙ステーションが、たったいまどこを飛行しているのか？ それはNASAのサイトで見ることができる。「Live Space Station Tracking Map」は、リアルタイムに現在位置が反映され、およその飛行箇所を確認できるコンテンツだが、自身でもこれに類似したコンテンツを作成することができる。 このエントリーでは、国際宇宙ステーションの飛行位置を得ることができるAPI「ISS Location Now」を紹介したい。 使い方 ISS Location Now APIの使い方はいたって簡単。APIのエンドポイントにGETでリクエストするだけで、json形式の値が返ってくる。APIリクエストにおけるAPI key等のセットは不要だ。 URL http://api.open-notify.org/iss-now.json Request Response デモンストレーション それではAPIの座標データを利用して地図上にピン(アイコン)を表示してみよう。以下ソースコードを確認してほしい。 まず<head>内に必要なアセットを読み込む。 用意したものは、地図ライブラリの「leafletjs」とHTTPクライアントの「axios」だ。サンプルではCDNのものを読み込んでいるが、プロジェクト都合に合わせてローカルに配置してもよいだろう。 つづいて<body>内に地図を描画するHTMLタグを配置する。 Google maps apiを利用したことがあるならば、月並みな記述だと思う。<div>にidを付与して後のスクリプトで参照できるようにしている。サンプルではインラインスタイルによるサイズ固定にしているが、レスポンシブに対応させてもよさそうだ。 最後にISS Location Now APIをリクエストして地図に描画するスクリプトを記述する。 このスクリプトは、5秒毎に緯度経度を取得して、その都度、地図座標を更新する処理をしている。 まとめ 国際宇宙ステーションの飛行位置を得ることができるAPI「ISS Location Now」の紹介だった。 サンプルソースコードでは、OpenStreetMapの地図が描画されるが、Googleマップでも同様のことができる。もし余力があればチャレンジしてみてはいかがだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

サイト制作で縦長デザインを採用するとき、動線の確保を配慮しなければならない。スクロールすることで現在地を見失い、迷子になることが考えられる。いまどこにいて何を閲覧しているか分からなくなるというものだ。 そのような対策のひとつに、ヘッダーをウインドウ上部に固定配置して、いかなるスクロール位置にいてもメニューにアクセスできるようする、というものがある。このメニューをアンカーリンクにすることでユーザビリティに配慮したサイトを見たことがあるかもしれない。たとえば、ブログなど文章系コンテンツにしても目次を設けて対象セクションに遷移するものもある。 このように縦長サイトにおいて、追従ヘッダーとアンカーリンクは比較的セットで実装されることがあるわけだが、ヘッダーが固定されていることでアンカーリンクの遷移先が隠れてしまう問題に遭遇する。 このエントリーでは、アンカーリンク遷移先に追従ヘッダーが重ならないようにするCSSを紹介したい。 問題 解決 See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. 追従ヘッダーのメニューがアンカーリンクになっている。アンカーリンクは各種見出しがターゲットで、クリックするとページ内遷移する。 見出しに追従ヘッダーが重なることなく表示されればOKだ。 ここで注目すべきは、CSSのscroll-padding-topプロパティだ。scroll-padding-topプロパティは、スクロールポート上部にオフセット値を付与できる。スクロールポートとは、スクロールバーが発生している領域だと認識してもらえば差し支えない。 サンプルソースコードではscroll-padding-top: 60px;として、追従ヘッダーの高さをオフセットするようにしている。 まとめ アンカーリンク遷移先に追従ヘッダーが重ならないようにするCSSの紹介だった。 元来、アンカーリンク遷移先の要素に上余白を与えて擬似的にオフセットを作っていたことを考えると違和感なく理解できるものだと思う。ただしIE,Edgeに関しては、部分的なサポートに留まっている。要件によっては、しっかりサポート状況を確認してもらいたい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。