ウェブのプッシュ通知、何がそんなにすごいのか？
3 月 13 日、Chrome Beta のブログポストが出ました。Android 版 Chrome でプッシュ通知が使えるようになったのが個人的なハイライトです。 「確かにプッシュ通知は便利かもね〜」と思ったあなた、驚きが足りません。のけぞるべきです。小躍りするべきです。 理由を説明します。 ユーザーエンゲージメントが変わる # あなたのウェブサイトのビジネスモデルが広告モデルにしろ課金モデルにしろ、ユーザーが繰り返し訪れてくれることは大前提です。通常のウェブサイトやサービスは、そのための策を練ります。そのきっかけをサービス側から能動的に与えることで、ユーザーが戻ってきて、ビジネスは回ります。しかし、そのきっかけを与える方法は、非常に限定されていると言わざるを得ません。 インターネットが普及し始めた当初から伝統的に利用されているのがメール、数年前から利用されているのがソーシャルメディア、
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
[JS]手をかざし、そのモーションでページをスクロールさせたりコンテンツをスライドさせるスクリプト -doppler | コリス
Webページを表示し、手をかざし動かすと、ページをスクロールさせたり、コンテンツスライダーをスライドさせたりすることができるスクリプトを紹介します。 doppler doppler -GitHub dopplerの仕組みはスピーカーから音をだし、手を動かした時の反射音からドップラー効果を生み出し、モーションを検出して操作に反映させます。 下記デモページで実際の動作を試すことができます。 デモの動画もあります。 デモページ ブラウザでマイクの使用を許可し、「Start hand-free scrolling」をクリックすると、手のモーションでスクロールできるようになると思うのですが、うちのMacBookではうまくできませんでした。マイクの穴が横に小さくついてるだけだから？ 現状、マウスやトラックパッドの方が操作は快適だと思いますが、可能性を感じるスクリプトですね。
![[JS]手をかざし、そのモーションでページをスクロールさせたりコンテンツをスライドさせるスクリプト -doppler | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/80276a6a479c1525e425b299a548624f2241aa10/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031201.png)
Shadow DOM - Web Components を構成する技術
この記事は webcomponents.org の記 事とのクロスポス トです。 Shadow DOM を利用すると、DOM 要素に、ウェブページの他の部分とは切り離された、 ノード内だけで有効なスタイルやマークアップを含んだ DOM ツリーを追加することがで きます。この記事と動画では、この Shadow DOM について解説します。 Shadow DOM とはなにか？ # こちらは HTML5 の video タグで表示された動画です。ご覧頂けるとお分かりのように、 コードは video タグのみという単純さでありながら、動画そのものだけでなく、制御用 の UI も表示することができています。 <video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video>
Custom Elements - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう？例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら？既存のタグを拡張して、新しい機能を追加できるとしたら？ Custom Elements は、それを可能にします。 Custom Elements とはなにか？ # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま
HTML Imports - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 Template や Shadow DOM、Custom Elements を使うことで、機能ごとの UI コンポーネントが実現できるようになることはこれまでに説明してきました。しかし、それらを使ったコンポーネントの HTML、CSS、JavaScript を別々に呼び出すのは、非効率です。 依存関係の解決も容易ではありません。jQuery UI や Bootstrap を思い出して下さい。JavaScript、CSS、Web Font といった各種リソースを、必要に応じて別々のタグに記述しなければなりませんでした。特にタグごとにコンポーネントとして扱うことが想定されている Web Components の場合、状況が複雑化することは簡単に想像できます。 これらのリソースを、ひとつの HTML ファイルにまとめて
Template - Web Components を構成する技術
Posted: October 14, 2014 / Last updated: October 16, 2014 この記事は webcomponents.org の記事とのクロスポストです。 先日 Web Components を構成する技術のひとつである Templates に関するビデオを公開 しましたので、解説したいと思います。 なぜ今 Templates なのか # 我々開発者にとってテンプレートを使うメリットは、デザイナーとの分業を容易にでき る、という点にあります。 ウェブサイトを構築する際に利用されるテンプレートというと、以前は PHP や Python の Django, Ruby on Rails をはじめとするサーバー側での実装が主流でした。それがこ こ数年、ブラウザ側で処理するテンプレート技術が登場し、人気となってきています。 これは HTML5 などオープンウェブ
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
株式会社ドワンゴの中の人になることになった。同時に21歳になった。 - north-memo
ドワンゴ、今年から「デザイナー」の新卒採用を始めました。 ドワンゴデザイナーメンバー募集！ 説明会参加して、ここからは話せないこともいろいろあったのですが、無事ドワンゴのデザイナー（多分）記念すべき第一号新卒となりました。 ずっとドワンゴで働いてみたいと思っていて、デザイナー募集がなかったら、数学から一浪して情報の大学院に入った後、エンジニアで採用してもらおうというプランだったので、新卒でのデザイナー募集は僕にとってすごいニュースでした。 それから説明会にすぐ参加の依頼を出し、全員フォーマルな中、一人だけカジュアルで行って浮いて、ポートフォリオを正月徹夜で作り、送ったら1次2次面接が免除になって最終も全身ユニクロマラソン初心者シューズで受けて、多分史上初のその場で内定を頂いたミラクル続きの就活みたいなものでした。 就活と行っても、合同説明会とかも行ってないし、リクルートスーツも来てないし、
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
超厳選！ハリウッド映画タイトル風のフリーフォント36個
どうも、やな☆ぎさわです。 僕は、映画が大好きでよく観るのですが、それぞれの映画で使われているタイトルフォントはオリジナリティがあってかっこいいなぁと常々思っています。 そこで今回は、映画で使われているっぽいタイトルフォントがダウンロードできるサイトをいくつかご紹介します。 ぜひとも、パロディ感覚でイベント告知のポスターやパンフ、バナーなんかに使用して、あの名画を再現してみてはいかがでしょうか。 以下で紹介しているフォント達はどれもムッチャクチャ格好いいのですが、商用に使えるやつと使えないやつが混じっているため、ご利用の際はライセンスをしっかり確認してくださいね。 パイレーツオブカリビアン風フォント 海の男、いや、漢たちの話。 ＞＞フォントダウンロードはコチラ スター・ウォーズ風フォント そう、この記事を書いている今も、広い宇宙のどこかでは、互いの星の運命をかけた宇宙戦争が繰り広げられてい
デザイナはWeb Componentsに夢を見るのか - Qiita
2015年の今、Web制作のエンジニアに限らずデザイナも動向が気になるのは、次の2つでしょうか。なぜか。それは、どちらも、その以前と以後で「CSSの前と後」くらいのインパクトをWeb業界に与えるからです。 Web Components モジュール (あるいは、ECMAScript 6) いや、単にここのところ考えることが多かったので、忘れないうちにアウトプットしときたいだけかも。 コンポーネント まだ現時点のブラウザ対応はないものの、「コンポーネント(=独自タグ)」は既定路線で、HTMLのビューを組む場合の方法論として確立しつつあります。 AngularJS React Polymer いずれも「コンポーネント」志向です。ただ、Angularが独自の世界観で突っ走ったのに対し、ReactはいくらかWeb Componentsに寄り添った方向、PolymerはWeb Componentsその
ThinkPadはなぜ日本で作られたのか（後編） (1/4)
ThinkPadの開発に深く携わり、現在はレノボ・ジャパンの取締役副社長として研究・開発を担当する内藤在正氏に聞く短期集中連載。最終回では低コストな海外での開発に各社が移行する中、レノボはなぜThinkPadの開発を日本ですることにこだわるのかについて聞く レノボは2011年に神奈川県大和市の中央林間駅近くにあったThinkPadの開発拠点を、神奈川県横浜市のみなとみらい地区に移転した（関連記事）。レノボは中国の北京などにも開発拠点を持つが、大和研究所の名とともにThinkPadの開発部隊は日本に残した形となる。 過去2回の記事で見てきたとおり、ThinkPadは日本からグローバルに向けて開発されたプロダクトであるが、コストなどを考慮すれば、今なぜ日本なのか？ という疑問も残る。短期集中連載の最後は、やはり「日本でノートブックを開発する意味」を聞かざるを得ないだろう。 前編はこちら 中編は
【DeNA編】iOSにおけるUI/UX開発手法とデザイン──Yahoo! JAPAN×DeNA勉強会 #ios｜CodeIQ MAGAZINE
DeNAとYahoo! JAPANのiOSにおけるUI/UX開発手法を、デザインとエンジニアリング双方の観点から解説する勉強会「iOSエンジニア・UI/UXデザイナー勉強会」が7月16日に開催された。 今回はDeNAチームが発表した開発事例や、現場での課題・改善のための工夫などをレポートする。 by 馬場美由紀 （CodeIQ中の人） 聴きながらの飲食OK！リラックスモードの勉強会 Yahoo!JAPANの話題の社員食堂「BASE6」で開催された勉強会は、まずは乾杯から。発声は今回の主催者、DeNAの沖津貴智さん。 「今日は楽しい勉強会にしましょう、乾杯！」 今回の勉強会では、発表した内容を図で示すというグラフィックレコーディングが採用された。レポートと合わせて紹介していくので合わせて見ていただきたい。 マンガボックスのアプリができるまで 最初の登壇者はDeNAのUI/UXデザイナーであり
日本の企業サイトで最高峰クラス！ 見事にデザインと WebGL が融合している homunculus.jp がすごい！ - WebGL 総本山
効果的に利用された WebGL の使いどころが見事 今回ご紹介するのは、日本の企業サイトとしては他に類を見ないほどの完成度を誇る homunculus Inc(ホムンクルス) のサイトです。 ハイセンスなデザインと、それを引き立たせるための効果的な WebGL の利用。これが見事に体現されています。 私個人が WebGL コンテンツを制作すると、常にデザイン面で躓くことが多いのですが、こうして完成度の高いものを魅せられてしまうと創作意欲を刺激されますね。 一見するとただの画像だけど……？ サイトに訪れると、まず最初からインパクトのある黒い画面でゆらゆらと文字が動いています。 画面をクリックすると、反転今度は、白を基調にした明るいイメージのデザインにシフトします。まるで陰と陽を示しているかのよう。 ここでは、ホムンクルスで手掛けた事例がずらりと並んでいます。 一見すると単に画像が並んでいるだ
アプリのUI設計は「紙でやる」のが早い！ - Qiita
はじめに こんにちはー！！ UI設計やってますか？ 今回は「ペーパープロトタイピング」の話。 アプリでは主流になってる現場も少なくないですよね！ 今までのやり方とペーパープロトタイピングの違いや、 プロトタイピングツール「POP」と「Prott」の比較の話なんかをしようと思います！ 今までのアプリUI設計 Webデザインと同じ方法でアプリ設計を行っている場合、手順は ●ワイヤフレーム→モックアップ→実装 厳密に言うと ●①ヒアリング→②ワイヤフレーム→③レビュー→④モックアップ→⑤レビュー→⑥実装→⑦レビュー デザイナーがいないと ●①ヒアリング→②ExcelでUI設計→③レビュー→④実装→⑤レビュー って場合も結構多いと思います。 これ結構時間かかりますよね～。 しかも！ 大抵の場合、実装後のレビューの段階（つまり最終段階）で 「やっぱここ動きおかしいよね！直せる？」 「・・・。（えー！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ngrok - secure introspectable tunnels to localhost
中学生のネット利用、「ゲーム」と並び「動画視聴」が最多……政府の統計で明らかに 小学生は「ゲーム」、高校生は「コミュニケーション」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
