話題のMaterial DesignをWebで実現!Polymerで「Paper Elements」を試そう 佐藤歩(株式会社サイバーエージェント) この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。 Material Designという視覚的言語 Material Designの目的は、ひとつの視覚的な言語(Visual Language)によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。 それを実現するため、伝統的なグラフィックデザインとテク
WebRTCの最新動向が満載!WebRTC Update(Google I/O 2014番外編) がねこまさし(インフォコム株式会社) Google I/Oの後で Google I/Oの後に、技術者が集結したサンフランシスコで様々なイベントが開催されたようです。WebRTC関連として、Kranky Geek WebRTC Event というものがあり、そこでGoogleからWebRTC Updateと題した発表がありました。今回はその50分のセッション映像から、ハイライトをご紹介します。 掴みはcardboard 最初の掴みは、DataChannelで制御できるローバー(自走車)です。キーノートで配布されたcardboardに装着したAndroidでローバーの首を振ってカメラの向きを制御できます。カメラの映像は当然WebRTCで伝達され、cardborad越しに見ることができます。(3分4
This document contains a summary of updates to the Concourse continuous integration and delivery (CI/CD) platform between versions 1.2.0 through 2.0.0. Key updates include adding the ability to pin builds to specific resource versions in 1.2.0, introducing build and test workflows in a single pipeline in 1.3.0, improving container retention and build log loading in 1.4.0 and 1.5.0, adding official
ServiceWorker解説 – オフラインWebアプリケーション開発技術の最前線 岩瀬 義昌(HTML5 Experts.jp編集部) 今月上旬5月8日に、W3CよりServiceWorkerの草案初版が提示されました。ServiceWorkerは、オフラインWebアプリケーションの開発者が問題と考える点を解決する、非常に魅力的な仕様です。日本語の情報がほとんどないこのタイミングで、HTML5 Expert.jp編集部が解説いたします! ServiceWorkerとは ServiceWorkerは、リソースの永続的なキャッシュを可能にする、およびWebアプリケーションのリソース要求の処理を可能にする新しい機能です。Webページを開く前であっても(ネットワークの接続/切断の有無にかかわらず)、独自の処理を挟み込めるのがポイントです。クライアント側に、一種のプロキシサーバがあるようにイメー
よしこです。 最近転職しまして、7月からアシアル株式会社で働いています。 ちょうど1ヶ月経ったので、ご報告(してなかった)と、入社して初めて触れたものが多かったので振り返りなんてしてみようかなと思いました。 経緯 自分がWebエンジニアとして今後どこを得意分野にしていきたいか、というのは結構ずっと悩んでいました。 サーバーサイドもフロントエンドも浅く広くやっていて、どっちも好きだったので、その中でどこを掘り下げていこうかなーと。 そんなときに、たまたま作って公開したシングルページのポートフォリオサイトへ思わぬ量の反響をいただきまして、かっこいいって言ってもらえたりしてすごく嬉しくて、その嬉しさから、あー自分フロントエンドが合ってるのかもなー、ってなんとなく気持ちを固めることができました。 アシアルのことは技術的なこと調べるときにアシアルブログの記事がよく出てきてたので知って、技術好きな人が
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう 矢倉 眞隆(myakura) 今回お届けするのは、Jake Archibald氏とAlex Russell氏によるServiceWorkerのセッション「Appy Times with ServiceWorker – Bridging the gap between the web and apps」です。 Alex氏はService Workers仕様のEditorで、古くはDojoやChrome Frameに携わっています。TC39やW3CのTAGのメンバーとしても活動し、Extensible Web構想を推し進める一人です。 Jake氏はService Workers仕様の「ゴーストオーサー」だそうです。とても面白い人で、今回も彼のユーモアが炸裂、笑いに包まれた楽しいセッションとなり
ーーーー HTML5はネタが出尽くした。あとは、IE8やAndroid2.X標準ブラウザのような、レガシーブラウザがいなくなればいいだけではないか? 私は最近、そんな言葉を耳にすることがあるのです。しかし、ブラウザ開発者たちは未だに、そんなことを微塵も感じさせないほど働いています。まだまだ進化の速度を、落とすわけにはいかないようです。2014年06月14日に開催された「HTML5 Night」にて、Google Chromeの開発者である及川卓也氏の口から、これからのChrome開発について語られました。 本記事では、及川氏の講演のダイジェストをお届けします。 今のChromeには何が不足しているのか? Chromeは2013年の4月に大事な出来事がありました。Appleと一緒に開発していた、「WebKit」をフォークしました。それが、Chroniumと同様なオープンソースのレンダリングエ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
Web上で一緒に音楽を作ろう!オンラインスタジオ「Soundtrap」で音楽制作 河合良哉 概要 Google I/O 2014のセッションの1つ「Making music mobile with the Web」のレポート記事です。Officialに公開されているYouTubeはこちらです。 OpenWeb 技術であるWebRTC、Web Audio APIは一度は耳にしたことのあると思います。この2つの技術、そして標準化が始まったばかりのWeb MIDI API(電子楽器とブラウザを直接接続するAPI)を利用した音楽制作アプリケーション「Soundtrap」。これらを使って、実際にセッションのオーディエンス、遠隔地の人とコラボレーションをして、Google I/Oのテーマ曲を作成するデモンストレーション中心のセッションでした。本レポートと合わせて映像もぜひご覧ください! このセッション
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか?……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
PhoneGapとは一味違う!純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め 畠田 喜丈(株式会社ニューフォリア) アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。 アプリカンは2013年末に公開され、ハイブリッドアプリフレームワークとしては後発ですが、他のフレームワークとは異なるアプローチとして、様々なパートナー企業のサービスのSDKを組み込み、AR機能や、位置情報連動サービスなど複雑なサービスオプション機能を JavaScriptから簡単に呼び出せるようになっています。 基本は無料で利用できますが、前述の高機能なオプションを使ったり、無料ビルドしたアプリに表示される広告バナーを外す場合には有料となります。 アプリカンの開発に必要なもの エディタ 好奇心 アプリカンの開発には、IDEを
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか?Polyfillとして適用するのは、もちろん platform.jsです。これを使って、複数のWebブラウザで動作検証をちょっとしてみようと思います。試してみたのは、以下の3つです。 基本的なWeb Componentsの動作確認 HTMLElement#createShadowRoot()の動作確認 Shadow DOMのCSSスコープ それぞれ見ていきましょう。 基本的
http://blog.nihilogic.dk/ Canvas element Attributes Name Type width ulong height ulong Methods Return Name string toDataURL( [Optional] string type, [Variadic] any args) Object getContext( string contextId) 2D Context Attributes Name Type canvas HTMLCanvasObject [readonly] Methods Return Name void save( ) void restore( ) Transformation Methods Return Name void scale( float x, float y) void rotate
JavaScriptでフレームワークを書くのはもうやめましょう。 JavaScriptフレームワークというものは、あたかも避けられない死と税金のようなもの、絶対にぶちあたる避けられないものといわれています。こっそり聞いてみましょう、新しいウェブプロジェクトが始まるとき、一番初めに聞かれる質問は?十中八九は「どのJSフレームワーク使っているの?」でしょうね。昨今の業界においてJSフレームワークというものは本当に根深く浸透しているのです。でも、だから必須だというものではないのです。実際、もう使うべきではないのです。 どうしてこういった結論に至ったのか、振り返ってみましょう。 AngularにBackbone、Ember・・・ ここのところ長い間、 ウェブプラットフォーム とはHTML+CSS+JS、と簡潔に技術用語の羅列でまとめられてしまっていましたが、そこにはもっとぴったり表す用語“大混乱”
エモくない話はQiitaに書きました http://qiita.com/nekova/items/30f1e11d6adfa1ff1ba9 WebComponentsって何なの agektmrさんがWeb Componentsについて詳しくは知らない人に向けて、素晴らしい記事 を書いてくれているので読まない手はありません。 agektmrさんの記事読んだ後はWeb Componentsを使ってみよう!を読むのが良いと思います。 Polymerって何なの Polymerとは、一部のモダンブラウザが対応しているWeb Componentsの機能を、未対応ブラウザに提供するためのPolyfillライブラリです。 一部のモダンブラウザとはChromeとOperaを指します。つまり、それら以外のブラウザのためにはPolymerが必要です。 先日のGoogle I/Oで発表されたMaterial De
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く