PWAが来るって言っているエンジニアは今すぐ辞めろ
PWAとかいうhtml5のリブランドが技術者界隈で騒いでるが、こんなの受け入れられないだろ。 PWAの実物見た？触った？？ instagramのPWAが最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、 オワコンであった。 ネイティブと見分けつかないんだったら本当にエンジニア辞めたほうがいいよ。 まず、タイムライン上で複数投稿があった時にスワイプで切り替えられない。 なんと左右をタップするのである。 HTMLを操作してる感満載のガクガクの感じ。 ユーザーってこういう些細なガクガクに敏感だよね。マーケット感ある人ならわかるよね。 そんでもってストーリーズ。 もう最低。 動画が自動再生しないの。止まるは止まるは。もう何なの？？？って感じ。 こんなの受け入れられないでしょ。 カメラは直接起動できないし、フィルターも少な
ESDocという(多分)モダンなドキュメンテーションツールの紹介 - maru source
こんにちは丸山@h13i32maruです。 僕は2015年からESDoc*1というJavaScript向けのドキュメンテーションツールを開発しています。 https://esdoc.org https://github.com/esdoc/esdoc Star 最初のリリースから2年、昨日ようやくv1.0をリリースできました🎉 いやー、ここまで長かったです。今ではRxJSやSketchAPIなど、様々なツールで使用されています。 この2年間、ESDocは2つのゴールを目指して開発してきました。 ドキュメントの作成・メンテナンスを快適にする（ドキュメントを書くの楽しい！という状態） ソフトウェアの使い方を簡単に理解できるドキュメントを作成する（ソースコード読まなくても大丈夫！という状態） この2つを満たすためにESDocは色々な機能を提供しています。 今日はそれらの機能の中でも(多分)モダ
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
HTML FormにPUT/DELTEは必要なのか、あるいはJSer界の分断 #桜JS - teppeis blog
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの？っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは | mah365
HOMEソフトウェア開発AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは AngularJSはあくまでクライアントサイドのフレームワークなので、サーバサイドをどうしようかなーと悩むことがあると思います。Railsが得意ならRailsに組み込むのもいいんですが、Railsはビューヘルパーが異様に充実しているので、Rails上でAngularJSのコードを書いてるとRailsの良いところが10%も生かせてない気がして辛い気持ちになってきます。うーん、どうしよう。 そんな風に悩んだらYeomanのgeneratorであるgener
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい） 概要 TypeScriptはマイクロソフトが開発するオープンソースの言
いまさらですが、増井雄一郎さんのメモ帳サービス「wri.pe」がすごい件 #HTML5 #プログラミング #wri.pe #markdown - CodeIQ Blog
CodeIQ中の人、babaQです。 ちょっと前になるのですが、コワーキングスペース茅場町 Co-Edo（コエド） で開催されたmasuidriveこと増井雄一郎さんのトークセッションに参加してきました。 HTML5を活用したメモ帳アプリ「wri.pe」誕生のきっかけ テーマは、増井さんが個人でつくった（とは思えない）メモ帳アプリ「wri.pe」 ゴールデンウィークを利用して、何かゴリゴリと作りたいと思い立ち、 1週間で「自分で使いたいものを作る！」と決めたのがきっかけなんだとか。 まず、浮かんだアイデアは2つ。 煩雑なメモをどうにかできるアプリと、未読のチャットを整理できるアプリ。 でも、1週間で開発するにはチャットはちょっと重い… ということで、メモアプリを作ることに決定。 まず最初に「メモアプリの課題」を整理したそうです。 - いつでも、どこでも使える（iPhone、iPadでも）
こてさきAjax:[Google I/O 2013 速報] Chrome Packaged Apps v2 凄いことに!! - livedoor Blog（ブログ）
いよいよ、Google I/O 2013 が始まりました！！今年は、初めてのI/O参加で、サンフランシスコに来ています。 基調講演は、昨年のダイブ w/ Google glassに比べると堅実な印象で、大半をAndroidとChromeに時間を割きつつ、一番派手だったのが、Google Maps w/ WebGL。まぁ、Maps GLの流れからすると、「ついに来たか」って感じなので、あまりサプライズという感じではありませんでした。まぁ、基調講演のレポートは各所から出ると思うので、今回の僕の記事では取り上げません。 Chrome/HTML5について、keynoteではそんなにサプライズな感じではなかったのですが、"The Chrome Packaged Apps State of the Nation" というセッションでかなりのサプライズがあったので、今日はそれの速報記事です。 このセッシ
Web系新卒っていうかゲーム開発者一年目が去年読んだ技術書 & ライブラリ - mizchi log
カタ氏(@hotchemi)が意識高い記事書いてたので、自分もまとめてみる。 文系学部生がSIerに入社してから読んだ本メモ - ギークに憧れて http://hotchemi.hateblo.jp/entry/2013/04/01/000844 自分Web系っていうかHTML5+Unity+AS3 のゲームガッツリ系+Webもやるって感じなので、最近の自己認識としてWebっていうよりはゲームプログラマな気がしている。 JSが多いのはHTML5ゲームの技術調査とかしてたからです。 書籍 ７つの言語 ７つの世界 作者: Bruce A. Tate,まつもとゆきひろ,田和勝出版社/メーカー: オーム社発売日: 2011/07/23メディア: 単行本（ソフトカバー）購入: 9人 クリック: 230回この商品を含むブログ (65件) を見る一部情報が古いが、ClojureやIoについて書かれた貴重
手軽にレンダリング！テンプレートエンジンTransparency
はじめに Transparencyは、Javascriptで記述されたテンプレートエンジンです。クライアント側にて機能します。このテンプレートエンジンは以下の特徴を持っています テンプレートをHTMLの一部として記述（DOM構造内に記述） 属性値に基づくデータの結合（<%= foo %>や{{foo}}などは不要） 繰り返し構造の描画（ループ処理の記述不要） 一般的なJavaScriptテンプレートエンジン（Underscore.js、Mustache、jQuery Templateなど）では、テンプレートをSCRIPTタグ内に記述します。レンダリング時にはテンプレートからHTML文字列を生成します。これらのエンジンを使った場合、HTMLファイルを編集しずらかったり、読み込みが遅れて画面がブレることが多々あります。 一方で、Transparencyを使うと、HTMLを編集しやすい上、レンダ
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
大規模 JavaScript その設計と実装と現実
ワイヤーフレームとはどういうものか？という概略 ワイヤーフレームだけでは説明しきれないところをどう補うか、が課題 Adobe XD Meeting #05での発表内容です
アプリ開発を効率化する 方法あれこれ
2015 MVP ComCamp 名古屋会場 (2015/1/31) PowerPoint のファイルは、OneDrive にあります。 http://1drv.ms/1yhJxpC
#CEDEC2012 JavaScriptベースゲームエンジン徹底比較
#CEDEC2012 JavaScriptベースゲームエンジン徹底比較 1. HTML5+JSフレームワークを 用いたゲームUI開発手法株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター 伏見 遼平 2. このスライドは以下のサイトからダウンロードできます 3. タイムテーブル• 15:50 ‒ 16:20 … フレームワークを比べる・使う – HTML5 とは? – JavaScript ゲームエンジンの勘所 – 各種ゲームエンジンの紹介• 16:20 ‒ 16:40 … フレームワークを作る – enchant.js の紹介 – サンプル・デモ• 16:40 ‒ 16:50 … 質疑応答 4. 自己紹介伏見 遼平 (@sidestepism)株式会社ユビキタスエンターテインメント秋葉原リサーチセンター (UEI/ARC)enchant.js 開発プロジェクト
CoffeeScriptってなんぞ？
kanazawa.js v1.7 - Back to Basics -（2012年3月31日開催）で使用したスライドです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit
オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開