社内勉強会資料。Web制作では、システム開発に比べ、上流工程が軽視されがちな印象を持っています。このスライドでは、上流工程とは何をするフェーズであるのかを、システム開発の一般的な工程であるVモデルを軸に紹介しています。 スライド スライド(一部)
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日
先日の出張で、フィリピンのセブ・シティにあるいいオフィス・セブ(iioffice CEBU)を視察した。5日間の滞在中、何日かを実際にワーキングスペースとして使ったり、現地開催のイベントを見学したりしたため、その時の感想や、利用する上で参考になりそうなことを記載する。 いいオフィス・セブとは いいオフィスセブとは、東京・上野にあるコワーキングスペースいいオフィスの海外版であると共に、LIGのフィリピン支部としての役割を持ったオフィススペースだ。 セブ島にコワーキング＆シェアオフィスを作ります | セブ島日記 セブ島にみんなで参加できるコワーキングスペースを作りたくて、クラウドファンディングを始めました | セブ島日記 いいオフィスCEBUがついに完成しました！Just opened iioffice CEBU Yeah!!! | セブ島日記 設備・内装 まず、前提としてフィリピンは発展途上国であり、社会インフラが日本に比べてかなり弱い。また、文化的な違いからトイレなどの設備も大きく常識が異なっている。詳しくは前回のブログ記事を参照。 ITエンジニアがフィリピン・セブ島に出張した感想 このような過酷な環境の中で、日本と同じくらい仕事に集中できて、内装が日本人好みで、Wi-Fiが高速で、日本語が普通に通じて、トイレも綺麗、虫も出ない……。そんな環境は、おそらくセブ・シティには中々見つからないだろう。 慣れないフィリピンの環境に戸惑う中、いいオフィス・セブの中だけは日本と変わらない安心感で作業をできた。 混沌とした東南アジアの街へ上野のいいオフィスが切り抜かれてきたかのようだ。 上野のいいオフィスと同じ雰囲気 内装の雰囲気は、実際に行ってみるととよく似ている。 写真だと分かり辛いが、本家のいいオフィスとも似た暗めの照度となっていて、ゆったりとした気分で作業ができる。 写真：夜になると独特のムードがある キッチン いいオフィスの特長の1つは、利用者が自由に使える広々としたキッチンだろう。 これはいいオフィス・セブでもちゃんと用意されていて、調理道具も揃っている。 ただし、残念ながらフィリピンの水道水は飲むことができない。その代わりにウォーターサーバーが用意されていて、利用者は自由に飲むことができる。 写真：露天で手に入れたマンゴーを切るヤスタカ氏 イベント開催にも対応 滞在中はCEBU.rbという、Ruby開発者向けのイベントが行われていた。 上野のいいオフィスでも様々なイベントが開催されているが、いいオフィスセブではCEBU.htmlなど、IT、Web関係のイベント開催に力を入れているようだ。 参加者は現地のフィリピン人エンジニアや日本人も参加しており、言葉は全て英語。初めて英語圏のITイベントを見学する経験が得られた。 写真：deviseというRuby gemについて紹介する発表者 トイレ フィリピンでは気になるトイレ。 いいオフィス・セブのトイレは便座もついているし、日本人スタッフが管理しているのでとても清潔だった。ウォッシュレットは付いていないものの、今のところ紙を流しても問題ないとのことだった。 Wi-Fi速度 特に日本と遜色ないスピードでインターネットが使え、非常に快適だった。フィリピンのインターネット速度は全体的に遅いため、これは助かった。 WiFi環境抜群！セブ島のコワーキングスペース【iioffice】 | YOLO その他の設備 これ以外にも、ホワイトボードのある大小2つのミーティングスペースや、仕切りで隣の人と区切られたブースも用意されている。 立地・アクセス・付近の治安 いいオフィス・セブは、外資系のオフィスが軒をつらねるセブ・ビジネスパークからは少し離れたところにある。 写真：ビジネス街のセブ・ビジネスパーク。ここにいいオフィス・セブは無い セブ・シティのCapitalと呼ばれている市庁舎の近くに、いいオフィス・セブはある。 このあたりはアップタウンと呼ばれる地域で、危険度の高いダウンタウンと比べて治安の良い地域になっている。 また、ビルの一階には24時間ショットガンを持った守衛さんもいるので安心感はある。 (ただ、夜になると現地人が大声ではしゃぐため、周りが騒がしくなることはった。基本的に害は無いのだが、付近のホテルに泊まった同僚からは苦情もあった) タクシー運転手への伝え方 フィリピンのタクシー運転手は行き先を伝えても知らないことが多い。いいオフィス・セブは最近できたばかりなので、直接住所を見せてもまず知らない。 住所: ARINDA V. PARAS BLDG, Don Gil Garcia St, Cebu City, Cebu, この時、すぐ隣にある“Shamrock”というお店に行きたいと伝えるのが良い。 Could you take me to Shamrock near Capital? と言えば、ほとんどの場合分かってくれる。 このShamrockというお店は地元では有名らしい。しかし、いくつか店舗がある為、他のShamrockなのか聞かれることもある。その時は “in front of Capital” とか “near Seven-Eleven” と言えばまず間違いない。 しかし、1度だけShamrockを知らない運転手もいた。念の為Capital付近の地図を印刷しておくと更に安心できる。 地図：中央がiioffice cebu。すぐ北にある大きな施設がCapital。東の方に車で15分ほど行くとビジネスパークがある Shamrockはおみやげ屋としても優秀 Shamrockの店内には、丁度おみやげに丁度良いドライマンゴーのパックやおかしが売られている。空港で買うと全く同じ商品が数倍になっていたりするので、日本へのおみやげもここで揃えられるのが嬉しい。 利用料金 iioffice CEBUのFacebookページへ、最新の価格が掲載されている。 現時点では 1日利用300ペソ 月額利用4000ペソ という価格が設定されている。 近くにある施設 いいオフィス・セブ自体には食事を提供するサービスはない。しかし、すぐ隣にコンビニや日本料理店があるため、お昼ごはんには困らなかった。 徒歩15秒に日本料理店 Nagomi Restaurant -和み- いいオフィスのスタッフもよく利用しているらしい。 徒歩30秒にセブンイレブン フィリピンのセブンイレブンは、日本で言うとミニストップのような業態となっていて、必ず店内に飲食スペースがある。(法令でそうなっているらしい……?) 肉饅的なものが25ペソ(約50円) サンドイッチが80ペソくらいだったような 雑なお弁当のようなものが100〜150ペソくらいだったような うろ覚えだが、日本基準で考えると食べ物は安い。味もまずまず。 徒歩3分に日本料理店 Hotel Asia〈ホテルエイシア〉セブ島 日本の家庭料理と快適な環境 経営者が日本人のHotel Asiaというホテルがすぐ近くにあり、その中にも日本料理店がある。250ペソ〜くらいの、日本の定食屋とあまり違わない価格帯ではあるが、日本人の舌に合うおいしい料理を楽しむことができた。フリーWi-Fiもあり、そのスピードには定評がある。 感想 慣れないフィリピンの環境で、日本と同じ安心感が得られるのはとてもありがたかった。 もし近くまで留学や仕事で赴くことがあれば、ぜひ一度立ち寄ってみてほしいポイントだと思う。
つい先日、LIGがフィリピンのセブ・シティに立ち上げたコワーキングスペース「iioffice Cebu」へ出張に行った。 これまで、海外旅行といえば子どもの頃にハワイとグアムくらいしか行ったことがなかった。成人してから初めての渡航、それも発展途上国へということになる。 セブ・シティはリゾート地ではない セブ島と言うとまずリゾート地のイメージを持つが、多くのリゾート施設は空港のあるマクタン島という場所に集中している。 マクタン島はセブ・シティから車で30〜40分程度の位置にあり、現地の人にとっては田舎というイメージらしい。 セブ・シティ自体は、リゾートというよりは普通の町だ。そして、一部の富裕層地区を除くとガチャガチャとした町並みに見える。 治安は比較的良好で、特に外資系の企業やホテルが多く林立するビジネスパークや、アップタウンと呼ばれる地域は、昼であれば危険はほぼない。 といってもそれは海外基準での意味であって、東京と比べるとはるかに犯罪の危険も高い。 写真: セブビジネスパークの周辺 宿泊先はAirbnbで予約 セブの滞在費は非常にリーズナブルで、安めのホテルであれば1泊2000円台で朝食付きの部屋に泊まることもできる。その上、ちょっと奮発して4000円〜1万円も出せば、ビジネスパークの近くにある高級コンドミニアムや、そこそこ立派なホテルにも宿泊できる。 日本だとちょっと箱根や軽井沢に行けば1万円で済まないことも多い。安く泊まるにしても贅沢するにしてもコスパが良くて嬉しい。 自分の場合、フィリピンに行ったら必ず見かけるというゴキブリの存在がものすごく嫌だったので、最初からビルの上の方にある部屋、水まわりが綺麗そうな部屋を探したかった。 フィリピンは日本で体験できないワールドが広がる害虫天国 : フィリピンと車いじり セブ島の語学学校に生息する虫まとめ Airbnbでセブ・シティを検索すると、ビジネスパークのコンドミニアムを貸し出しているホストが結構たくさんヒットする。ビジネスパークに住んでいる人は富裕層や投資目的の外国人が中心なので、日本でたとえると都心のタワーマンションみたいなものなのかもしれない。 結局、Calyx Residenceという高級コンドミニアムの一室へ宿泊することにした。高級といっても1泊4000〜5000円程度なのがすごい。 CR20N オープニングプロモ!最高の景色が楽しめるインフィニティープール!充実のジム!最高級コンド - 借りられるコンドミニアム - セブ市 CALYX RESIDENCES | Cebu Business Park Condominium Tower Calyx Residenceの施設 Calyx Residenceは「カリクス・レジデンス」と発音するようだ。高級なだけあって設備やセキュリティは充実している。 24時間フロントに銃を持った警備員が待機 深夜のチェックインにも対応 頼めばタクシーも呼んでくれる ロビー階に共有のジム、屋上の28階に共有のSky LoungeとInfinite Pool付 a.m.6:00〜p.m.8:00まで自由に使用可能 ラウンジからはセブ・シティが一望できる アヤラモールまで送迎を呼べるらしい(使ってないので不明) キングサイズのベッド 無料Wi-Fi・食器・調理器具・コンロ・冷蔵庫・電子レンジ・テレビ付き 内装は流石に綺麗だ。Wi-Fiもまずまずの速度で繋がり、とても助かった。 ただし、細かい部分を見ると結構フィリピンクオリティなところもある。また、フィリピン全体の問題として、水まわりのインフラが弱いところは付きまとってくるようだ。 時間帯によって、なぜか洗面所に下水の匂いが漂う シャワーの圧が弱め(日本でもたまにあるくらいの弱さ) 他の安いホテルの人の話を聞くと、もっと酷いのもたくさんあるとのこと なぜか洗面所だけ照明が暗い 目地など、細かい所の作りが粗い 懸念していた虫については、ごく小さな虫が飛んでいたこと以外は見かけることもなく、快適に過ごすことができた。(地上20階) 驚くべきフィリピンのトイレ事情 空港や高級ホテル、日本人向けの施設などは別だが、フィリピンの一般的なトイレの使い方は、日本とかなり違っている。 下水が細く、紙が溶けにくいため、基本的に紙を流してはいけない 据付のゴミ箱に捨てる 便器の横にあるシャワーホースのような物は、手動ウォシュレットとして使うもの ものすごく水流が強いので、はねるのに注意する 便座のないトイレが普通 和式のように上にのってしゃがんで使うか、空中椅子で使う そこそこ大きいショッピングモールでもこれがデフォだったりする 日本人なら、これを聞くだけでフィリピンに行きたくなくなってしまうかもしれない。どうしても現地流のトイレが嫌であれば、滞在先についてはよく検討した方がよいだろう。 （なお、いいオフィス・セブのトイレには便座が付いていて、今のところ紙を流してもOKなのでご安心を！） 少し田舎の方に行くと手桶でおしりを洗ったり、手動で水を流すタイプのトイレも普通であるらしい。 これで解決！フィリピン語学留学、女子トイレ攻略法 | 俺のセブ島留学 日本人が必ずぶちあたるフィリピンのトイレ問題を華麗に克服しよう | フィリピンで農業に生きる青年の日記 移動はタクシーで セブ・シティでの移動手段は、現地の人が使っているジプニーという乗合タクシーのようなものと、外装の白いタクシーが中心となる。 ジプニーは外国人にとっては上級者向けの移動手段となるため、普通はタクシーへ頼ることになる。 このタクシーは、常に視界のどこかを走っているのが見えるほど、セブ・シティの至るところを大量に走りまわっている。掴まえるのは簡単だし、ホテルのフロントで呼んでもらえばすぐにやってくる。 料金はメーター制で、初乗り40ペソ。空港から市内までが200〜300ペソ。ビジネスパークからいいオフィスのあるCapital付近まではせいぜい70〜80ペソといったところだ。まれに、空港などの遠方の場合は事前に値段を交渉してメーターを回さずに行くこともあった。 ※ちなみに、今のレートでは100ペソが210円程度の価値 このタクシーについても、いくつか注意することがある。 細かいおつりをドライバーが持っていないので、少額紙幣が必須 1000ペソ札などは嫌がられるので、コンビニやモールでお金を崩しておくと良い ドライバーによっては細かいおつりをくれないこともある 行き先を言っても知らないことがあるので、住所や地図を見せたり、付近のランドマークを指定する場合がある 当然ドアは自動では開かない たまにメーターをまわさない人がいるらしいので、その時はまわしてもらうよう指摘する しかし、ぼられたり、変なところにつれていかれる、ということは滞在中なかった セブ・シティは道が悪く、交通マナーも適当だ。日本人が徒歩で移動するのは辛い(道の横断もままならない)。 好む好まざるを問わず、滞在中はタクシーの使い方に慣れる必要がある。 フィリピンの『タクシー料金』と『乗車の際の４つの注意点』 | フィルポータル 過密で混濁とした東南アジアの町並み セブ・シティの町並みは、日本の景観とは大きなギャプを感じるものだった。 ものすごいボロ屋が普通に沢山ある かと言えば新築の綺麗なビルや外資系のお店も時々ある 異常に食べ物屋が多く、たくさんの人が道路脇の店でたむろしている 道路が車と人であふれかえっている 道は奪いあいで、クラクションの使用頻度が30秒に1回くらい 昼夜を問わず、何もせず道路脇にたたずんでいる人が多い 信号が少なく、そして一度赤になると異常に長い 舗装が雑で、いたるところに大きな窪みがある 日本の町も決して整然としてはいないので、どこか日本っぽく見えるところもなくはない。ただ、あらゆる物が適当で雑で過密、というのが大きく違う。 最初の1日は道路を横断するタイミングが掴めなかったが、現地人のマネをして一緒に渡ろうとすると上手く道を渡れた。戸惑ったときは周りの現地人についていくと良いかもしれない。 自分の身を守る 現地人のほとんどの人は質素な無地のTシャツ（なぜか白色は少ない）とズボンを履いて手ぶらで歩いているので、柄や線が入っているシャツやワイシャツ、腕時計、アクセサリーなど、少しでもファッション性のある洋服を着たり、鞄を持っているだけでも周囲から浮いてしまう。 強盗やスリの危険を考えると、おしゃれな服を着たり、路上でスマートフォンやカメラを持ち出すのは、あまりやらない方がよさそうだ。 また、フィリピンではなぜか、何もしないでただ立っていたり、バイクを止めてたたずんでいるだけの現地人がたくさんいる。 これが夜になると結構怖いのだ。 意外と、ビジネスパークも端の方に行くと人通りが少なく、暗いところがある。Calyx Residenceの周りは正にそんな環境だった。 こういったところで道路脇へバイクにまたがったままたたずんでいる人を見ると、無害なのか、危険なのかが旅行者には分からない。 無理をせず、徒歩数分の距離でも夜はタクシーでの移動をした方が良いかもしれない。 もっとも、慣れている人に聞くと、夜のマンゴーストリートなどへ撮影しに行っても大丈夫だった、という話も聞いた。 海外の治安は場所を少し移動するだけでも違うので、自分の判断でどこが安全なのかを考えて行動するべきだろう。 セブの治安情報をフィリピンで強盗に遭った僕がまとめました | フィルポータル 感想 初めて東南アジアの国に旅行をし、軽いカルチャーショックを受けた旅になった。 日本も昔はフィリピンみたいな時代があったのかもしれないとか、日本人がフィリピンに行くと自動的に金持ちになってしまうところとか、初めてストリートチルドレンを見たりして、考えさせられることも多くあった。 しかし、宿泊先さえ納得できる水準の場所を押さえておけば、意外と普通に過ごせるとも思う。どうせ移動はほとんどタクシーなのだ。
社内勉強会資料です。Vol.1では、Redmine以前の問題として、業務を文書ベースで整理することの必要性を説明し、できるだけ多くの人に納得してもらうことを目的とした内容になっています。 なぜ組織にはドキュメンテーションが必要なのか 想定される反論 ドキュメンテーションを定着させるために何をすれば良いか ドキュメンテーションの定着によって 可能になること Redmineのような便利なシステムを導入しても、実際にしっかりとチケットに情報を残してくれたり、Wikiを更新してくれる人は自然と限られてくるのではないでしょうか。 このスライドでは、できるだけ多くの人にドキュメンテーションを浸透させたいという想いのもと、誰にでも納得できるような内容でまとめています。 スライド スライド(一部)
づや会 vol6 ~GCPの話~の登壇資料です。Google Container Engine (GKE)を使い、ローカル環境で作ったDockerコンテナを、Kubernatesでクラウド環境にデプロイするまでの手順や、つまづいた部分などを紹介します。 ※イメージ写真として足成で公開されている工藤隆蔵さんの作品を使用しています。 スライド スライド(一部)
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っぽいタイポグラフィって恰好良いよな〜、という思いでとりあえず作ってみました。
TinyTextMinerとRによる、はじめてのデータマイニング づや会 vol5 ~機械学習の話~登壇時の資料です。LIGブログの記事を元にテキストマイニングしてみました。 スライド LIGブログのいくつかのメンバーの記事を対象に、TinyTextMinerとR言語を使って頻出単語の無向ネットワーク分析グラフを作成しました。 やっていることはほとんどテキストマイニングツール TTM (TinyTextMiner) の理念と使い方 (PDF)と同じ内容です。 また、スライド31ページ目の「意味のない単語は辞書を鍛えてフィルタリングする必要がありそう」という内容について、づや会参加者のScenesK様から以下のコメントをいただきました。 テキストマイニング(ほりでーさん)に関して。以前、ニュース記事をベクトル化してコサイン類似度から類似記事を見つけるということをやったのですが、その際TF-IDF(https://ja.wikipedia.org/wiki/Tf-idf) という指標を用いました。このTF-IDFかIDFのみを使えば、あまり意味のない単語を自動で除外できるのではないかと思います。あと、word2vecというのを使って単語をベクトル化すると、単語同士の距離から似ている単語をまとめられるかもしれません。こちらはやったことないので推測です。以上、参考まで f^_^; http://lig.connpass.com/event/30420/ 意味のない一般形な単語を自動でフィルタリングできる指標があるようですね。有益な情報をありがとうございます! (私にはまだ使いこなせなさそうですが……) 参考リンク R言語: R: The R Project for Statistical Computing RStudio(R言語のIDE): RStudio – Open source and enterprise-ready professional software for R TTM: TTM: TinyTextMiner β version TTMのチュートリアル: テキストマイニングツール TTM (TinyTextMiner) の理念と使い方 (PDF) Rサンプルコード CSVからネットワーク分析グラフを出力するコード ほとんどテキストマイニングツール TTM (TinyTextMiner) の理念と使い方 (PDF)と同じ内容です。 # igraphパッケージをあらかじめインストールしておく library(igraph) # エクセルで保存したCSVファイルを想定したエンコーディングです sna <- read.csv("target_ttm5.csv", header=T, row.names=1, fileEncoding="CP932") sna <- as.matrix(sna[1:30,1:30]) diag(sna) <- 0 sna[sna>=1] <- 1 sna.g <- graph.adjacency(sna, mode="undirected") V(sna.g)$names <- rownames(sna) # グラフ描画 plot(sna.g, vertex.label=V(sna.g)$names, layout=layout.fruchterman.reingold) .Rprofile ~/.Rprofileとして保存してRStudioを再起動すると日本語グラフが文字化けしないで作れるようになります。 setHook(packageEvent("grDevices", "onLoad"),function(...) grDevices::pdf.options(family="Japan1")) setHook(packageEvent("grDevices", "onLoad"),function(...) grDevices::ps.options(family="Japan1")) setHook(packageEvent("grDevices", "onLoad"), function(...){ # 本当はセリフ書体が入るが、見た目の好みでサンセリフ体 grDevices::quartzFonts(serif=grDevices::quartzFont( c("Hiragino Kaku Gothic Pro W6", "Hiragino Kaku Gothic Pro W6", "Hiragino Kaku Gothic Pro W6", "Hiragino Kaku Gothic Pro W6"))) grDevices::quartzFonts(sans=grDevices::quartzFont( c("Hiragino Kaku Gothic Pro W6", "Hiragino Kaku Gothic Pro W6", "Hiragino Kaku Gothic Pro W6", "Hiragino Kaku Gothic Pro W6"))) } ) attach(NULL, name = "MacJapanEnv") assign("familyset_hook", function() { if(names(dev.cur())=="quartz") par(family="serif")}, pos="MacJapanEnv") setHook("plot.new", get("familyset_hook", pos="MacJapanEnv")) 文字化け問題で参考にしたサイト R - 事始め Rとウェブ解析:MACでグラフの日本語文字化けを防ぐ簡単な方法 不正なマルチバイト文字に七転八倒した。 - R七転八倒 png/jpgなどにplotする際に適切に日本語文字列を描画する - Qiita mac OS版 Rのplotで日本語表示をしてみた｜刻苦勉励 - share my ideas and experiences - 須通り_統計_Rにおける作図時のフォント設定を極める コメント テーマが機械学習ということもあり、今までで一番ネタ探しが難しいづや会でした。ほんとうはDeepDreamをいじってみたかったのですが、Python(の依存管理)が難しすぎて断念。代わりに以前から興味のあったテキストマイニングに挑戦してみました。 ちなみに、たまたま最近読んだ社会学系の論文では、Twitterのテキストマイニングから仮説の検証を行っていて驚きました。既に色々な分野で活用されている技術なのですね! スライド(一部)
WebサイトやSNSへのリンクの転載 当サイト(media-massage.net)内の全てのページの「タイトル」「URL」「本文の一部」は、自由に転載できます。 その他の部分の二次利用について 当サイトのオリジナルなテキスト・画像・動画・音声コンテンツは、 クリエイティブ・コモンズ 表示 - 非営利 4.0 国際 ライセンスの下に提供されています。 以下のルールを満たすことで、事前の承諾なく当サイトのコンテンツを元に新しい作品を作ったり、他の媒体へ転載できます。 禁止事項 クリエイティブ・コモンズ 表示 - 非営利 4.0 国際 ライセンスで 許可されていない利用形態では、作者の許可なく二次利用することはできません。 利用できない形態の例には次のようなものがあります。 適切なクレジットを表記しない二次利用 許可されていない営利目的の二次利用 営利目的の作品の素材として、許可なく使用すること クレジット表記方法 以下をすべて満たした表記を、転載したコンテンツの近くに記載してください。 著者名の表記(「堀 祐磨」「Yuma Hori」のいずれか) 著作物のタイトル 転載元へのリンク(ハイパーリンクかURL全文のいずれか) ライセンスの適用範囲 当サイト「media-massage.net」内に存在するオリジナルなコンテンツ ライセンス適用範囲に含まないもの 以下の部分にこのライセンスは適用されません。 ライセンスが通常とは異なることが、そのページ内で明記されている部分 他の著者の作品を転載している部分(転載されている作品の利用条件が適用されます) 当サイト内に表示されていても、その実体が外部のWebサービス上に存在する部分(そのサービスでの利用条件が適用されます) Amazonアフェリエイトによって表示される書籍の画像 YouTube、Vimeo、Twitterなど、外部サービスのコンテンツを動的に引用しているもの SlideShareやSpeakerdeckのスライド資料など 引用について 適切な引用に当たる場合は前述の条件に関わらず、当サイトのコンテンツを使用することが可能です。 ただし、以下のような場合は引用として認められません。 適切な引用元を表記しない転載 必然的かつ適切とは言えない文脈で、引用であることを主張して転載すること
社内勉強会用に作成したスライドです。メディアアート的な映像表現を得意とする開発環境「Quartz Composer」の特長をWebフロントエンド向けに解説した内容となっています。 また、本スライドの内容を更に発展させた記事をLIGブログにも掲載しています。 マウスで3DCGをプログラミング！ 無料ツール「Quartz Composer」でHello World！ | それいけ！フロントエンド スライド デモ作品 iTunes Music Visualizer #1 参考リンク 未来派図画工作 KanoLab Origami — Design Prototyping インタラクティブデザインプロトタイピングのためのFacebook Origami QuartzComposerでiOSアプリプロトタイピングする必要があるのか #vgadvent2014 - Qiita Quartz Composer + Facebook Origamiでインタラクティブなスケッチのススメ 株式会社レインボー・ジャパン スライド(一部)
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作品で一番ダイナミックに動くものが完成した。こういう作品ももっと作ってみたいな〜
づや会 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へ投稿したカスタマーレビューを元に加筆・修正したものです。
