づや会 vol4 ~Node.jsの話~の登壇資料です。 以前コマンドラインで作成したPDFの差分比較ツールを、Electronを使ってGUIアプリにしてみました。 づや会Vol.4のレポート記事(LIGブログ): 今話題のBotをNode.jsで作れる？！LIGエンジニアで勉強会してみた！ | のびすけのイベントレポート コマンドライン版Qiita記事: GulpとGraphicsMagickでPDFを差分比較する。マルチページ・マルチファイル対応 - Qiita コマンドライン版ソースコード: hokkey/image-compare: image-comparing task with gulp and graphicsmagick スライド スライド(一部)
社内勉強会資料。制作系のフロントエンド技術者向けに、ソフトウェアテストについて概要をまとめたスライドです。 本資料に関連し、『Pairwiser』について更に掘り下げた記事『Webアプリのテスト工数を削減できるかもしれないペアワイズ法とPairwiser』もQiitaに公開しています。 スライド 参考資料 知識ゼロから学ぶソフトウェアテスト 【改訂版】 第1回 組み合わせテストの技法：組み合わせテストをオールペア法でスピーディに！｜gihyo.jp … 技術評論社 現場で使うためのオールペア法、直交表の基本（2）：組み合わせテストを科学的に効率化する――手法とツール、品質保証のための道具 (1⁄3) - ＠IT Pairwiseテスト導入の効果と課題 Pairwiseは大規模パッケージソフトウェアで効果的に運用できるか 直行表とオールペア法の並行運用によるソフトウェアテスト 手法と強さ、印紙、水準の選択ガイドライン Pairwiser - Pairwise Testing and Test Generation Tool PictMaster プロジェクト日本語トップページ - OSDN スライド(一部)
CSSのfilterプロパティを使うと、YouTubeの動画に後からぼかし効果を加えることができる。 animationプロパティと組み合わせてブラー効果を周期的に変化させるようなデモを作ってみた。 FPSゲームでダメージを食らって死にそうなときの表現に似ている。 デモ See the Pen Blur CSS Animation on YouTube Video by y_hokkey (@hokkey) on CodePen. 互換性が低い手法 面白いので使ってみたくなるが、クロスブラウザでの動作がかなり怪しい。PCでもSPでも万全に使用できる雰囲気ではないので、仕事の案件で使うのは難しそうだ。残念。 2016年3月での検証結果 Chrome/Safari/Firefoxで動作 IE非対応 Android4.4.4で動作 iPhoneで一度フルスクリーン状態になるとそれ以降正常に適用されない。MobileSafariの仕様で自動的にフルスクリーン再生に移行してしまう為、実質的に使えない iPadでは動作
「づや会 vol3 ~AWSの話~」登壇時の資料です。EC2で自宅サーバと同じスペックでサーバを立てたらどれくらいの運用費用がかかるか、EC2の料金体系をひも解きながら考えてみました。 ※イメージ写真としてCC表示3.0ライセンスのFile:A view of the server room at The National Archives.jpg - Wikimedia Commonsを使用しています。 スライド スライド(一部)
最近、容量無制限で使えるクラウドバックアップサービスとしてBackblazeを使っている。料金は年間50ドルで、同種のバックアップサービスの中でもかなり安い。 全然無制限じゃないZipCloud 以前は同じく容量無制限を謳っていたZipCloudというサービスを使っていた。 ZipCloudの使い勝手自体は可もなく不可もなく、不満はそれほど無かった。しかし、UnlimitedPlanのサブスクリプションを購入した後に1.6TBくらいのデータをアップロードしたところ、ある日を境にアップロード処理が停止してしまい、再ができない。2015年の6月〜7月頃のことだった。 ソフト問題かと思いサポートに問い合わせたところ、「規約にある規定を越えた利用をしているからアップロードを一時的に止めている。悪いけどビジネスプランを買ってね!」とのこと……。当時の規約を読むと、 We monitor the usage of our heaviest Unlimited account users, a dynamic margin is calculated based upon averages which, should a user fall into, we may require them to cease backup or move onto a business account. と確かに書いてあった。 本当に利用者全員が無制限にデータをアップロードできたら採算がとれなくなってしまうことは想像できるので、サービス提供側の言い分は分かる。しかし、それなら初めからUnlimitedPlanという説明にしないで欲しかったとも思う。ググって出てきたブログ記事で自分と同じような事例があったが、自分も全くこの人と同意見である。 You see, to me (and the rest of the world), the word unlimited means “without limit.” ZipCloud: Unlimited means limited? What a Country! | One Off 下の記事によると、ZipCloudや同社の他のバックアップサービスはあまり評判が良くない。 The Shocking Truth about MyPCBackup, JustCloud, and ZipCloud - BackupReview.com なお2016年現在、UnlimitedPlanの説明にも「1TBまで」という注釈が付くようになった。前に比べれば少しは改善されたのかもしれない。 なぜ「容量無制限」は衰退しているのか ZipCloud以外にも「容量無制限」を売りとしたクラウドストレージがいくつかあるが、最近は容量無制限プランの提供を終了するサービスが多い。MicrosoftのOneDriveもその1つで記憶に新しい。 同社によると、一部のユーザーが多数のPCのバックアップや膨大な映画コレクションを保存する目的でOneDriveを利用し、中には平均的ユーザーの1万4000倍に相当する75Tバイトものデータをアップロードする人もいるという。 MicrosoftはOneDriveをこうした一部のユーザーのためのバックアップ場所としてではなく、多くのユーザーに高品質のプロダクティビティおよびコラボレーション体験を提供 するためのサービスと考えているため、今回の変更に踏み切ったとしている。 Microsoft、「OneDrive」の無料容量縮小ヘ “容量無制限”は終了 - ITmedia ニュース 記事にも書かれているように、1人のヘビーユーザーが平均的なユーザー1万4000人分の容量を好きに使えてしまうと、どれだけ普通のユーザーを集めても採算に見合わなくなってしまうのが原因なのだろう。クラウドストレージは随分安くなったとはいえ、TBクラスのデータを好き勝手に保存できるほどはまだ安くなっていないのである。 Backblazeは本当に容量無制限だけど回線は遅い その点でBackblazeは素晴らしく、今のところ本当に容量無制限に使えている。 回線速度は遅めで、筆者の場合、1.6TBのデータを全てアップロードするのにおよそ30日かかった。(それでも1日53GBアップロードしていることになるのだけど!) でも、自分の使用用途からすればそれでも問題はない。なぜなら既にローカル上にバックアップデータは存在していて、その更なる保険としてクラウドを使いたかったからだ。別に今すぐバックアップされなくても安ければそれで良い。 AmazonS3よりも低価格なストレージサービスも ちなみに、Backblaze社は同社の技術を使ってAmazonS3に似たサービスも初めようとしている。こちらも地味に気になる。 バックアップサービスのBackblazeがAmazon S3の1/4の料金でクラウドストレージサービスを立ち上げ | TechCrunch Japan Backblazeのサービスの料金は、AWSのとても遅いコールドストレージサービスAmazon Glacierの半額、通常のS3サービスの1/4だ。 大容量のデータを持つと地味にコストがかかる 本の自炊などで資産価値の高いデータをが溜まってくると、データをバックアップし続けるコストを意識せざるをえない。PCのハードディスクはいつ壊れてもおかしくない消耗パーツなので、最低でも2台以上のHDDに保存しないと冗長性が確保できない。昔みたいにDVD-Rへ定期的にバックアップすることも現実的ではなくなった。 自分の大切なデータをできるだけ安全かつお金のかからない方法で維持するするに、Backblazeのようなコストパフォーマンスの高いサービスを活かしていきたい。
数年ほど前に、iPadやドキュメントスキャナーといったハードウェアの登場で、書籍を自分で裁断・スキャンしてデジタル化する「自炊」と呼ばれる行為が生まれた。 本や漫画を頻繁に買い、捨てたくないけど置き場所もないという人にとって、本の自炊はかなりメリットがあることだと思う。今まで800冊以上の本をデータ化できたおかげで、いつでも大量の本を手元のiPadで探すことができるし、OCRで全文検索をかけることもできる。 自炊するにはそれなりに時間とお金の投資が必要で、裁断やスキャンが面倒くさくもある。それでもメリットはかなり大きい。 必要機材 本を自炊するためにはどうしても機材が必要になる。裁断器なしでは本をバラせないし、ドキュメントスキャナでなければ現実的な作業時間で本をデータ化できない。 裁断器は切れれば何でも良く、ドキュメントスキャナはScanSnapS1500があれば必要十分である。 ScanSnapS1500(ドキュメントスキャナ) 自炊カルチャーの起爆剤とも言えるScanSnapS1500は、中古価格が大分こなれてきている。長年使っているが特に不満なく使い続けることができている。 消耗品 何十冊もスキャンしている消耗品の交換は必須となる。たまに在庫が切れているのでパッドユニットとピックローラユニットは念の為揃えておきたい。 ガラス面の汚れ スキャンを続けているとガラス面に紙カスがこびりついたりして、スキャン結果に青いシマが出きたりする。これを気付かずにスキャンを続けると作業がやり直しになったり、ひどいと気付いたころには原本を捨ててしまっているので、こまめに拭くと良い。 メーカー不明の大型裁断器 「裁断器」ググるとよく出てくるこの型のものを使用している。おそらく中国製。安物なので精度はイマイチでズレやすいが、慣れると思い通りの位置で裁断できるようになる。 この製品に限らず、大型裁断器はかなり重く、半畳ほどのスペースを消費する。形状的にも積み重ねが効かないので、自炊によって節約できるスペースが裁断器のサイズに見当っているか、購入前に検討するべきかも。 替刃のサイクルはかなり長い 4年以上にかけて800冊以上を裁断したが、まだ替刃が必要なほど刃は減っていないように思う。 安全上の注意 ハードカバーの背も断裁できる刃がむきだしなので、怪我をしないようにしたい。小さな子どものいる家庭で使うのであれば、もっと高額な日本製の製品の方が安全性は高そう。 データストレージ 参考までに、八百数十冊で40GB程度のデータ容量になっている。これはClearScanによる圧縮を積極的に行った上での容量なので、非圧縮では2割から3割増し程度になるかもしれない。 データ容量だけで言えばそれほど困るサイズではないが、情報の資産価値が高い(本を買うのにも、本を電子化するのにもコストをかけている)ので、それなりに冗長化へ力を入れたい。 筆者の場合は、通常運用のHDDに加えて、RAID1で冗長化したバックアップデータと、クラウドバックアップサービスの「Backblaze」を併用している。(参考: 本当に容量無制限? BackblazeとZipCloudの違い) ワークフロー 完璧さにこだわればこだわるほど電子化にかかる時間的コストが嵩むので、自分が許容できるレベルで妥協した方が効率は上がる。 本のカバー・ソデ・オビの完全再現は諦める ドキュメントスキャナを使った作業では、特にカバーとソデ(カバーのかえしの部分)、オビの部分の作業が面倒になる。ScanSnap本体のボタンを長押しすると長い原稿を巻物のようにスキャンできるが、それではひと繋がりの画像になってしまうので、Photoshopなどで分断する作業が発生する。事前に分断するのであれば、ハサミで切らなければならないが、手作業なので位置の調整は適当になってしまう。 また、オビなし・オビつきの両方のパターンのデザインを自炊したいのであれば、両方をスキャンした上で、PC上で重ね合わせるなどの合成処理をしないと難しい。 現実的には、何十冊もスキャン作業をしなければならない中では無理がある。 媒体にマッチした保存形式でルールを決める 漫画はほとんどが画像でOCRをかける意味合いも低いため、JPEG画像をzipにまとめた形式で保存している。それ以外の媒体はPDFで保存している。 紙の薄い本は一回あたりの量を少なくする 雑誌や文庫小説などの紙の厚みが薄かった原稿の場合、紙の重送が格段に発生しやすくなる。こういったScanSnapが苦手な紙質のものは、20枚程度の少ない単位でスキャン作業を行った方が結果的には速い印象がある。 おすすめ無料ソフト ScanSnapの付属ドライバ OSX版の感想となるが、UIが使いやすく、機能にも申し分ない。読み込みプリセットを複数作成でき、たとえば「漫画をスキャンする時は1枚ずづJPEGで保存」とか、「雑誌をスキャンする時はPDFにまとめて圧縮率低めに保存」とかの設定を作成し、手軽に切り替えて運用できる。OCR機能も付いているので、とりあえずこれがあれば自炊はできる。 プリセットを用意し、原稿に応じて適宜切り替えて運用すると便利 インストール スキャナ ScanSnap : ドライバダウンロード : 富士通 Stackroom Mac OS XでPDFやZipにまとめた書籍／漫画を管理するのであれば、これほど適したツールは他にないのではないかと思う。iTunesのようなUIでPDFやZipファイルを管理できて、必要十分なメタデータも設定できる。 iTunesとは違い、データをライブラリフォルダにコピーして管理するのではなく、エイリアスで間接的に管理する仕組みになっている。そのため、ファイルの置き場所に制約がなく、登録後にファイルを動かしてもそれなりに追従してくれる。 作者が日本人で、ずいぶん前に2ちゃんねるで生まれた経緯がある。長い間アップデートされていないが、今だにEL Captainでちゃんと動いているのがすごい。 インストール 公式サイトから入手するか、homebrew-caskでもインストールできる。 brew cask install stackroom SimpleComic 意外と、日本の右綴じの書籍にも対応したビューアは少ない。筆者はSimpleComicという見開きで画像を表示しながら、右綴じと左綴じの両方に対応したビューアを使っている。PDFとZipの両方に対応している。 インストール Dancing Tortoise | Simple Comicから入手するか、homebrew-caskでもインストールできる。 brew cask install techstoreclub-simple-comic imageOptim Web制作などで定番の、画像を劣化させることなく容量削減できるツール。漫画のJPEG画像は、Zipへ固める前に少しでも容量を削っておくとチリツモで結構な容量節約になる。 インストール ImageOptim — better Save For Webから入手するか、homebrew-caskでもインストールできる。 brew cask install imageoptim ClearScan AcrobatProによる特殊なOCR処理 電子化するメリットの1つに、OCRがある。OCRとは、画像の中にある文字を認識して、テキストデータとして認識できるようにする技術のことだ。これを使うと、画像データに対してテキスト検索をかけられるようになる。 ScanSnapのドライバにもOCRの機能があるが、AcrobatProにはClearScanという更に強力な機能がある。ClearScanを使うと、文字認識をした上に、文字のベクター化も同時に行ってくれる。文字が綺麗になった上、大幅に容量を削減できる機能なので是非活用したい。これができるソフトは他にない為、OCRをかけるならAcrobatProは必須と言える。 Retina端末の場合、OCRでClearScanを使っていたときの見栄えが非常に良い。 ScanSnapの読み込み設定は「白黒」が向いている 文庫本などの文字中心の書籍は、特にClearScanとの相性が良い。このとき、原本が古くて紙が黄ばんでいたりすると、ScanSnapがカラー原稿と誤認識して読み込んでしまう場合がある。ClearScanはカラーよりもグレースケール、グレースケールよりも白黒の時に効果が際立つので、文庫本のスキャン時は、あらかじめて設定を「白黒」に固定しておくとClearScanの効果向上が期待できる。 ClearScanの処理は重い ClearScanは非常に重い処理で、最新のPCを使ってもそんなに早くならない。文字ばかりの本を数十冊まとめて処理するには、昔の動画エンコみたいに寝る前に回しておくなどの工夫が必要になる。 ClearScanの処理はよく止まる さらに言うと、ClearScanは結構な頻度で止まる。感覚的には、自炊した本の2000ページに1度くらい、Acrobatに解析できないページが含まれている。そのページに当たってしまった場合は手動でそのページを飛ばすように処理をやり直さなければならない。 モバイル環境 iPad 初代iPad→iPad2→iPad mini→iPad mini4と使ってきたが、重いPDFをようやく快適に読めるようになったのはiPad mini4から。iPad miniのスペックだと、我慢できる程度に重くなる時はあった。 常時書籍を持ち歩くのであれば、容量は最低でも64GB、できれば128GB欲しい。 i文庫HD iPadで蔵書を管理するソフトは結局これに落ち着いた。PCとの同期にFTP・SMB・WebDAVを使えるので、ファイルサーバとの連携もしやすい。各種クラウドストレージにも対応している。 ComicShare PDFやZipのストリーミングに対応した電子書籍ビューア。ストリーミングなので、端末側の容量が少なくても閲覧ができる。ただし、ネットワーク上にサーバが見える環境でしかストリーミング閲覧はできない。 FTP・SMB・SCP・WebDAVに対応している。ベッドサイドで容量の小さいiPhoneでちょっと読んでみたい時に役立つ。
SF映画のUIがたくさん写真で見れる本なのか? と思いカジュアルな気持ちで購入しましたが、良い意味で予想を裏切る内容でした。 SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン SFは現実世界の制約から解放されて、技術的にはるかに進んだ未来の世界を描いている。 私たちは、そこからインスピレーションやアイデアを得て、想像力に磨きをかけることができる。 本書には『月世界旅行』(1902年)から『ミッション:インポッシブル/ゴースト・プロトコル』 (2011年)まで、 100年以上の歴史をもつSFのデザインを調査・分析した結果から抽出した、現代のデザインに生かせ る141のレッスンが収録されている。 最高のデザインをSFから学びとること、SFのデザインを仕事に生かすことを目的として、通信や学習 、医療など 人間の生活を手助けするためにSF世界ではデザインがどのように活用されているのかを読み解く。 文章のボリュームはかなり多く、詳細な解説もあって大学のテキストのような印象を受けました。 冒頭できちんと研究の目的や方法論、なぜその方法を選んだかについて説明と本書における用語の定義が述べられており、学術的な書籍となっています。 カラー図版と動画は筆者Webサイトから 本書の図版は半分以上がモノクロ印刷で、実際の動きも分かりにくいのが残念でした。著者がかなり頻繁に更新しているブログでは、実際のカラー図版や動画を豊富に見ることができます。 意外と日本のSFアニメとかも取り上げられていて、図版を見ているだけでも面白いサイトになっています。 Sci-fi interfaces | IxD Lessons from Sci-Fi ちなみに原題はMake It Soで、『スター・トレック』の台詞から来てるそうです。意味は「やりたまえ」とか「そうしたまえ」といったニュアンスです。 STARWARSの立体映像端末から得るインタフェースデザインの教訓 本書では具体的なSF作品の例を挙げながら色々なテーマでデザインの考察を行っていくのですが、特にスターウォーズの立体映像についてのそれは印象的なでした。 ダースベーダーの小さな立体映像を見下ろす兵士の様子が劇中で描かれています。この時、映画では描かれていないダースベーダー側の端末では、どのように兵士は表示されているのでしょうか。 もしダースベーダー側の画面で、彼が巨大な兵士の立体映像に見下ろされているとしたら、それは彼の社会的な立場として不自然に思えます。 (会議で気に入らない上司を殺害するくらいですから….) では、ダースベーダー側でも小さい立体映像の兵士を見下ろしているのでしょう? でも、そうしたら二人の視線が合わせられなってしまいます。 視線が合わせられない映像によるコミュニケーションは通信装置として不自然です。 従って、もし立体映像による通信技術が可能になったとしたら、その機械のデザインとは、両者の視線を一致させるデザインとインタフェースが必要になるだろう…. そんな理論でした。 本書では、このように一見荒唐無稽とも見える映画内の演出から、実際に役立ちそうな教訓を導き出しています。 テーマは、コミュニケーション端末／コンピューターのGUI／ジェスチャーによる操作／音声操作／脳インタフェース／拡張現実／医療／教育／セックスにも及び、大変興味深い内容でしたしました。 ユーザーインタフェースと人間の社会性 上記の例にあるように、ユーザーインタフェースには人間の社会性を尊重したデザインが重要だということが、全体を通してよく注意されている理念に思えました。 特にWebデザインやプロダクトデザインなど、ユーザーインタフェースに関心のある方にとってはとても興味ある内容だと思います。文字ビッシリでページ数も多いですが、すばらしい内容でした。 仮想現実におけるユーザーインタフェースデザインの可能性 最近はVR技術の発展が早く、Web業界にいた人間がいずれはそういった分野のデザインやコンテンツ制作に進んでいくということも十分考えられることです。 僕は、今私達がPCやスマホで仕事をするのと同じ感覚で、VRデバイスを使って仕事やコミュニケーションをする未来が数年以内にやってくることを期待しています。 VRの中では何でもCGで表現できてしまうので、その中で使う何かのアプリケーションのユーザーインタフェースとは、 (まさに本書の内容と同じように)SF的なアイデアが実際の道具としてデザインされ直すことになるはずです。 既に、VR空間自体をVR空間でレイアウトする為のアプリケーションのデモが存在しています。 もちろんVRに限らず、ウェアラブルデバイス・IoT・AR技術・pepperのような人型ロボットなどでしか実現できない、 未来のサービス体験や、アプリケーションのデザインにも役立つ視点だと思います。 ※本レビュー記事は、筆者が2014年12月14日にAamazon.co.jpへ投稿したカスタマーレビューを元に加筆・修正したものです。
普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。 Wiki・チャット・チケット・資料の作成が捗ります! ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。 参考: 知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］ Markdown形式 Bitbucket・GitHub・Qiita・Slack等、最も色々なシーンで使う形式です。 コード javascript:prompt('Markdown','%5B'+document.title+'%5D%28'+location.href+'%29')() 出力サンプル: [タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE](http://media-massage.net/blog/linkbookmarklet/) ブックマークレット: Title+URL: Markdown ChatWork形式 国内で人気の高いChatWorkへURLリンクを綺麗に貼れるブックマークレットです。選択中のテキストも引用されます。 ChatWorkの記法は独特ですぐ忘れてしまうので、ブックマークレット化すると楽です。ChatWorkに投稿すると下図のような表示になります。 コード javascript:prompt('ChatWork','[info][title]'+document.title.replace(/([\[\]])/g,'\\$1')+'[/title]'+location.href+'\n'+window.getSelection()+'[/info]')(); 出力サンプル: [info][title]タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE[/title]http://media-massage.net/blog/linkbookmarklet/ [/info] ブックマークレット Title+URL: ChatWork Textile形式 Redmineを中心に、Bitbucketの一部やGitHubでも使うことができます。Markdownに比べるとマイナーですが、筆者はTextileの方が好きです。 コード javascript:prompt('Textile','%22'+document.title.replace(/&#34;/g, '')+'%22%3A'+location.href)() 出力サンプル: "タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE":http://media-massage.net/blog/linkbookmarklet/ ブックマークレット: Title+URL: Textile HTMLリンク形式(タイトル) <a>タグでマークアップ済のテキストデータを出力します。 コード javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%3E'+document.title+'%3C%2Fa%3E')(); 出力サンプル: <a href="http://media-massage.net/blog/linkbookmarklet/">タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE</a> ブックマークレット Title+URL: HTML HTMLリンク形式(URL) <a>タグでマークアップ済のテキストデータを出力します。タイトルではなくURLをそのまま使用し、title属性にページタイトルをセットします。 コード javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%20title%3D%22'+document.title+'%22%20%3E'+location.href+'%3C%2Fa%3E')(); 出力サンプル: <a href="http://media-massage.net/blog/linkbookmarklet/" title="タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE">http://media-massage.net/blog/linkbookmarklet/</a> ブックマークレット Title+URL: HTML(URL) プレーンテキスト形式 FacebookやTwitterの本文にしたり、紙の資料に使ったりと、何にでも使えるプレーンテキストのフォーマットです。 コード javascript:prompt('Plain text',document.title+'%5Cn'+location.href+'%5Cn')(); 出力サンプル: タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE http://media-massage.net/blog/linkbookmarklet/ ブックマークレット Title+URL: Plain
「づや会 vol2 ~Dockerの話~」登壇時の資料です。自宅サーバをVagrantやDockerでイミュータブル化した話を中心に、Vagrant・CoreOS・Dockerを紹介した内容です。 サンプルコード: vagrant-coreos-docker-demo 参考Qiita記事1: Vagrant・CoreOS・Dockerでインフラ素人が自宅サーバを立てた話 - Qiita 参考Qiita記事2: Dockerで即実行できる、社内・自宅向けオープンソースWebアプリ - Qiita ※イメージ画像にmatthew_hullさんの写真whale_breachを使用しています。 スライド スライド(一部)
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に隔離し、それ以外はイミュータブルな構成としています。
社内勉強会資料。フロントエンド技術者向けに自分が知っているインフラ関係の概要をまとめたスライドです。 スライド スライド(一部)
堀 祐磨/Hori Yuma/y_hokkey/ほりでー 1988年生まれ。多摩美グラフィックデザイン学科を中退。デザイナーとしてグラフィック・エディトリアル・Web・UIのデザインを経験した後、Webフロントエンドエンジニアも経験。現在はITコンサルタントとして外資系SIerに在籍中。元LIG社員。 LIG入社時にあだ名が『ほりでー』に。それ以来、毎日がホリデーです。 作業環境 メインOS: Mac OS X IDE: IntelliJ IDEA エディタ: TextWragnler シェル: zsh キーボード: HHKBPro2(無刻印)/Vortex CORE 椅子: Hermanmiller Aeron Chairs/KOPLUS bodyflex 関連リンク Facebook/Twitter: 気になるニュースをコメント付きで随時投稿 GitHub: OSSプロジェクト Slideshare: 勉強会スライドなど flickr: 過去に撮影した写真作品など LinkedIn: あんまりちゃんと書いてない 執筆実績 LIGブログ 比較的ライトな記事を月1ペースで公開（2016年〜） https://liginc.co.jp/author/hori エンジニアが無理なく続けられる5つの英語学習術 | それいけ！フロントエンド 工事不要！ 自宅をスマート化できるおすすめ家電3選 | それいけ！フロントエンド 無料でサイトを大幅に高速化! CDNを知らない人のためのCloudFlare入門 | それいけ！フロントエンド デザインワークと上流工程の意外な共通点とは？元デザイナーのエンジニアが解説します | それいけ！フロントエンド デザイナー／エンジニアのセルフプロモーション手法を考えてみる | それいけ！フロントエンド 【完全保存版】シートで簡単チェック！ デザイナーが見落としがちなUIデザイン12の想定漏れ Webエンジニアが考えた絶対に寝坊しない4つの対策。信頼性設計を身近な課題に応用しよう textlintで日本語の自動校正サービスを作ってみた！ | 株式会社LIG なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG がんやHIVの研究に貢献できる「ボランティアコンピューティング」の始め方 | 株式会社LIG iOSアプリWorking CopyとTextasticでgitが使えるモバイル開発環境を作る | 株式会社LIG JetBrainsのIDEでもっとGitを使いこなそう！意外と便利なGUIから使える小技 | 株式会社LIG マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ | それいけ！フロントエンド 復活したAdobe CC Extract! その終了から再開までの経緯 | それいけ！フロントエンド フロントエンドエンジニアの勉強会「LIGFE’S」を開催しました | LIGプレス 使いこなそう！テンプレートリテラルとimport/exportステートメント | ES6のある星に生まれて Yeomanで自動化！自作generatorの作り方 | 株式会社LIG 本当の初心者向け！Git入門のための概念から基本用語まで | Git編：一歩踏み出すフロントエンド入門 非リアなのに、いきなりプレゼン！？社外勉強会の登壇に向けて対策した6つのこと | 株式会社LIG Qiita Web系の技術記事を投稿（2014年〜） http://qiita.com/y_hokkey/ （いいね） その他 WebDesigning 2016年02月号 連載『課題解決のためのUI実装講座』を共同執筆しました。Sassを利用したスプライト画像の実装テクニックについてご紹介した内容です。 GoogleBooksから閲覧できます: Web Designing 2016年2月号 - Google ブックス サンプルデータのダウンロード: サンプルデータ｜WD ONLINE 登壇実績 STUDIO上野 by LIG デジハリとLIGが提携したWebスクールで、レスポンシブウェブデザインをテーマとした特別授業を定期的に開催しています（2016年〜）。 デジハリSTUDIO上野 by LIG LIGFE’S powered by LIGSHIP (2016年11月08日) LIGが開催するエンジニア向け勉強会を企画・ファシリテーションしました。 【20:00スタート】LIGフロントエンドのJavaScript事情を全部話しちゃう会! - connpass づや会 vol6 〜GCPの話〜 (2016年06月16日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: DockerコンテナをGKEでクラスタリングしてみた イベント告知: づや会 vol6 ~GCPの話~ づや会 vol5 〜機械学習の話〜 (2016年05月19日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: LIGブログをテキストマイニングしてみた イベント告知: づや会 vol5 ~機械学習の話~ LIGフロントエンドの勉強会LIGFE’S (2016年04月26日) LIGが開催するエンジニア向け勉強会を企画・ファシリテーションしました。 LIGフロントエンドの勉強会LIGFE’S - connpass づや会 vol4 ~Node.jsの話~ (2016年04月18日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: はじめてのElectronアプリ PDF差分比較アプリを作ってみた イベント告知: づや会 vol4 ~Node.jsの話~ LIGブログレポート記事: 今話題のBotをNode.jsで作れる？！LIGエンジニアで勉強会してみた！ | のびすけのイベントレポート づや会 vol3 ~AWSの話~ (2016年03月22日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: AWSで楽しむ自宅サーバ? イベント告知: づや会 vol3 ~AWSの話~ づや会 vol2 ~Dockerの話~ (2016年02月15日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: Dockerで楽しむ自宅サーバ イベント告知: づや会 vol2 ~Dockerの話~ Remixing Vol.3 (2015月05日) オールアバウト・RichMedia・LIGの3社で開催したエンジニア向けの勉強会に登壇しました。 発表スライド: コンポーネント単位で考えるWeb制作 イベント告知: Remixing Vol.3 with オールアバウト and LIG - Remixing | Doorkeeper
「Remixing Vol.3 with オールアバウト and LIG」へ登壇した際に初めて公開したスライドです。 Web制作で画面要素のコンポーネント化をすすめることによるメリットと、実践的なコンポーネントの実装手法について説明しています。 スライド スライド(一部)
社内勉強会用に作成したスライドです。プログラミングに親しくないWebデザイナーなどを対象に、Sassで登場するプログラマブルな機能をやさしく解説することを意図しています。 スライド スライド(一部)
社内勉強会用に作成したスライドです。アイデアを広げる上で役立つマインドマッピングやチャート作成ツールを、具体的な使用例を交えて紹介しています。 スライド 動画パート1: MindNode使用例 動画パート2: Scapple使用例 スライド(一部)
オープンソースの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次元的にアニメーションする表現を試してみました。
