2ヶ月ほど前に公開した実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシートという記事の内容を更にブラッシュアップし、実際の制作現場で使える実用的なドキュメントとして整理したものです。 また、先日LIGブログでも同じテーマの記事を公開しました。 【完全保存版】シートで簡単チェック！デザイナーが見落としがちなUIデザイン12の想定漏れ | それいけ！フロントエンド ワイヤーフレームやデザインカンプを見ながら、デザイナーとフロントエンドエンジニアが細かい仕様を一緒に議論するような使い方を想定しています（お客さんとの議論にも使えるかも？）。 A7サイズの小さいPDFと、A4に割り付けたPDFがそれぞれあります。是非印刷して手元に置いてみてください。 工数見積りポーカーみたいに、グッズ化させてイベントとかで配ってみたいな……。 ダウンロード https://github.com/hokkey/cheatsheet-of-ui-with-fuzzy-behaviors License CC-BY-SA 4.0 初出 2017年4月24日
ブラウザで強制されてしまう約物アキの挙動を、よりDTPソフトに近い挙動へ改善するjQueryプラグイン。 約物アキ量とは、日本語の括弧や句読点のあとに入る余白を指す。ブラウザではこの約物アキ量が常に半角で固定されてしまうが、そうすると約物が連続したときに余白が空きすぎてしまう問題がある。 DTPの世界では、こういった広すぎるアキは詰めるのが普通だ。そのため、Webと書籍の組版を見比べると、たとえフォントが同じでもWebの方がスカスカしたダサい組版になってしまう。 現状は最新のブラウザにしか対応していないものの、font-feature-settingsという新しいCSSプロパティで、この約物のアキをとることができるようになった。しかし、全部の約物へ一律にこれを適用すると、本来必要な箇所のアキまでなくなってしまう。 こういった訳で、約物の前後関係を計算し、必要なところにだけfont-feature-settingsを適用できるスクリプトを作ることにした。 仕組み Blast.jsで文字を1文字づつspan要素に分解する 1文字づつ文字列を調べ、辞書にある文字クラスと一致していたら特別な約物クラスを付与する 前後にほかの約物クラスがある約物クラスには、その前後関係を約物の前後関係クラスとして付与する 1文字づつY座標を調べ、行頭文字と行末文字を検出し、特別な行頭・行末クラスを付与する 約物クラス、約物の前後関係クラス、行頭・行末クラスへ、CSS側でfont-feature-settings: "halt" 1;が特定のコンテキストのときにだけ適用されるようにする。これにより、「閉じ括弧の直後にある開き括弧」や、「読点の直後の閉じ括弧」といった条件をでアキ量を減らせる CSSの影響により、行頭だった文字が前の行に追い込まれてしまう場合がある。このときはさらに追い出しクラスを付与し、強制的に次の行へ追いこまれた文字を押し返す そうすると1文字分近いアキが行末に残ってしまうので、そのアキをその行に含まれる文字の字間で均等に吸収する DOMを大量に生成したり、インラインCSSの記述をゴリゴリやっているため、パフォーマンスはあまりよくなさそう……。 実装の詳細はライブデモも参照。 参考サイト 今回はじめてjQueryプラグインを自作してnpmに公開してみた。やってみるとどちらも意外と簡単だった。なお、最近のjQueryプラグインはcommonJS対応していないとwebpackなどからrequireできない。せっかくなのでrequireできる仕様にした方が良いだろう。(ただし、依存しているblast.jsはcommonJS未対応……。) jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | maesblog 初めてのnpm パッケージ公開 - Qiita また、npmのバージョン番号ルールとして採用されているセマンティック・バージョニングというものも始めて知った。一度公開すると二度とバージョン番号を下げてはいけない、ブレーキングチェンジがある場合はバグフィックス扱いでバージョンを上げてはいけないなど、ちゃんとしたルールがあるので読んでおきたい。 セマンティック バージョニング 2.0.0 - Semantic Versioning ダウンロード NPM: jquery.yakumono GitHub: hokkey/jquery.yakumono: 日本語組版で役物のアキ量を調整するためのjQueryプラグイン ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・動画・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2017年2月12日
RedmineのチケットとWikiの更新をChatWorkのルームへ自動で通知するプラグイン。同様のプラグインは過去にもいくつかあったものの、Redmine3.2で動作しなかったためSlack chat plugin for Redmineを改造して自作。はじめてRailsいじった。 業務でガンガン利用しているので、当面はメンテを続けるはず……。 日本語と英語に対応しています。 ダウンロード hokkey/redmine_chatwork: A Redmine plugin for ChatWork integration ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 Redmineバージョン3.2で動くChatWorkプラグインを作ってみた! sciyoshi/redmine-slackをベースに改造して作ってます! #redmine hokkey/redmine_chatwork https://t.co/pumsme64DU — hokkey (@y_hokkey) 2016年10月26日
3D typography - study of Quartz Composer from Yuma Hori on Vimeo. スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・動画・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 QCにまたはまってきた。今はまだ静的なデータだけど、この前のテキストマイニングとか使えばもっと作品っぽくできるのでは…。もっと作ってみたい。 #quartzcomposer https://t.co/ax1TTWDkBV https://t.co/VyWjxna8tD — hokkey (@y_hokkey) 2016年5月25日 コメント HYPER-REALITYという作品を目にし、3Dで動くUIっぽいタイポグラフィって恰好良いよな〜、という思いでとりあえず作ってみました。
iTunesのビジュアライザーとして動作するメディアアートっぽい作品です。 動画 スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Compositions内に配置すると、iTunesのビジュアライザとして選択できるようになります。 謝辞 デモ動画用の楽曲として「Catch My Fall」を使用させていただきました。 “Catch My Fall (feat. Sassygal)” by Nocturnia is licensed under a Attribution-NonCommercial 3.0 International License. 楽曲についての詳細はFree Music Archive: Psychadelik Pedestrian - Nocturniaを参照してください。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2016年5月9日 コメント 社内勉強会資料の今更はじめるQuartz Composerでのデモ用で適当作るつもりが、 今までのQC作品で一番ダイナミックに動くものが完成した。こういう作品ももっと作ってみたいな〜
Vagrant・CoreOS・Dockerを使った小規模な自宅サーバ向けの環境構築ファイルです。イミュータブルなインフラ構築を手軽に試せる内容になっています。 Qiitaに書いた記事、Vagrant・CoreOS・Dockerでインフラ素人が自宅サーバを立てた話 - Qiita で紹介した自宅サーバの構成を元に、『Dockerで楽しむ自宅サーバ』のための簡易版として作成しました。 システム構成図 ホーム画面 ダウンロード https://github.com/hokkey/vagrant-coreos-docker-demo ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2015年2月15日 コメント 永続的に保存するデータをdata.vdiに隔離し、それ以外はイミュータブルな構成としています。
オープンソースのDAMシステム「ResourceSpace」のためのカスタムテーマです。 デフォルトでインストールされている「whitegry」テーマをベースに、特にレスポンシブデザインプラグインをONにしたときの外観を見やすいものに置き換えることを意図しています。 なお、ResourceSpaceについては拙作のQiita上の記事で詳しく紹介しています。 オープンソースのDAMシステム、ResourceSpaceのまとめ - Qiita オリジナル版whitegryテーマとの比較: ダウンロード https://github.com/hokkey/whitegry_plus ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2015年9月23日 コメント デザイン資料の収集や管理をする上で、ResourceSpaceをかなり便利に使っています。 ただ、このソフトはイマイチ画面のデザインがイマイチで、見辛く、使い辛い部分も多いのが難点です。 このテーマでは、デフォルトのテーマをベースに、細かい部分で使い勝手の向上や、見栄えの改善を行っています。
opml2indexignは、OPML形式をInDesign用に整形するXMLスタイルシート(XSL)と、便利なタスクを設定したGruntfile、セッティング済みのInDesignテンプレートでできた、シンプルな自動組版ツールです。 OmniOutliner、Tree、MindNode、Scapple等の人気のエディタから出力したOPML形式のデータを、InDesignのドキュメントへ自動組版できます。 最新版のInDesignCCでも問題なく動作します。 ダウンロード／ソースコード https://github.com/hokkey/opml2indesign ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2014年9月23日 コメント InDesignを使うととても美しいドキュメントが作成できるけど、当たり前ながらワープロとして手軽で軽快に使えるソフトとはいえません。 そこで、自分がよく使うアウトラインエディタのコンテンツをInDesignへシームレスに流し込めるツールを自作してみることにしました。 InDesignは標準でXMLを読み込むことができるし、アウトラインエディタがよく使うOPML形式はXMLの1種なので、そんなに難しいものではなかったです OPMLの仕様が極めてシンプルだったので、XSLTもかなりシンプルな内容になってます。 OPMLを適当なXML構造に整形するXSLT(XMLスタイルシート)を用意 整形後のXML構造に合わせたInDesignテンプレートを作成 OPMLの変更を監視し、リアルタイムにXMLへ変換するGruntタスクを用意
プログラムならではの表現を模索するため、ランダムに自動生成されるモーションタイポグラフィーを制作しました。 AppleのQuartzComposerを使用した3Dアニメーションで、Mac OS Xのスクリーンセーバーとしてそのまま使用できます。 動画 ※BGMは動画のためのもので、作品には含まれません。 スクリーンショット コンセプト サインシステムの美しさと、表記パターンの多様さに注目 東京メトロ銀座駅・日比谷駅・有楽町駅・東銀座駅は1つの地下空間として繋がっていて、 そこには番号の振られた出口があわせて44存在します。(2012年当時) 駅構内には鮮かな黄色の出口案内が無数に掲示され、その矢印記号の向きと、 アルファベットと数字の記号の組み合せはかなりの種類に及びます。 Metro Exitsは、この出口サインの組み合わせの多用さと、タイポグラフィとしての美しさに着目した作品です。 この作品では、9方向の矢印記号と44種類の出口記号が、ランダムな組み合わせで無限に生成されては、通路の奥から手前へ消えていきます。 ときおり、通路の下を6つの「G」マークが通過していくのは、編成の地下鉄銀座線を表現しています。 ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Screen savers内に配置すると、Macのスクリーンセーバーとして選択できるようになります。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2013年12月18日 コメント 空港や鉄道の公共サインシステムが大好きです。以前よく利用していた地下鉄の日比谷駅はとても出口の数が多く、アルファベットや数字のパターンがとても沢山あります。 丁度プログラミング独自の表現をやってみたいと思ってたため、サインシステムのタイポグラフィにランダム性を取り入れたら面白いんじゃないか、と思ってこれを作ってみました。 実際のタイポグラフィでは「Frutiger(フルティガー)」が使用されていますが、この作品では便宜上「Neue Helvetica(ノイエ・ヘルベチカ)」を使用しています。
RSSフィードから取得した情報を3DCGで表示する作品です。そのままMac OS X用のスクリーンセーバーとして使用できます。 動画 ※BGMは動画のためのもので、作品には含まれません。 スクリーンショット ダウンロード hokkey/quartz-composer-works: Quartz Composer Works ダウンロードしたqtzファイルを~/Library/Screen savers内に配置すると、Macのスクリーンセーバーとして選択できるようになります。 ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2013年1月 コメント 未来派図画工作で配布されていた『20世紀ボヤージ』(現在は『21世紀ボヤージ』)に感銘を受け、自分も3Dで動くタイポグラフィを作ってみたい！ という動機から作成した作品です。3D空間にRSSフィードから取得した見出しをレイアウトし、ダイナミックに色彩が変わったり、3次元的にアニメーションする表現を試してみました。
