-
マークアップエンジニア歴10年の私が、もっとも感嘆したソースコード
他人のソースコードから得られる知識は、想像以上に多くて眺めているだけでも大変勉強になる。 私はマークアップエンジニアということもあり、Webサイトのソースコードを閲覧する習慣がある。Webサイト訪問ついでにソースコードを覗く訳だ。ユニークな記述があれば、悪怯れることもなく我がものとしてしまう。なんと傍若無人なことか。 ほかにもオンラインエディタやgithubなども守備範囲である。他者のソースコードを容易に閲覧・学習することができることは有り難い限りだ。 さて、そんななか他者のソースコードに感嘆の声をもらしたことはないだろうか? 私には、思い及ばないアプローチのコーディングに関心してしまった経験がある。思わず隣席のエンジニアに自慢してしまうほどだった。 その内容をご覧にいれようと思うが、マークアップエンジニアでなければ興味をもてないかもしれない。そこはご容赦いただきたい。 ソースコード HTML CSS 説明 このソースコードのどこに感嘆したのかはflexboxの折り返した状態と同様のことが再現できていたことだ。各.boxは、内包するテキストの分量が違うため、高さが異なる。無思慮にfloatで横並びさせると高さの異なる.boxに引っかかり、まともに左端へ折り返すことができない。ところが、上述のスタイルだと、不測のこともなく左端へ折り返してくれる。 この件について、「flexboxでいいじゃん」と思ったのならば、それはもっともな意見だ。flex-wrapならば、引っかかることなく左端へ折り返すだろう。そのとおりである。 しかし上述ソースコードを認めたのがIE8などが要件に含まれるような時代のことで、flexboxなど使えるものではなかった。 そして当時このようなレイアウトは、jQueryプラグインで高さを揃える対策がとられていた。heightLine.jsやfixHeight.jsと聞いてピンと来るなら同じ時代を過ごした戦友なのだと思う。ただJavaScriptによる対策だと、読み込みまでのタイムラグがあるため、わずかなチラつきが生じる。私はこれが気に食わなかった。 そんななかの上述ソースコードだったから、感嘆したのも頷ける。 まとめ 私の思い出話になってしまったわけだが、数年たったいまでも記憶しているほどの内容だったということだ。確かにHTMLにもCSSにもJavaScriptにも関心したものはあったはずだが、すでに我が身に消化して記憶すらしていない。 自身のソースコードも他者に閲覧されていることを自覚して、世に発信しなければと考えるようになったのも、この頃からだったと思う。 私も、他者に影響や知覚させれるほどのものをコーディングしていきたいと改めて思い直すとして、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
【Electron】PC内のローカルフォルダの画像を表示する
Electronデスクトップアプリ内に表示される画像は、レンダラープロセスに関連付いたHTML&CSSやJavaScriptから参照できるフォルダに配置するのが一般的である。しかしPC内のローカルフォルダを参照しなければならない場合どうすればよいだろうか。 このエントリーは、上記要件に遭遇した際の対応を記したものだ。 フォルダ構成 mainフォルダにメインプロセスの起点となるindex.jsを配置 rendererフォルダにレンダラープロセスの起点となるindex.htmlを配置 プロジェクトフォルダ内の画像を表示 rendererフォルダの「aizulab_logo.png」を読み込む PC内ローカルフォルダの画像を表示 Documentsフォルダの「aizulab_logo.png」を読み込む 例外 webpack-dev-serverの簡易Webサーバーを必要とするケースも考えられる。たとえばSSR開発をサポートするNext.jsやNuxt.jsは、そもそも起点とするHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちで、ページが生成されるためである。したがって、Electronの開発時には簡易Webサーバーを参照するようにして、ビルド時にはエクスポートした静的ファイルを参照させる。 開発時に簡易Webサーバーを設ける必要がある場合、PC内ローカルフォルダ参照がルートパスであるため簡易Webサーバーのルートを指し示してしまう。それでは、該当する画像を表示させることができない。 これに対処するには、 のように「file://」プロトコルを使ってほしい。これはWindowsの場合でも同様である。ところが、Windowsだと背景画像にすることができなかった。 背景画像にしたかった理由は、縦横比は保持して拡大縮小させたかった。つまりbackground-size:cover;を適用するつもりだったのだ。 これをimgタグで実現させなければならない。この対処には、 で、縦横比を保持して拡大縮小させることができる。 もしこれらの事象に見舞われたら試してほしい。そしてこのエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
スライダー&カルーセルで左寄せとかできるvanilla JS製「Glide.js」の使い方
スライダー&カルーセルのデザインパターンに、「左寄せ右チラ見せ」がある。画面左にピッタリ寄せて、右がわずかに見えている形態のものだが、これの実装が思いのほか面倒くさい。 左右チラ見せするプラグインならばいくつか思いつくのだが、片一方というのがなかなか候補にあがらない。これまでは前者の左右チラ見せできるプラグインで、苦労しながらもカスタマイズして片寄せを実現させてきた。カスタマイズといってもCSSの打ち消しが関の山なのだが。 そんな苦労を解消してくれそうなプラグイン「Glide.js」を提案させてほしい。 Glide.jsとは Glide.jsは、スライダー&カルーセルライブラリだ。モジュール方式の実装により他のJavaScriptライブラリに依存しない。さらにvanilla JavaScriptおよびES6で記述された当該ライブラリは、極めて軽量で、高速に動作するとされている。 特徴 他ライブラリに依存しない モジュール読み込みができる vanilla JavaScriptで極めて軽量 MITライセンス インストール Glide.jsの導入は、3種類の方法がある。プロジェクトの都合でいずれかを選択するとよいだろう。 npm ダウンロード https://github.com/glidejs/glide CDN https://cdn.jsdelivr.net/npm/@glidejs/glide https://unpkg.com/@glidejs/glide 使い方 Glide.jsを使うには、JavaScriptとStylesheet、スライダーを構成するHTMLの記述が必要となる。あなたのコーディングルールに従い、対象ページに配置してもらえると有り難い。 なおnpmでインストールしたケースを想定している。ローカルに設置している場合は、ファイルパスを修正してほしい。 Stylesheet HTML JavaScript Glide.jsの必要最低限の記述は以上となる。果たして、スタンダードなスライダーを実装することができた。 「左寄せ右チラ見せ」にする そしてこのエントリー主題は「左寄せ右チラ見せ」だった。引き続き「左寄せ右チラ見せ」のカスタマイズをご覧いただこう。 左右の表示幅を制御するにはpeekプロパティを使用する。peekには、beforeとafterを与えることで、左右の見え幅を調整できる。上の例では、beforeに左側の見え幅を、afterに右側の見え幅を指定して、左寄せ右チラ見せを再現している。 まとめ Glide.jsには依存関係がない。すでに前述しているのだが、これがとても良い。jQueryプラグインのようにjQueryがなければ使えないものと違って、Glide.js単独でスライダーorカルーセルを実装できるのだ。 これは昨今のフロントエンド開発において、非常に重要な要素ではないだろうか。一貫して「jQueryプラグインで!」ってわけにもいかないことは理解してもらえると思う。Reactを使うケースもあれば、Vue.jsが向いているときもある。 それぞれの状況に応じてスライダー&カルーセルプラグインを選定しておくのも悪くないが、Glide.jsならば一貫性のあるソースコードが書けるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
Adobe XDのレイヤー名をリネームする。「Rename it」プラグインの使い方
コーディングにおいて、まず取り組むことといえば、画像の書き出し作業だろう。この作業がリズムよく実施できるか否かによって、その後の進捗に影響するといっても過言ではない。少なくとも私は、その認識をもって一気にクリアしたい工程である。 Adobe XDの場合、書き出したファイル名は、レイヤー名に関わる。レイヤー名がそのままファイル名になるということだ。レイヤー名が未変更状態だと、「長方形 xxx」だとか「線 xxx」などの名称が反映されている。 したがってファイル名は、命名規則に沿った名称に変えなければならない。書き出し作業を面倒に感じるのは、きっとこの名前を付けて保存する工程があるからに違いない。 レイヤー名が命名規則に沿ったものであれば、苦労はないが、そこはマークアップエンジニアの守備範囲であることが多い。コーディングの都合で、グループにしたいレイヤーや分割して書き出したい場合が考えられるためである。 それではどのタイミングでリネーム作業をすれば良いのか?いかに効率よく行えばよいかは、そのときの都合や好みによるため一概に何がよいとは言い難い。状況にあわせて書き出しウィザードで名前を付けて保存したり、XD内のレイヤー名を修正したりすればよい。だがそのどちらもシームレスに行えるものではないと感じてしまう。 そこでもうひとつの選択肢になり得る「Rename it」プラグインを紹介したい。 Rename it プラグインについて Rename itは、レイヤー名リネームをサポートしてくれる。アートボード内のオブジェクト操作に関連してリネームが行えるため意識を逸らすことがない。 特徴 レイヤー名を変更できる 命名パターンが用意されている(レイヤー名、連番、アルファベット、etc.) レイヤー名を置換できる 使い方 Rename itは、ダイアログ操作によりリネームを行うことになる。まずはプラグインをインストールしてもらいたい。 インストール Rename itをインストールするには、Adobe XDツールバー「プラグイン」>「プラグインを見つける…」をクリックするとプラグインウインドウが開く。 つづいて、ウインドウ内の入力フォームに「Rename it」を入力すれば、対象プラグインのみリストアップされるはずだ。インストールボタンをクリックして完了させよう。 リネームする場合 オブジェクトを選択 ショートカットキーを押下「⌃+⌥+R」 リネーム文字列を入力 Renameボタンをクリック アートボード上のリネーム対象オブジェクトを選択した後に、ショートカットキー「⌃+⌥+R」押下。するとリネームダイアログが表示される。 Name フィールドに文字を入力して、Renameボタンをクリック。以上でリネーム完了となる。果たして、レイヤー名が変わっていることを確認できる。 置換する場合 複数オブジェクトorアートボードを選択 ショートカットキーを押下「⌃+⌥+⌘+R」 Find&Replaceに文字列を入力 Renameボタンをクリック 複数のオブジェクトを選択するか、アートボードそのものをアクティブにすることで置換対象として認識される。選択が済めば、おもむろにショートカットキー「⌃+⌥+⌘+R」を押下して構わない。置換ダイアログが表示される。 Findに検索文字列、Replaceに置換文字列を入力する。それにより選択中のレイヤーから文字列がマッチしていれば、一括で置換が完了する。テキストエディタの文字列置換と変わらない感覚だろう。 まとめ 「Rename it」プラグインによるリネーム方法をお伝えしてきたが、作業フローに組み込むに足る内容だっただろうか。 Rename itでも、やはり完璧なシームレスとはいかないが、アートボード操作中にリネームを行える。僅かでもフローが連動していれば、効率UPにつながるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
React Hooksに対応した複数のonChangeハンドラを処理する書き方
Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。 まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。 そしてinput要素がひとつということも考えにくく、複数のinput要素から構成されることが予想される。たとえばログインフォームにしても、メールアドレスとパスワード、ログイン保持などが考えられるが、そのどれもstate変化によって成り立つ。 すなわちonChangeハンドラが必要となるが、それぞれでコールバック関数を定義していては効率が悪い。複数input要素があっても、ひとつのコールバック関数が処理できれば、もっとも効率がよいというものだろう。 コールバック関数の書き方 さて主題が、React Hooksを活用したコンポーネントにおける複数onChangeハンドラを処理する書き方だった。 React Hooksでstate管理するならば、おのずとFunctional Component設計になる。React Hooksは、旬なアーキテクチャであるが、Class componentで設計しなければならないケースもあることだろう。 したがってFunctional componentとClass componentの書き方を用意することにした。興味があれば目を通してみてほしい。 Class component Functional component まとめ Class component、Functional componentともに、大した差はないことが分かると思う。 イベントが発生したinput要素のname属性をstate名として、value属性をstate値として扱っている。果たして、stateを一元処理することになるわけである。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。 Reactアプリの多重クリックを防止する最適解とは?
-
Markdownエディタ「Typora」「boostnote」どっち使ったらいい?比較してみた
私はいま、Typoraかboostnoteかで悩んでいる。これらはMarkdownエディタあるが、より使い勝手のいいツールを求めてエディタ沼にハマってしまっているわけだ。 このところライティングするようになって、Markdownエディタの重要性を再認識している。Markdownエディタを使う理由は、なんといっても骨子を組み立てる段階で意味付けできることだろう。 マークアップエンジニアにとって慣用語の「セマンティックWeb」に似ていなくもない。アウトラインを構成し、コンテンツに意味をもたせ、書き手読み手に正しく理解してもらう思想は馴染み深く感じてしまう。 Markdownエディタに求めることは、効率がよく記述を続けられて、意識を妨げないことだろう。操作に意識が割かれてアイデアが遮られるようであってはならない。 これは記事に起こして比較してみようではないか。と考えた次第である。この主題に興味がもてるようならば、お付き合いいただき参考にしてもらえると有り難い。 Markdownエディタとは Markdownエディタとは、Markdown記法に対応したテキストエディタのことでプレビュー機能が備わっている。意味付けした要素にスタイルが適用されて確認できる機能だ。 テキストドキュメント作成に重宝することから、ビジネスパーソンに広く利用される。エンジニアにも、Markdown記法は浸透していてREADME.mdを作成するシーンには欠かせないツールになっている。 テキストドキュメントの用意に際して、エクスポート機能を備えたエディタもある。別ファイル形式で共有するニーズに応えたものだろう。アジェンダや議事録の共有に役立ちそうだ。 Typora vs boostnote Markdownエディタについて、理解を深めることができた。それではさっそくTyporaとboostnoteを比較してみよう。 トレンドで比較 どちらとも言えない接戦を観せている。平均値ではboostnoteに軍配が上がるが、今日現在ではわずかしか違わない。当エントリーに興味を寄せるあなたにおいても、この程度の点差では判断しかねることだろう。 そもそもモノゴトは、平均値で傾倒するわけではない。いずれかの特徴が基になっていつの間にか常用しているのではないだろうか。 チャートを注視してみるとそれぞれに特徴があることがわかる。 boostnoteは、比較的一定を保ち推移している。一方のTyporaは、ときどき活気を見せる。 検索結果ボリュームで比較 Typoraの関連ページがボリュームで勝っている。boostnoteより3.5倍超インデックスされていて関心の高さが窺える。 これはTyporaのローンチ時期が大きな要因だろうと思う。先行によるリードは侮れない。 しかしながらGoogleいわく、「検索結果ボリュームは正確な数値ではない」と明示している。あてにならない数字ということだ。 とはいえ漠然と関心を寄せた人が、boostnoteよりTyporaが多いことは確かなようだ。 UIで比較 双方ともにカラムレイアウトで、エディタとしては一般的なインターフェースをしている。boostnoteの左カラムは開閉式になっていて、閉じたときの雰囲気はTyporaと変わりないように見える。 いずれにしてもエクスペリエンスを感じることができる。UIが作り込まれているからこそ質の高いUXを提供できるのだろう。 ツールとのコミュニケーションが得やすいというのは、エクスペリエンスが高い所以である。なにができるのか、なにをしてくれるのか、これからなにが発生するのか、ツールと話せることが重要だ。 たとえば、話題が噛み合う人物とのやり取りを想像してみてほしい。モチベーションの高い人物とのコミュニケーションは、ワクワクさせてくれる。そこから得られるエクスペリエンスは少なくない。 このように質の高いツールとならば良い関係を築ける。Typoraとboostnoteにはその資質があるのではないだろうか。 機能で比較 これまでトレンド、検索結果ボリューム数、UIで比較してきた。とはいえもっとも気になるのが機能面だろう。 互いにポイントとなる事柄をリストアップしてみた。 Typora OS依存なし 常時シームレスプレビュー ソースコード/タイプライター/フォーカスモードがある エクセル&スプレッドシートの表組みをコピペできる スクリーンショット機能がある 複数テーマが用意されている コードブロックがシンタックスハイライトされる メニューバー項目が日本語 boostnote OS依存なし ライブ/シームレスプレビューの切替ができる 「Markdown note」と「Snippet Note」がある Snippet Noteにソースコードをメモ書きしておける Snippet Noteはインデントおよびタブサイズを設定できる コードブロックにコピーボタンがある コードブロックに色の対比があって判別しやすい 国産 UIにおいては、それほど違いを感じなかった両ツールだが、機能面ではちゃんと個性をアピールしているのがわかる。…
-
Adobe XDにGoogleマップを表示する。Maps generatorプラグインのススメ
Webサイト制作で地図コンテンツを配置することも、少なくない。というよりコーポレートサイトには欠かせない要素のひとつといえる。そしてそのほとんどがGoogleマップで、お客様におかれてもGoogleマップ以外の選択すら考えていないほど確実にである。 私は、モックアップ作成時に地図コンテンツ配置が要求された場合、往々にしてGoogleマップのキャプチャを用いるわけだが、この工程を煩わしく感じてしまう。ブラウザでGoogleマップを開き、該当プレイスを表示する。大きめにキャプチャして、対象オブジェクトにクリッピングマスクをかける。そして表示位置を調整する。面倒くさい。 工程を増やすことで研ぎ澄ましていく類のものと違い、制作の現場では可能な限り無駄を省かなければならない。とはいえもちろん省くなかにも、見極めが大切だと考えている。 たとえば、デザイン装飾のクオリティを上げる工程は重要なことであり、省いてはならない。その一方で、画像を書き出す作業は、省略できそうなものだ。 この違いには、なにがあるのだろうか? 私の理解では「ゴールが見えていて、そこまでの過程が面倒だと感じるか否か」であるが、あなたなりの理解でこのエントリーを読み進めていただけると幸いだ。 さてGoogleマップをアートボード上に表示する作業は、間違いなく省きたい作業に該当する。あなたがAdobe XDで作業しているならば、この工程を省略できるプラグイン「Maps generator」を紹介したい。使えるかどうか検討してみてほしい。 Maps generator プラグインについて Maps generatorは、Adobe XDアートボード上にGoogleマップを表示する効率UPを図れるプラグインだ。このプラグインは、Google Maps APIを使用して地図を生成している。したがって、Webブラウザに表示する場合と遜色がないはずだ。 特徴 地名、または緯度経度を入力するだけで取得できる マップタイプやズーム値を変えられる ロケーションピンの有無を選べる 使い方 Maps generatorは、ダイアログを操作して使うタイプのプラグインとなっている。まずはMaps generatorプラグインをインストールしてもらいたい。その手順はとても簡単だ。 インストール インストールの手順を示していこう。まずはAdobe XDのツールバー「プラグイン」>「プラグインを見つける…」をクリックしてほしい。 果たして、つぎのモーダルウインドウが開く。モーダルウインドウからプラグイン検索を行おう。入力フォームに「maps generator」と入力する。すると対象プラグインの「Maps generator」が表示されるはずだ。インストールボタンをクリックして完了させよう。 マップを表示する まずはアートボード上に、マップ表示用のオブジェクトを配置する。 オブジェクトがアクティブな状態で、ツールバー「プラグイン」に「Maps generator」が表示されていることを確認できたらクリックしよう。 果たして、つぎのダイアログが開く。ダイアログには、 Location Zoom Level Map Type Location Pin Enter Styles json の設定項目が設けられている。Locationに目的地、あるいは緯度経度を入力。Zoom Levelでズーム値を変更。Map Typeで地図の種類を選択。Location Pinでピンの有無を切り替え。Enter Styles jsonでマップに装飾を与える。設定が決まったら「Generate Map」ボタンをクリックする。 果たして、Googleマップが表示される。ご覧のとおりオブジェクトぴったりにGoogleマップが配置されてるのがわかると思う。 これにてMaps…
-
フォートナイトのプレイヤー統計「Free Fortnite API」のリクエスト方法
Epic Gamesが販売・配信するTPSゲーム「フォートナイト」もシーズン9を迎えて依然勢力衰えない印象を覚える。ほかのバトルロイヤルゲームが過度のバランス調整でユーザーを失うなか、新規モードやキャンペーン、ユニークスキンの追加で初心者プレイヤーを留まらせ、楽しませてくれる。 ところが最近では、長時間労働を告発する記事により、過酷な労働環境が暴かれて話題になっている。同種のゲームに比べて豊富なアップデートには関心させられていたが、実情は、およそ週70時間労働に及ぶ極限状態で行われていたとのことだ。 「建築ゲー」ともいわれるユニークなゲーム性をもつフォートナイトだが、こんなことでファンが減ってしまうのは大変お粗末な事案だと感じた次第である。 とはいえフォートナイトを取り巻くコミュニティは盛んで、非公式APIまで公開されるなど、成長を支えている。サードパーティ製のサービスが公開されることは、Epic Gamesとしても歓迎すべき現象だろうと思う。 このエントリーでは、非公式API「Free Fortnite API」を紹介する。それにより、たくさんのサードパーティ製アプリが公開されて、春夏冬二升五合を願うためものである。 Free Fortnite APIとは Free Fortnite APIは、数百万におよぶFortniteプレイヤーの統計データを提供する。 特徴 プレイヤーデータを取得 パッチノートを入手 最新のFortniteニュースを入手 トップ10のFortniteプレイヤー情報を取得 Fortniteサーバーのステータス情報を取得 すべての権利はEpic Gamesにある 使い方 ストア情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/store/get?language={language} 追加されるアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get すべてのアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/items/list 特定のアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/item/get?ids={identifier} API統計データに基づく人気アイテム https://fortnite-public-api.theapinetwork.com/prod09/items/popular ユーザーIDを取得する https://fortnite-public-api.theapinetwork.com/prod09/users/id?username={User name} ユーザー統計を取得する https://fortnite-public-api.theapinetwork.com/prod09/users/public/br_stats_v2?user_id={User ID} チャレンジ情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/challenges/get?season=current 武器情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/weapons/get 最新ニュースを取得する https://fortnite-public-api.theapinetwork.com/prod09/br_motd/get?language={language} サーバー情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/status/fortnite_server_status まとめ 以上が、Free Fortnite APIのリクエスト方法だ。 かくしてフォートナイトプレイヤー統計を得ることができることだろう。あとはアイデア次第である。とはいえ、有名プレイヤー情報を取得したり、パッチノートを入手したりでも見込みありだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。