はてなブックマーク

Tweet前回はARブラウザjunaio、そしてコンテンツ作成のソフトウェアmetaio Creatorのダウンロードと基本的な使い方を説明しました。 プログラミングが出来なくても簡単！ARコンテンツの作り方【導入編】 よりリッチなコンテンツをARで表示する いよいよ3DモデルをAR上で表現する方法を説明したいと思います。 今回の内容も九州先端科学技術研究所の@Taka_Yoshinagaさんの勉強会で教えてもらったものになります。多謝々々！ metaio Creatorを使えばプログラミングを一行も書くことなく、簡単に3Dモデルを扱うことができます。 それでは早速作ってみましょう。 3DモデルをARで表現する。 マーカーは前回も使った下のものを使用して説明します。 マーカーの登録のしかたは前回の記事を参考にしてください。 表示させる3Dモデルはmetaio Creatorに用意されている

Tweetカナダにあるデジタルマーケティングのエージェンシー、tent socialのブログで役に立ちそうなインフォグラフィックスを見つけました。 FacebookやTwitter、Google+などメジャーなSNSのレイアウトデザインをわかりやすくまとめてくれています。 このインフォグラフィックスを見れば使用されている画像サイズ、テキストの分量が一目瞭然です。サイトやアプリのUIを考える際にも参考になりそうです。 元ネタは以下の記事より。 The Ridiculously Exhaustive Social Media Dimensions Blueprint [INFOGRAPHIC] サイトに貼り付けてもいいよーというコードがあったので、まるっとインフォグラフィックスを見れるようにしました。ご参考ください。 Please include attribution to jeffbere

Tweet九州先端科学技術研究所（通称ISIT）にお勤めしている@Taka_Yoshinagaさんとご縁があって、ARコンテンツの作り方についてあれこれ教えてもらいました。 「え！こんな簡単にARってつくれちゃうわけ！？」と驚くことが多かったので誰かに伝えたくなりました。 何回かにわけて公開しますが今回はタイトル通り、プログラミングの知識がなくてもAR技術を使ったコンテンツが簡単に作れますよという内容です。 しかも使用するツールは全て無料。こんなノウハウを惜しみなく教えてくれるなんて、ありがとう@Taka_Yoshinagaさん、すごいよISIT、さすが先端科学研究所というだけあります！ さて、さっそく本題に入ります。 ARブラウザのインストール インターネットを見るときはIEやChromeなどのブラウザを通してコンテンツを閲覧します。 ARコンテンツを見る場合にはARブラウザが必要なので

Tweet半年くらい前からSublime Text 2を使い始め、使い心地がよくてすっかりメインエディタになってしまいました。 というわけでSublime Text 2やプラグインのEmmetを使ってコーディングのスピードアップを図ろう！というテーマでまとめてみます。 ちなみにこの内容は福岡マークアップ勉強会でライブコーディングを交えてお話しさせて頂きました。 Sublime Text 2って何がいいの？ 僕は以下のようなポイントが気にっています。 起動が軽い。 前までDreamweaverやNetbeansでコーディングをしてたのですが立ち上がりの速さがだいぶ変わりました。 プロジェクトの管理が簡単 サイドバーにフォルダをドラッグ＆ドロップするだけ。 拡張性が高い プラグインのインストール、アンインストールも簡単です。 まずはインストール！ こちらのサイトからSublime Text 2

TweetWeb design tuts+に公開されていたSEOのチェックリストがとてもわかりやすかったので紹介します。 A Web Designer’s SEO Checklist (Including Portable Formats) ひとことにSEOと言っても、キーワード対策だけしていればよかった頃とは違い、今ではかなり広い要素について考えなければいけません。 瑣末なテクニックに捕らわれて本質的な部分を見失いがちなSEOですが、以下のチェックリストはその全体像を確認するのに役立つと思います。 チェックリストはHTMLやEvernote、PDFなどにまとめてこちらからダウンロードできるようになっているようです。（内容は英語です。） 元記事には各項目の補足となる記事へのリンクも張られていたりするのですが、それはまた時間があるときに翻訳していきたいと思います。 —————————————

TweetHTML5 Carnivalの参加レポートをたくさんの方に読んで頂けて嬉しいです！ （ただ惜しむらくはURLが「fukuok」になっちゃっててすごく気持ち悪い） 僕個人としては、特におおくぼさんのJavaScriptに関するお話しなんかは普段やってる仕事に直接役立つような内容ですごく勉強になったセッションでした。 特にブラウザの仕組みに関する部分は、パフォーマンスを考えるうえでとても重要な内容だなと、一度しっかり勉強してみたいなと思いました。 そんなことを考えていたらあるサイトを見つけまして、これは昨日のセッションを直感的に理解するうえでも役にたつだろうと思ったのでこのエントリーを書くことにしました。 見つけたサイトというのは下記のリンクで、WEBサイトがブラウザによってレンダリング表示される様子を動画で見れるサイトです。 CSS Reflow | Reflow Visualiz

Tweet※この記事は2月9日に開催されたHTML5 CARNIVAL　FUKUOKAのレポート記事です。 スライドやUstreamのまとめだけ見たいという方はこちらからどうぞ！ → クリック！ 福岡の大規模HTML5イベント開催！ 先月カルタ大会を手伝っていただいた@akase244さんが、なにやら福岡のでっかいHTML5イベントの運営に携わっていると教えてもらっていて楽しみにしていたHTML5 CARNIVALが九州産業大学にて開催されたので参加してきました。 HTML5 CARNIVAL FUKUOKA　2013年2月9日＠九州産業大学 直前にチケットをプリントアウトするためにZusaarのイベントページを覗いたのですが、 参加人数500人近くなってる。。。すごっ！ でっかいイベントとは聞いていたのですが、これだけの規模になるとは開発者、デザイナーのみなさんのHTML5に対する関心の

TweetWDLに2013年のWebデザイントレンドをまとめた記事が上がっていたので紹介します。 Web Design Trends in 2013 もう1ヶ月過ぎたけど今年のWebデザイントレンド、おさえとこう、よしそうしよう。 ——————————————以下意訳—————————————— この数年間はWebサイトを開発する手法がすごく変化してきた。 より多くのユーザーたちがHTML5とCSS3をサポートしているブラウザを載せたモバイルプラットフォームに切り替えた。 デザインのコミュニティからは次々とユニークな手法がうみだされるから、そのトレンドは毎週変化するように感じる。この記事では僕らが見てきた進化のなかで、最も新しいトレンドをざっとご紹介したい。 これらのデザインアイデアの多くは長い間使われてきたけど、2013年にはこれらのアイデアはもっと主流になってくると思う。 ネット上には

TweetWebデザインのワイヤーフレームを作るとき、テーブルを作るのがけっこうめんどくさい。 そんなときに便利なFireworksの拡張機能「Tables」をご紹介します。 これさえ使えば何個も四角形をつくったり線を引いたりすることなく、クリックするだけで簡単お手軽にテーブルを表現することができるのです。 Tablesは下記のサイトからダウンロードすることができます。 Tables – Adobe Fireworks Extensions, Commands and Panels – johndunning.com mxpファイルをダウンロードしてFireworksへのインストールを済ませたら早速使ってみましょう。 まずは適当に表組みの中に含めたい要素を配置します。 空白にしたい部分にもとりあえず適当な要素を配置しておきます。 配置したい要素を選択してCreateボタンをクリックします。

Tweet要素を隙間なく埋める、いわゆるPinterest風のレイアウトを作ることができるjQueryプラグインMasonryを使ってWordPressでサイトを作ったので手順などをメモして置きます。 jQueryファイルのダウンロード 設置自体は難しくなく下記のサイトからjquery.masonry.min.jsをダウンロードしてサイトフォルダに置きます。 jQuery Masonry まずはデモを見やすくするためにWordPressではなくて普通のサイトで使う方法を説明します。 サンプルコード HTMLは例として下記のようなものを用意します。 <div id="container"> <div class="post">コンテンツ</div> <div class="post">コンテンツ</div> <div class="post">コンテンツ</div> <div class="

TweetWeb designer depotでWordPressのプラグインをまとめた記事「40+ essential WordPress plugins」を見つけたので、紹介します。 Jetpack WordPressを使ったブログサービス、WordPress.comのユーザーにのみ使用可能であった機能を使えるようになるプラグイン。 アクセス解析のWordPress.com statsをはじめ、ソーシャルサービス連携ツール、スペルチェックと文章校正、ソーシャル連携コメント機能、イメージギャラリー、モバイルテーマ、スクロール時の自動ページ読み込み、などなど盛りだくさん。 これを入れとけば一気にWordPressの機能アップを図れるお得パック的なプラグイン。 Jetpack Lite Jetpackの非公式ライト版。 WordPress.com statsとショートリンクサービスだけに機能