普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。 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/ほりでー 多摩美術大学を中退後、デザイナーとしてグラフィックデザイン・Webデザイン・UIデザインを経験。デザイン業務の傍らSassやJavaScriptのプログラミングを学ぶ。2015年、フロントエンドエンジニアとしてLIGに入社。現在エンジニアとしてのキャリアを積んでいるところ。 LIG入社時にあだ名が『ほりでー』に。それ以来、毎日がホリデーです。 作業環境 メインOS: Mac OS X IDE: IntelliJ IDEA エディタ: TextWragnler シェル: zsh キーボード: HHKBPro2(無刻印) 椅子: Hermanmiller Aeron Chairs/KOPLUS bodyflex 関連リンク Facebook/Twitter: 気になるニュースをコメント付きで随時投稿 GitHub: OSSプロジェクト Slideshare: 勉強会スライドなど flickr: 過去に撮影した写真作品など LinkedIn: あんまりちゃんと書いてない 登壇・執筆実績 Qiita: Web系の技術記事を投稿（2014年〜） LIGブログ: 比較的ライトな技術記事を月1ペースで公開（2016年〜） STDIO上野 by LIG: レスポンシブウェブデザインをテーマとした特別授業を定期的に担当しています（2016年〜） シートで簡単チェック！ デザイナーが見落としがちなUIデザイン12の想定漏れ（2017年06月06日） LIGブログで記事を公開しました。 【完全保存版】シートで簡単チェック！ デザイナーが見落としがちなUIデザイン12の想定漏れ Webエンジニアが考えた絶対に寝坊しない4つの対策。信頼性設計を身近な課題に応用しよう（2017年06月05日） LIGブログで記事を公開しました。 Webエンジニアが考えた絶対に寝坊しない4つの対策。信頼性設計を身近な課題に応用しよう textlintで日本語の自動校正サービスを作ってみた！ (2017年03月14日) LIGブログで記事を公開しました。 textlintで日本語の自動校正サービスを作ってみた！ | 株式会社LIG なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ (2017年02月20日) LIGブログで記事を公開しました。 なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG がんやHIVの研究に貢献できる「ボランティアコンピューティング」の始め方 (2017年01月17日) LIGブログで記事を公開しました。 がんやHIVの研究に貢献できる「ボランティアコンピューティング」の始め方 | 株式会社LIG iOSアプリWorking CopyとTextasticでGitが使えるモバイル開発環境を作る (2016年12月12日) LIGブログで記事を公開しました。 iOSアプリWorking CopyとTextasticでgitが使えるモバイル開発環境を作る | 株式会社LIG LIGFE’S powered by LIGSHIP (2016年11月08日) LIGが開催するエンジニア向け勉強会を企画・ファシリテーションしました。 【20:00スタート】LIGフロントエンドのJavaScript事情を全部話しちゃう会! - connpass JetBrainsのIDEでもっとGitを使いこなそう！ 意外と便利なGUIから使える小技 (2016年11月07日) LIGブログで記事を公開しました。 JetBrainsのIDEでもっとGitを使いこなそう！意外と便利なGUIから使える小技 | 株式会社LIG マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ (2016年09月30日) LIGブログで記事を公開しました。 マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ | それいけ！フロントエンド 復活したAdobe CC Extract! その終了から再開までの経緯 (2016年09月09日) LIGブログで記事を公開しました。 復活したAdobe CC Extract! その終了から再開までの経緯 | それいけ！フロントエンド づや会 vol6 〜GCPの話〜 (2016年06月16日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: DockerコンテナをGKEでクラスタリングしてみた イベント告知: づや会 vol6 ~GCPの話~ フロントエンドエンジニアの勉強会「LIGFE’S」を開催しました (2016年06月07日) LIGブログで記事を公開しました。 フロントエンドエンジニアの勉強会「LIGFE’S」を開催しました | LIGプレス 使いこなそう！ テンプレートリテラルとimport/exportステートメント (2016年05月26日) LIGブログで記事を公開しました。 使いこなそう！テンプレートリテラルとimport/exportステートメント | ES6のある星に生まれて づや会 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の話~ Yeomanで自動化！ 自作generatorの作り方 (2016月11日) LIGブログで記事を公開しました。 Yeomanで自動化！自作generatorの作り方 | 株式会社LIG 本当の初心者向け！ Git入門のための概念から基本用語まで (2016月01日) LIGブログで記事を公開しました。 本当の初心者向け！Git入門のための概念から基本用語まで | Git編：一歩踏み出すフロントエンド入門 づや会 vol2 ~Dockerの話~ (2016年02月15日) LIGが開催するエンジニア向け勉強会に登壇しました。 発表スライド: Dockerで楽しむ自宅サーバ イベント告知: づや会 vol2 ~Dockerの話~ WebDesigning 2016年02月号 連載『課題解決のためのUI実装講座』を共同執筆しました。Sassを利用したスプライト画像の実装テクニックについてご紹介した内容です。 GoogleBooksから閲覧できます: Web Designing 2016年2月号 - Google ブックス サンプルデータのダウンロード: サンプルデータ｜WD ONLINE 非リアなのに、いきなりプレゼン!? 社外勉強会の登壇に向けて対策した6つのこと (2016年01月25日) LIGブログで記事を公開しました。 非リアなのに、いきなりプレゼン！？社外勉強会の登壇に向けて対策した6つのこと | 株式会社LIG 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次元的にアニメーションする表現を試してみました。
