今、Node.jsに起きてることを語る上で、io.jsは避けて通れない話題でしょう。 今回のNode.js アドベントカレンダー 2014の締めを飾るために、このio.jsについて僕が知っている限りの事をまとめて書くことにします。 io.jsを知り、今後"Node"がどうなっていくのかを皆で一緒に考えていきましょう。 またこの一連のio.jsのfork騒動はOSSという特殊なプロジェクトをどう進めていくのがハッピーなのかを知る一つの教材だと思います。 OSSに関わっている皆さん、今回も長いですが、最後まで読んでもらえると幸いです。 io.js とは何か Node.jsのForkです。次のNode.jsの安定版になる、v0.12をForkしています。「アイ・オー ジェイエス」と読みます。名前の由来は木星にある四番目に大きな衛星の名前から取られました。*1 Nodeを使っている人のことをnod

UX Tokyo Advent Calenderへの参加のお誘いを頂いたので、僭越ながら記事を公開します。 内容としては時間軸によるUXの定義の中の、予期的UXについての部分になります。全体としては多くの記事などに書かれていますが、個々の段階についてはフォーカスしたものがないため、改めて考え直しまとめたものになります。また、その他の時間軸の部分についても今後書いていく予定です。 もし情報の漏れや解釈の誤りがあれば、UX Tokyoのグループや直接お会いした際にご指摘頂ければ幸いです。 時間軸としてのUX 2010年のドイツでのセミナーを翻訳されたUX白書というものがあります。 UX白書では異なる期間で生じる体験のプロセスを、図のように4つの段階に分類して説明しています。それぞれ「予期的UX」「一時的UX」「エピソード的UX」「累積的UX」の4つの段階に分類されており、全体をデザインしていく

ひさびさにWebフロントエンドパフォーマンス系の話題をつらつらと書いてみます。例によってモバイル系開発者寄りの視点かもしれません。文中の参照リンク多め。 ファクタ まずはパフォーマンスに影響を与えるファクタについての所感。Webパフォーマンスにおけるイニシャライズとランタイム ::ハブろぐ で示した分類に基づきます。 イニシャライズ（いわゆるページロード） 4GやLTEが普及してもコンテンツの肥大化には追いついていない concat と CSS Sprites の呪いが解けない HTTP/2 の Streams and Multiplexing に期待 HTTP/2 の Server Push にも期待 画像周りだと <picture> 関連仕様も使いたい（srcsetだけならいける？） WebRTC とか WebSocket とかストリーミングとかは？ （やや疎い、てかイニシャライズじゃ

WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。 使用技術について GLSLとはOpenGL Shading Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー（3D描画のための一連の計算セット）を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし

Webサイトを作る際、最近では様々な画面サイズ（解像度）のデバイスが増えていることから レスポンシブで構築する際のviewport設定に迷うことがあります。 すべてのデバイスで画面幅に合わせて綺麗に表示させるには viewportの値を切り替えてしまった方が楽な場合もあったので スマートフォン［iPhone/Android］とタブレット［iPad/Android］それぞれで jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。 まずは別枠で動作サンプルから。 ※サンプル画面はスマートフォンまたはタブレットでご確認ください。 「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示 見た目上は分かりませんが スマートフォン［iPhone/Android mobile］とタブレット［iPad/Android］で そ

2015年が近づいてきましたね。皆さん、「年賀状」の準備は済ませましたか？ 今回は、「オリジナルな年賀状を作りたいんだけどイラストとかはあんまり描けない…」という方でもカンタンに作れるような年賀状の描き方を、実際作ったものを元に紹介していきます。 目次 イラスト風の年賀状デザイン　〜完成図〜 写真加工からはじめるイラストメイキング イラスト風の年賀状デザイン　〜完成図〜 どうも！デザイナーの川野です。 12月に入って、いよいよ2015年が近づいてまいりましたね。 忙しいのに年賀状も準備しないと…と焦っている方も多いのではないでしょうか？ ビーワークスでは毎年社内で年賀状コンペがあります。 そこで会社用の年賀状を描いてみましたのでごらんください。 制作時間：３時間ポッキリ（描こうと思い立ってからほぼ完成するまで） 制作ソフト；photoshop CC（この記事では古いバージョンでも出来る機能

【javaScript】ajaxがうまくいかない、使い方が分からない…実践的な開発上の2つの注意点【jQuery】 ※この記事は2014年12月18日に執筆された記事です。現在は仕様が異なる可能性があります。 ajaxはもちろん知っているけど実はきちんと使ったことが無い…という方もいらっしゃるのではないでしょうか。 ビーワークスのコーポレートサイトで使用しているajaxの実践的なノウハウをご紹介します。 目次 ajaxの基本 注意点1：通信〜取得完了までのタイムラグ 注意点2：複数のファイルの取得完了の順番 まとめ ajaxの基本 ajaxはwebサーバと非同期通信を行い、通信結果を使って行う処理の総称です。 Googleの検索欄に単語を入力すると検索ボタンを押さなくても途中で検索結果が表示されますが、あれはまさにajaxですね。 ビーワークスコーポレートサイトの制作実績ページでもajax

この記事はSwift Advent Calendar 12月23日の記事です。 アドベントカレンダーは後半ほどネタが出尽くすので不利ですね。 自分はこの2ヶ月半ほどプライベートの時間を使ってSwiftで新しくアプリを作っていたので、それについて考えていたこと、感じたことをつらつらと書き下してみたいと思います。 [2014/12/28 追記] 今朝、アプリがリリースされました！！ Rebuilt きっかけ 2014/6/3にWWDCでSwiftが発表され非常に気になっていました。 しかし、当時の自分は業務でアプリ開発から離れており、他に優先順位の高い事柄があったので積極的に勉強することを避けていました。 Xcodeベータは安定していない、Swiftの仕様もコロコロ変わる中、学習効率を重視するのであれば安定版がリリースされてから勉強したほうが良いとも思いました。 新しい技術が出てくるタイミング

ferret編集部：2014年12月25日に公開された記事を再編集しています。 プレゼン資料・ホームページ作成時に、「内容に応じたイラストやアイコンを入れたいけど探すのが面倒」と思ったことはあるのではないでしょうか。 資料はもちろん、会社のホームページや広告といった様々なシーンで便利に使えるアイコン・イラスト素材をまとめました。全て無料で使え、商用利用もOKです。 1,ピクトグラムと言ったら【ヒューマンピクトグラム2.0】 http://pictogram2.com/ 素材形式：ai、jpg、png ピクトグラムを専門に扱う素材サイトの「ヒューマンピクトグラム2.0」。 細やかな感情やシチュエーションに合わせたラインナップが人気の秘密です。サイト内にピクトグラム専用アタッチメントパーツを用意しており、一手間かければ更に多くのバリエーション豊富なピクトグラムが作れます。 2.表現豊かな3Dピ

こんにちは。クリスマスイブのエントリーはどうしても避けたかった井畑です。 今回は#LOVEFONT Advent Calendar 2014の23日目の投稿をさせていただきます。 #LOVEFONTとはある特定のフォントに対する愛を語る企画で、今回で僕は4回目の参加になります。自分の好きなフォントについて書くのってほんと楽しいですねー:) (ちなみこれまでは「GilSans」と「Trajan」と「筑紫A丸ゴシック」で書かせてもらいました。良かったらチェックしてみてください!) 今回は圧倒的存在感のすごいやつ「ラグランパンチ」についてです。 それではどうぞ!! ラグランパンチとは ラグランパンチはFontWorksが出しているフォントの一つで、他ではなかなか見ない超極太ゴシック書体です。 また、ラグランパンチの元となっているラグランというフォントもあります。 どちらも似ているのですが、ラグラ

デザインをする際に使用する素材の中でも、特に活躍の場が多いアイコン。種類豊富に持っていると、非常に便利なもの。そんな中今回紹介するのは、多くのデザインシーンで活躍してくれるフリーフォントまとめ「20 Awesome Free Icon Fonts to Use in Your Designs」です。 Dribbble – Icons V.3 – Free Download by Hüseyin Yilmaz いろいろなテーマのアイコンセットが20種紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Infinity Space Icons on Behance 宇宙の惑星をテーマにした珍しいテーマのアイコンセット。衛星や宇宙ステーション、彗星などのアイコンもセットになっています。 Peax Webdesign Free Icons Font |

はてなCTOのid:stanakaです。 はてなアドベントカレンダー2014も最終日となりました。 今年のアドベントカレンダーは、スマートフォンアプリ開発からシステム系論文の話まで幅広いテーマが集りました。 読んでいて優秀なエンジニアがいるなぁ、としみじみ思います。 ちなみにアドベントカレンダーは25日までじゃないのか、という話がありそうですが、本来は24日までだそうです*1。 CTOとは何か論 最終日の今日は「CTOの役割と組織における技術的ポートフォリオの組み方」について考えているところを書いてみます。 最近、なぜかCTO論が盛んで、あちこちでよく耳にするようになってきています。 rebuild.fmでのnaoyaさんのマネージメント話や、WEB+DB Pressの舘野さんの連載などでもCTOやエンジニアのキャリアについての話が盛り上がっています。 つい先日でたWEB+DB Press

こんにちは。年末ですね。クリスマス、忘年会、年越し、お正月と忙しい時期でしょうか。お仕事もラストスパート頑張りましょう。 最近ランディングページでも、フラットなデザインだったりわりとシンプルなデザインを作ることが多くなってきている気がします。昔のようにごりごりに装飾を使うというよりも、“今っぽい”シンプルおしゃれなものを作りたいですよね。そこで参考になりそうなものが、雑誌のデザイン(エディトリアルデザイン)です。紙とWebなのでそのまま真似るのは難しいですが、ちょっとしたあしらいなら参考にできそう！今日はそんなあしらいを紹介します。 版ズレ風文字 カンタンだけど結構おしゃれに見える、そんなあしらいです。基本的には濃いフチに薄い色をズラすのが良いかと思います。見出しに使えそう？ 鉤括弧 鉤括弧といっても普通の「かぎかっこ」ではなく、細めに大きめに、テキスト全体を囲うように使うのがポイント。こ

こんにちは！てっちゃんです。 今日は12月24日クリスマスイブですね。皆さん今夜は予定があるんですかね？ 僕は安定の...(´・ω・｀) 年末になりボチボチ今年を振り返ろうかなって時期なので今年のまとめとして僕が個人的に気になった2014年のツールとかサービスを10選ほどご紹介しようと思います。 選定と感想は僕の独断と偏見なのであしからず。 HTML5勧告 http://www.w3.org/2014/10/html5-rec.html.ja 2014年10月28日、HTML5の仕様が勧告となりました。「勧告」とはすべての仕様が確定したときにするもので、これによりHTML5という仕様が「正式な規格」になったことをさします。とはいえ、制作側としてHTML5を使っていく以上安定した制作が出来るとは限りません。ブラウザの実装が完璧ではなく周辺技術の仕様には差がでているのが現状ですが、今後もバージ