プログラミングが出来なくても簡単!ARコンテンツの作り方【導入編】

九州先端科学技術研究所(通称ISIT)にお勤めしている@Taka_Yoshinagaさんとご縁があって、ARコンテンツの作り方についてあれこれ教えてもらいました。

「え!こんな簡単にARってつくれちゃうわけ!?」と驚くことが多かったので誰かに伝えたくなりました。

何回かにわけて公開しますが今回はタイトル通り、プログラミングの知識がなくてもAR技術を使ったコンテンツが簡単に作れますよという内容です。

しかも使用するツールは全て無料。こんなノウハウを惜しみなく教えてくれるなんて、ありがとう@Taka_Yoshinagaさん、すごいよISIT、さすが先端科学研究所というだけあります!

さて、さっそく本題に入ります。

ARブラウザのインストール

インターネットを見るときはIEやChromeなどのブラウザを通してコンテンツを閲覧します。

ARコンテンツを見る場合にはARブラウザが必要なので、今回はjunaioというARブラウザをインストールします。

junaio

Android app on Google Play
よく使われるARコンテンツって専用アプリにコンテンツごと含まれていると思うのですけど、junaioはブラウザ(閲覧ソフトウェア)なのでコンテンツ自体はQRコードを使ってダウンロードします。

この辺は実際使ってみてもらうとわかりますが、いちいちコンテンツごとにアプリをインストールする手間がなくなります。

junaioはブラウザであると同時にARコンテンツのプラットフォームと考えることもできますね。

インストールが完了してjunaioを立ち上げるとチュートリアルが始まるので進めるかスキップしてください。

デフォルトの表示では位置情報を利用したARコンテンツが表示されるはずです。さっそくほかのARコンテンツを読み込んでみましょう。

junaio_start

画面右上に見える「scan」アイコンをタップして下のQRコードをスキャンしてください。うまくいくとコンテンツのダウンロードが始まります。

ar_sample01

ここでダウンロードされるのは大まかに説明すると次の2つのデータです。

  • 「このマークに反応してコンテンツを表示しますよ」というマーカー情報
  • 「コンテンツの形、位置、内容や動き」をまとめたコンテンツデータ

ではコンテンツのダウンロードが済んだらjunaioを起動したまま下の画像にカメラを向けてみてください。

ar_sample02

どうでしょうか?次の画像のようにメタイオマンが表示されたはずです。

metaioman

このようにjunaioというARブラウザで簡単にARコンテンツを利用できます。他にもjunainoの操作画面左上にある検索メニューから、ネットに登録されているコンテンツをたくさん利用できるので試してみてください。

次は実際に自分でARコンテンツを作ってみましょう。

ARコンテンツを作る準備をする

ARコンテンツを作る前に、junaioへのアカウント登録と、ARコンテンツを作るためのソフトウェアmetaio Creatorをインストールが必要です。

それぞれの登録・インストール方法については下記サイトを参照してください。

第2回 ARコンテンツを作ろう:コンテンツ作成ツール~metaio Creator~: 雑記ノート

metaio Creatorインストールしてから、junaioのアカウントと連携させるのを忘れないようにしましょう。

ARコンテンツを作ってみよう!

まずはマーカーを登録する。

今回はカメラをマーカーにかざすと画像がARで表示されるという基本的なコンテンツを作ってみたいと思います。
前ステップでインストールしたmetaio Creatorを起動してください。

metaio01

metaio Creatorが立ち上がったら上の画像の丸印のとこをクリックしてください。

metaio02

この画面が出たら「Image Tracking」を選択して「OK」をクリックします。

ファイル選択のダイアログが開くのでマーカーにしたい画像を選びましょう。今回はサンプルのマーカー用画像を用意しているので使ってください。

マーカー画像のサンプルはこちら

画像の登録が済むと画面下のほうにマーカーが表示されます。

metaio03

表示されるコンテンツを追加

metaio10

画像の丸印をつけた部分をクリックしてください。

ファイル選択用のダイアログが開くので画像を選択してください。すると画面に選択した画像が追加されます。今回はサンプル画像を用意したので使ってみてください。

サンプル画像はこちら

画像の登録がすむとmetaio Creatorの画面でAR表示される画像が確認できます。次はこのデータをサーバにアップしましょう。

metaio04

作成画面にあるプルダウンが「New Channel」になっていることを確認して、「Createボタン」をクリックしてください。

metaio05

こういうダイアログが開くので適当に名前を付けましょう。今回はAR_testとしました。他の項目は空欄で構いません。
コンテンツに名前をつけてcreateボタンをクリックするとコンテンツデータがサーバにアップされます。

metaio06

少し時間がかかりますが、アップロードが終われば作成したコンテンツの登録が完了です!

作ったARコンテンツを実際に見てみる

metaio Creatorにデータアップロードが済むとQRコードが表示されます。

metaio07

それではスマホ、またはタブレットでjunaioを起動してこのQRコードをスキャンしましょう。データのダウンロードが始まります。

コンテンツのダウンロードが終わったら当サイトの左側にいるキリンさんにカメラをかざしてみてください。

下の画像のように表示されれば成功です!

ar_kirinblog

コンテンツ表示のサイズや位置を調整したいときはmetaio Creatorで編集できます。修正をしたらUploadボタンでサーバにアップしなおせばOKです。

コンテンツの登録は同じ要領でできますのでお好きな画像で試してみてください。

ARコンテンツを残したり、消したりする

コンテンツを保存するときはmetaio Creator左上メニューのFile→Save projectを選択します。ダイアログが開くので保存場所と名前を指定すれば保存されます。

metaio08

コンテンツの削除をするときはQRコード付近のプルダウンで対象のプロジェクトを選択して(i)ボタンをクリックしてください。開いたウィンドウのDelete this channelで削除ができます。

動画コンテンツもARに出来る!

metaio Creatorでは画像以外にも音声ファイルや動画ファイルなどを利用したコンテンツも作成できます。

動画を登録するときは下の画像のようにビデオアイコンをクリックしてファイルを選択します。

metaio09

基本的な流れはこれまでと変わらないので、下記の流れを踏まえて登録していきましょう。

マーカーの登録

表示されるコンテンツの追加

データのアップロード

junaioでQRコードをスキャン

カメラをかざして表示

どうでしょうか?動画がAR上で再生されますね。

お手軽にARコンテンツが作れた!

ここまでで思ったより簡単にARコンテンツが作れることがわかってもらえたと思います。

ツールを使えばパソコンとスマホだけで気軽にAR制作の世界へ入っていけます。

こんな便利なツールがあったなんて。。。
教えて頂いた@Taka_Yoshinagaさんありがとうございます。

というか今回の記事も下記の@Taka_Yoshinagaさんのブログを参考にさせて頂き、ほとんど内容かぶっているのですよね。。。もちろんきちんと許可はとってから公開します。

第1回 ARコンテンツを作ろう:junaioを使ってみる
第2回 ARコンテンツを作ろう:コンテンツ作成ツール~metaio Creator~
第3回 ARコンテンツを作ろう:ARコンテンツを作ってみる①

ISITでは今回紹介したAR技術の他にも多岐にわたる先端研究を行っています。興味があれば@Taka_Yoshinagaさんにコンタクトをとってみてください。

Leap motionやKinectを利用した研究などもされてるみたい。テクノロジー好きの方は退屈しないと思います!

ARコンテンツ作成については【実践編】へ続きます!

テクノロジーと人の交差点。未来を作るイベントFuture Sync Vol.3に行ってきた。

ワサ!ワサ!久しぶりのブログ更新。

5月11日に福岡の九州産業大学で行われたIT系のイベント「Future Sync Vol.3」に行ってきました。

(今回ブログを書くにあたり、カメラマンのたいしょーくん(@taisho_jp)が撮影した写真の使用を許可して頂きました!彼が撮った写真にはキャプションつけてあります。たいしょーくん素敵な写真をありがとう!)

Future Syncってどんなイベント?

下記、イベントサイトからの引用になります。

『Future Sync』は、ITに関わる様々な人々が集い、近い未来について語り合うトークイベントです。

それぞれが別々に思い描いている「近い未来(Future)」 について語り合い、

それらを多くの参加者と「同期(Sync)」することで理解を深め合いながら、

新たな可能性・アイデア・ 閃きを得られる大きな出会いの場にすることを目指します。

WEBや映像、アニメーションやARなどITを駆使したものづくりに関する話題を中心に、都市設計やUX、コミュニティづくりなど幅広いテーマでその第一線で活躍する登壇者のお話を聞くことができます。

その豪華なスピーカー陣やセッション内容は下記のWEBサイトで見てみてください。

Future Sync Vol.3|分野を超え、未来について語り合うトークイベント

futuresync3-1

というわけで九産大に行ってまいりました。いつ来ても素敵なキャンパス!

ここに来るのはHTML5Carnival以来。九産大ではITイベントがよく行われているイメージです。

futuresync3-2

当日は実にお日柄もよく!

コンセプトは「知識の寄り道」

Photo by @taisho_jp
Photo by @taisho_jp

今回のコンセプトは「知識の寄り道」ということで、分野を超えた多くの専門テーマのセッションを選ぶことできます。普段自分が関わりのない分野の知識に触れることで、新たなヒントやアイデアが生まれそう。

そしてなんと学生は無料!

未来の担い手には学校の授業だけではなく、幅広いアイデアに触れてもらいたい!そんな想いが伝わってきます。

学生時代からプロフェッショナルの話しを直に聞くのはとてもいいことだし、イベントに参加した学生の世界が広がっていけばすごく意義のあることだと思います。

とはいえ30歳過ぎた僕だって色んなものを吸収してまだまだ成長していきたいわけで、社会人も学生も同じ目的で参加できるイベントって素敵ですね。

Photo by @taisho_jp
Photo by @taisho_jp

受付ではスタッフの方たちが丁寧に案内してくれました。

Photo by @taisho_jp
Photo by @taisho_jp

さていよいよ開催!

とは言っても実は僕は1つ目のセッションに間に合わなかったんですけどね。。。

当日は次のようなセッションに参加してきました。

TVアニメの企画から販売のお話し

Photo by @taisho_jp
Photo by @taisho_jp

アニメ作品リトルウィッチアカデミアなどを制作している株式会社トリガーの桝本さんのお話しでした。

アニメ制作の工程や業界の収益構造について、裏話的なことも含めて話してくれました。

DVDのようなアニメのパッケージ商品の今後や、海外での取り扱いの違い、そして桝本さんがこれから大事だと考えるビジネスモデルの話しなど、アニメに限らずコンテンツを扱うときに応用できそうな考えが多くありました。

futuresync3-7

実際に原画や背景画を見せてくれたり。

futuresync3-8

やっぱりプロって凄いですよね。。。

長編CGアニメ映画制作のお話し

Photo by @taisho_jp
Photo by @taisho_jp

続いてモンブランピクチャーズの田中さん達のお話しを聞きました。

昨年夏にロードショーされたCGアニメ映画「放課後ミッドナイターズ」制作時の苦労や、そこから得た学びについて共有していただきました。

実績を重ねて意気揚々と映画製作に乗り込んだその先は・・・?

多数のCM制作を手がけてきたなかで巡ってきた映画製作のチャンス、しかし想像を超える圧倒的な作業量に、制作体制の大幅な見直しを迫られたとのこと。その苦労話がとても面白かった。そのときの経験から作業量の見積りやワークフローを改善して、現在はより強固な生産体制が身についたそうです。

印象に残ったのは次のような話でした。

海外は技術よりも「統合力」を養うことに力を入れている。

日本人は技術に優れた人たくさんいる。

でも結局技術はお金で買えちゃうよね。

これから日本に大切なのは多様なスキルを組み合わせてプロジェクトを進める「統合力」。

大規模なものづくりになればなるほど、システマチックな管理が重要になってくる。

僕みたいな零細フリーランスでも視野を広くもって意識していたいポイントです。

モンブランピクチャーズのカッチョイイ実績の数々はWEBサイトで見ることができます。

福岡ITコミュニティのお話し

Photo by @taisho_jp
Photo by @taisho_jp

福岡のWEB制作者の間では有名人な方々によるトークセッション。

Twitterが流行りだした辺りから少しずつ活性化してきた、福岡WEBコミュニティの歴史を時系列に沿ってお話ししていただきました。

僕自身、1年前に福岡に引っ越して活動を始めたときに、福岡のWEBコミュニティの活発さに驚いたんですよね。

毎週と言っていいくらいなにかしら勉強会やイベントが行われてたりするし、それほど地方であることの技術の遅れというか、ディスアドバンテージは感じません。

こっちに来て1年経った今、贔屓目なしにしても僕は福岡のWEBコミュニティやそれを取り巻く環境は超イケてると思っています。

今回のFuture Syncをはじめ、HTML5 Carnivalや明星和楽のような大規模イベントも多く開催されるし、産学連携の取り組みも盛んに行われている気がします。

あとはものづくりに集中できる環境とか色々魅力はありますが、まあそこらへんのことは追々書きたいな、と思います。

Photo by @taisho_jp
Photo by @taisho_jp

そんな楽しいコミュニティも、今回紹介されたような先人の方たちの取り組みあってこそのものなのです。

僕は微力ながらこうしてブログで福岡という地域の良さを伝えていけたらなーと思います。

ちなみに今回登壇された皆様は実は僕が移住前にTwitterで福岡リストを作ってひそかにヲチしてた方たちでもあります。

WEB制作者で福岡移住に興味のある方は、このセッションの登壇者たちをフォローしておくと色々と勉強会やITイベントといったコミュニティ情報が拾えるのではないでしょうか。

セッション登壇者一覧

お金儲けのお話し

Photo by @taisho_jp
Photo by @taisho_jp

モンブランピクチャーズの平田さんによる、クリエイターももっとお金儲けのこと考えていけばいいんじゃない的なお話し。

ちょっと知り合いと話していて途中参加したら完全に乗り遅れました。。。

「クリエイターもプロデューサー的な考え方を意識したほうがいい、そうじゃないと悪い奴に騙されちゃう。」というお話しは大切ですね。

作れれば満足、という価値観もあるだろうけどやっぱりお金はうまく稼いだほうができることの選択肢も増える。そういう意味でも大事だと思うのです。

でもお金儲けの視点ってなかなか教わることはできない、どうやって身につけたらいいのか?という質問の回答がとても興味深かったです。

日々僕らはお金儲けの反対側、つまり消費者として生活しています。

どんな情報が購買の意思決定に影響したかは、消費者である自分自身が一番よく知っているはずなのです。

それを踏まえながら逆の立場になって、どうビジネスを組み立てるか意識して過ごせば、自然とお金儲けの視点は身につくはず、ということでした。

LT(ライトニングトーク)!!

セッションが全て終了したあとは立候補の方を募ってのLTが繰り広げられました。

持ち時間3分の中でそれぞれ活動のPRやプレゼンをしていきます。

イベントや勉強会の告知、募集をする人、

福岡で過ごした時間に対する想いを伝える人、

プレゼン上手な人も不慣れな人もどれも熱いLTばかりでした。

Photo by @taisho_jp
Photo by @taisho_jp

そして最後に全てを「破壊」していく人たち。

このLT面白いけどひどかったww

大幅な時間オーバーで強制終了されましたが明星和楽の告知もされまして、なにやら次は遠隔地との共同開催?も検討されているようなので楽しみです。

テーマは「破壊」らしいです。いいね!既存の枠組みをぶっ壊す!

Future Syncも早くもVol.4の話しが出てるとか出てないとか。

今回Twitterのホットワードでも1位を記録したらしく、大盛り上がりのイベントでしたね。

福岡の若者が殺到し、Twitterトレンド第1位に昇り詰めたトークイベント『Future Sync vol.3』当日のつぶやきまとめ!

すごく充実した内容のセッションばかりで刺激をうけまくった1日でした!

開催運営者の皆様、スタッフの皆様、登壇者の皆様、会場関係者の皆様、本当にお疲れ様でした!

以下、関連ブログ・スライドまとめです!

「ブログや資料アップしたのに載ってない」という方がいらっしゃいましたら教えてください!

参加された方やスタッフの方たちのブログです。

「Future Sync vol.3」に参加してきました! | nrjlog

Future Sync Vol.3 | Find Your Alter-Ego

Future Sync v3にいってきますた。手抜き感想ver。 – nobkzのブログ

未来を同期する。Future Sync vol.3に参加してきました。 | せせストリート7番街

FutureSync vol.3に参加しました – Firespeed

FutureSync Vol3に参加して | りぐん怪獣じゃないもん!

セッション内容の資料です。

大濠公園の草笛教室で草笛を教えてもらった話し

福岡に住んでいて、僕のお気に入りスポットに「大濠公園」という場所があります。

なんというか大きな池をぐるっと囲った広い公園で、とっても気持ちのいいスポットなんです。


大きな地図で見る

晴れた日に家族でお弁当を持ってベンチで食べたりすると、軽くピクニック気分でなんともいえない幸せな時間を持つことができる場所なんですね。

このあいだの土曜日もよく晴れた気持ちのいい日。

だけど片付けなきゃいけない仕事があったので自宅から仕事場のある大名までクロスバイクに乗って移動してたんです。

とはいえあんまり天気がよくて気持ちがいいので途中にある大濠公園で少しサイクリングをしようと寄ったんです。それで「あー気持ちいいなぁー」なんて思いながら公園内を走っていました。

kusabue01

すると美術館の手前らへんで、ある光景にでくわしたんです。

kusabue02

草笛教室!

そこではおじいさん、おばあさんたちが集まって草笛を吹いているのです。
初めて草笛というものを聴いたのですが、「こんなにしっかり曲が吹けるんだ」と驚いたくらい素敵な音色だったんですね。

晴れた空と、あたたかい空気と、そしてその中に溶け込んでいく草笛の音にすっかり興味を魅かれて少し遠めで見ていたんです。

しばらく聴いて立ち去ろうと思ったのですが、ふと「息子にも教えてやりたい」と考え直して思い切っておじいさんおばさんに声をかけてみたんです。

「いやー、それすごいですねー。こんなにしっかり音が出るんですかー。」

と近づいていくと、一番手前にいたおじいさんが

「そうだよー。ちょっと吹いてみる?」

と返事してくれました。

葉っぱを一枚受け取って吹いてみると、む、むずかしい。。。「ぷー」と音は出るのですがおじいさん達のように音程をとって曲を吹くのはかなりむずかしい。

でも僕、草笛を吹いたことがなかったので音が出せただけでもちょっと感動してしまいました。

葉っぱはけっこう何でもいいらしくて、僕が吹いたのもこんな感じの何の変哲もないつつじの葉。

kusabue03

これを上唇と下唇で軽くはさむようにして空気を吹くと

kusabue04

「ぷー、ぴー」と音がなるのです。楽しい!

なんでも毎月第二土曜日に大濠公園の美術館前に集まってこの草笛教室をやっているとのこと。
最初のほうにあった画像の中の横断幕には「15周年」とあるのですが、あの横断幕は5年前のもので実際には20周年を迎えるそうです。

しかも電話やメールなどによる連絡網はなく、ただ第二土曜日に大濠公園に集まるという約束のみで20年間この草笛教室は続いているそうです。

草笛は戦争中に戦地にいった若者たちがよく吹いていたため、帰ることのなかった若い兵士たちの象徴としても語られるそうで、こうした昔ながらの文化や逸話、そして子供遊びを次の世代に残していきたいという気持ちがあるとのことでした。

そんなお話を伺い、せっかくなので一曲リクエストして動画を撮らせていただきました。

どうですか?素敵な音色だと思いませんか。

kusabue05

最後はみなさん記念撮影。メールアドレスを教えてもらい、ブログを書いたら知らせてあげる約束をしました。

ちなみに今度のどんたくの催し物にも草笛教室として参加して演奏をするそうです。

今度は息子を連れて行こう。いつまでもこの音色が日本に残るといいなと思います。

Sublime Text 2とEmmetで制作効率アップ!@福岡マークアップ勉強会

半年くらい前からSublime Text 2を使い始め、使い心地がよくてすっかりメインエディタになってしまいました。

というわけでSublime Text 2やプラグインのEmmetを使ってコーディングのスピードアップを図ろう!というテーマでまとめてみます。

ちなみにこの内容は福岡マークアップ勉強会でライブコーディングを交えてお話しさせて頂きました。

Sublime Text 2って何がいいの?

僕は以下のようなポイントが気にっています。

起動が軽い。

前までDreamweaverやNetbeansでコーディングをしてたのですが立ち上がりの速さがだいぶ変わりました。

プロジェクトの管理が簡単

サイドバーにフォルダをドラッグ&ドロップするだけ。

拡張性が高い

プラグインのインストール、アンインストールも簡単です。

まずはインストール!

こちらのサイトからSublime Text 2をダウンロードしてインストールします。

エディタが使えるようになったら使い勝手を良くするためにプラグインの追加や削除を管理するPackage Controlを有効にします。といってもやり方は簡単、エディタ上部のメニューバーからView > Show Consoleを選択します。

sublime-emmet01

出てきた入力フォームに下記のコードをコピーして実行するだけです。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

その後、再起動するとCtrl+Shilf+PCommand+Shilf+P)でコマンドパレットが開くようになっています。適当に「Package」とか入力すると「Install Package」とか「Remove Package」とか出るのでInstall Packageで好きなプラグインをインストールしましょう。

プラグインを入れて使い勝手を良くしよう!

いくつか僕が便利だと思うプラグインを下記に挙げておきます。

Bracket Highlighter

HTMLタグなどのペアをハイライトしてくれる。

Side Bar Enhancements

初期状態では貧弱なサイドバーでの右クリックメニューを強力にする。

AutoFileName

画像などのパスを補完してくれる。WidthとHeightも入力してくれて超便利。

ConvertToUTF8

Shift_JSやEUC-JPなどUTF-8以外のファイルを開いたり保存できるようにする。

Local History

Git使わなくてもローカルに編集履歴が残る。コマンドパレットから閲覧可能。

他にも便利なプラグインは色々あってきりがないので参考になるリンクを挙げておきます。

「第0回 Sublime Text 2 勉強会」で紹介されたプラグインまとめ – The Powerful Code

今さらだけどSublime Text 2の基本とカスタマイズ | Developers.IO

Sublime Text 2 便利な機能

では便利な機能を紹介していきます。

プロジェクト管理が楽

下の画像のようにフォルダをドラッグ&ドロップするだけで、サイドバーに使用するフォルダが表示されるようになります。

sublime-emmet02

sublime-emmet03

ミニマップ機能

画面右側にソースコードのミニチュア版が表示されているので、大まかな移動をする際に便利

sublime-emmet04

複数選択が便利!

キーワードを選択してCtrl + DCommand + D)をぽんぽん押していくと同じ文字列が選択されて同時編集ができます。

sublime-emmet05

選択をスキップしたい場合はその場でCtrl + KCommand + K)をすればOKです。

sublime-emmet06

また、同じ文字列ではなくてもCtrlCtrl)を押しながらドラッグを繰り返すことで複数選択可能です。

sublime-emmet08

ファイル間の移動

Ctrl + PCommand + P)で開いたフォームにファイル名や行数を入力することでファイル間の移動がスムーズになり便利です。移動先の指定にはちょっとコツがあります。

@ IDや関数を指定して移動

: 行番号を指定して移動

# 文字列を検索

sublime-emmet07

よく使うショートカット

その他、ショートカットを使いこなすことでかなり制作効率がアップするはずです!以下に僕がよく使うショートカットをまとめました。

Ctrl + C (Command + C)でコピー、
Ctrl + X (Command + X)でカット

コピーや切り取りの定番ショートカットですが、なにも選択されてない状態で実行すればカーソルがある行全体をコピー、切り取りできます。

Ctrl + [ (Command + [
または Ctrl + ] (Command + ]

インデントの追加、削除 複数行でも可能です。

Ctrl + / (Command + /

コメントアウト。もう一回やれば解除。

Ctrl + F (Command + F

検索フォームが開く

Shift + 右クリックドラッグ (Option + 左クリックドラッグ)

矩形選択

Ctrl+Shift+K (Macも同様)

カーソルがある行を削除

Ctrl + Shift + D (Command + Shift + D

その行をもう一行コピー

Ctrl + T (Macも同様)

選択した文字の交換

Shift + Alt + 2 (Command + Alt + 2

画面分割。分割法は1,2,3,4,5,8,9で選べる。(Macは1~5)

Ctrl + L (Command + L

行選択

Ctrl + Shift + L

複数行を一括編集

Ctrl + enter (Command + enter

下に改行を入れる

Ctrl + Shift + enter (Command + Shift + enter

上に改行を入れる

Ctrl + Shift + or (Ctrl + Command + or

行を移動

Ctrl + space

入力保管呼び出し

CtrlBackSpace (CommandDelete

カーソル位置から文字列先頭までを削除

CtrlDelete (fnCommandDelete

カーソル位置から文字列最後までを削除

ここまでまとめてきた機能やショートカットを使うことでだいぶコーディングはスピードアップするかと思います。

Sublime Text 2を使う際に、以下の記事がとっても参考になります!

恋に落ちるエディタ”「Sublime Text」 完全入門ガイド! | 株式会社LIG

Mastering Sublime Text 2 こもりまさあきさんのスライド

さて、ここまでがSublime Text 2のお話し。Emmetを使えばコーディングはもっともっと速くなる!

Emmetとは

EmmetはZen-Codingの次期バージョンとして開発され、2013年2月に正式リリースとなりました。

Zen-Codingについては下の動画を見てもらえればざっくりわかると思いますが、簡単にいうとコーディングのタイピングを劇的に減らしてくれる便利な機能です。

例えばサイトを作る際に毎回下記のようなコードを書くと思います。

sublime-emmet09

Zen-Codingでは「html:5」と書いてその後ろでCtrl + E(Sublime Text 2使用の場合)で展開すればOKです。すごく楽ちん!

sublime-emmet10

EmmetはそのZen-Codingをさらに便利にしたものです。基本的な書き方はZen-Codingと一緒なのでこれまでZen-Codingを使ってきた方なら導入の学習コストはほとんどありません。

Emmetここが便利!

まずはプラグインのインストール

まずはCtrl+Shilf+PCommand+Shilf+P)でコマンドパレットが開きます。適当に「Package」とか入力すると「Install Package」とか「Remove Package」とか出るのでInstall Packageを選びましょう。

新たに現れたフォームにEmmetと入力してプラグインをインストールしましょう。プラグインをインストールしたらSublime Text 2を再起動すれば使えるようになっているはずです。

展開はCtrl + Eで!

ここはZen-Codingと変わらないのですが、Sublime Text 2でEmmetを使用した場合、コードの展開はCtrl + Eで行います。

「上の階層へ戻る」記述ができるようになった。

たとえばこれまで

<section>
<h1><a><img alt="" /></a></h1>
<p>テキストテキスト</p>
</section>

というコードは下記のように記述して展開していました。

section>(h1>a>img)+p{テキストテキスト}

h1とpは同じ階層なのですが、一気に展開したい場合はh1以下の要素を()でくくらなければいけなかったのですがEmmetで書くと下記のような記述ができます。

section>h1>a>img^^p{テキストテキスト}

Emmetでは^で階層を上がることができるようになりました。

ダミーテキストの挿入が簡単にできる。

Emmetではloremと入力して展開するだけで簡単にダミーテキストが挿入できます。

たとえば

p>lorem

と記述して展開(Ctrl + E)すると下記のように展開されます。

sublime-emmet11

ダミーテキストは最低8単語から調節できます。

p>lorem20

と記述して展開すれば20単語分だけダミーテキストが作成できます。

CSSの記述が楽になった。

EmmetではCSSはこんな書き方ができます。

/* 展開前 */  m10
/* 展開後 */  margin:10px;

/* 展開前 */  m0-5-0-10
/* 展開後 */  margin: 0 5px 0 10px;

/* 展開前 */  w100p
/* 展開後 */  width:100%;

こういった感じでEmmetを使うとHTMLやCSSを書く際の記述がかなり楽になります。さらにSublime Text 2のショートカットとあわせてコーディングを進めることで制作スピードはうんとアップするはずです。

Emmetの導入や記法について、詳しくは下記の記事がとても勉強になります!

Zen-Codingの次期バージョン、Emmet について|Web Design KOJIKA17

CSSの記述を高速化する、Emmet (Zen-Coding)|Web Design KOJIKA17

知らない人は遅れてる?新Zen-Coding Emmet | DECONCEPTER

CSSの記述は適当でもけっこう通用する

あと、CSSの記述はけっこう適当でもよくて、float:left;と書きたい場合はfl:lでもfllでも展開できたりします。

このように多少ファジーな書き方ができるEmmetですがSublime Text 2のプラグインHayaku!を使うとCSSはよりファジー(適当)な書き方ができます。

Hayaku!

インストールの方法はもう大丈夫ですね、Ctrl + Shift + PCommand+Shilf+P)でPackage Controlを立ち上げてInstall Packageからインストールできます。

興味ある方は下記のURLが参考になります。

Hayakuの使い方

Sublime Text2『hayaku』+『Emmet』で変わるセカイ | toybox-design.net

ここまでSublime Text 2とEmmetで制作効率アップというテーマで説明してきましたが、この内容にさらにSassやCompassといったCSSフレームワークを組み合わせることでもう一段と制作効率はアップします。

freezasama

残されたパワーアップがあと2回かどうかは知りませんが、コーディングはまだまだ速くなるはずです!

そこには。。夢のような世界が。。。

sassについては福岡マークアップ勉強会を開催している@kanappleさんが詳しいので参考にしてみてください。

sass|study|kanapple.net

便利な技術はどんどん取り入れて残業や制作時間を短縮しましょう!そして空いた時間を自分の勉強やクライアントの問題解決に回せばどんどん仕事の好循環が生まれるんじゃないかと思います。

以上、ありがとうございました。

あ、最後に、

コーディングのお仕事募集中です!

Google GlassでEコマースはどう変わるのか?

先日Googleから発表されたGoogle Glass

顔に身につける眼鏡型のヘッドウェアという、斬新なインターフェースで注目を集めています。

今回はそんなGoogle Glassによってショッピング体験がどう変わるのか?という点をまとめた記事がありましたので紹介します。

Google Glass: Is G-Commerce Next? | Get Elastic Ecommerce Blog

——————————————-以下意訳——————————————-

Google glassは消費者向けのローンチを間近に控えています。

インターネット接続やアプリケーションが使える新たなデバイスとして、「Google glassが持っているポテンシャルはどんなものか?」と期待が集まっています。

イノベーティブなデバイスとなり得るのか?

スマートフォンやタブレットのように、Google glassは情報の送受信ができます。

メガネのように身につけるこのデバイスは、下記のようにスマートフォンでできることはなんでもできます。

  • 写真撮影
  • ビデオ撮影
  • 株価のチェック
  • 天気を調べる
  • Eメールの送受信
  • テキストメッセージの送受信
  • ビデオ通話
  • GPS機能

スマートフォンとの大きな差別化のポイントはハンズフリーで情報へ素早くアクセスでき、より直感的ということです。

企業向けにEコマースのコンサルティングを行っているElastic Pathのストラテジストは次のようにコメントしています。

「メガネ型で顔に装着可能というだけでは破壊的なプロダクトであることの理由にはなりません。それはUIの1要素に過ぎないからです。重要なのはTVやPC、スマートフォンやタブレットなど新たな製品が登場すると、それ以前には考えられなかったデジタルプロダクトやサービスが次々と進化を遂げて産まれてくるということです。その流れはGoogle glassにおいても同じことが言えるでしょう。」

検索方法の変化

おそらくGoogle glassが持つ最も破壊的なポテンシャルは外出時の検索方法にあると思います。Googleのモバイル検索アプリは現在、画像キャプチャによる検索をサポートしています。

例えば、Google検索アプリを使って書籍のバーコードにカメラをあてると。。。

barcode-scan

Googleショッピングを検索したり、Googleブックス閲覧のオプションが表示されます。

barcode-results

Googleショッピングはさらに販売者の検索結果や近くの販売情報も表示してくれます。

search-nearby

Google glassでは考える間もなくこれらの操作が完了します。

地域の販売業者から提供される在庫情報と地図を結びつけて、近くでその商品が手に入るのかを教えてくれます。こういった情報にたどり着くまでにポケットから携帯電話を抜く必要するないのです。

さらにこのデバイスはGoogle自身が提供しているAndroidアプリ「Google Now」と組み合わさると、破壊的な変化をもたらす可能性があります。

Googele Nowはスポーツや旅行、天気、不動産、レストランといったそれぞれのテーマで、個人の嗜好やリアルタイムの状況に即した情報が得られるサービスです。

Google GlassとGoogle Now、そしてGoogleウォレットが連携して生み出されるショッピング体験は次のようなものになるかもしれません。

Google Glassはバーコードをキャプチャし、Googleショッピングのデータベースから購入可能な商品を見つけ出します。ネット上のカートに商品を追加して購入という一連の流れをスムーズにします。

さらに予測決定エンジンを利用して、最安値の情報やお得な送料、評価の高いショップ情報を選びだしてくれるので余計なショップ比較などをする必要がなくなります。

———————————————————————–

ここではバーコードをキャプチャする例が紹介されていますが、おそらく画像検索を使うことで、Google Glassを通して商品を見るだけで商品情報が表示されるということも可能だと思います。

うーん、実にスマートですね。

Google Glassの紹介動画は、映画のような未来がすぐ間近に迫っているのだとワクワクした気持ちにしてくれます。

実際に触れる日がくるのが待ち遠しいです。