サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
dsuket.hatenablog.com
はじめに 年末に書いたエントリーについて、あちこちで言及がありました*1。 師走の忙しさにかまけて勢いで書いてしまったところも多いので、少し補足をしたいと思います。 Virtual DOMってどんだけ早いの?測ってみた - webとかmacとかやってみようか R まず、最初に断っておきますが、これは Virtual DOM のパフォーマンスを厳密に測定したものではありません。元ネタはこちらです。Blazing-Fast-Html(翻訳: 【翻訳】爆速HTML – Elmでの仮想DOM) AltJS の一つである elm という Haskellっぽく FRP を実現できる関数型言語があります。それを作っている Evan Czaplicki 氏のBlog記事です。彼が作った TodoMVC のパフォーマンス比較が github に公開されているので、それを各ライブラリを最新版にして紹介したのが
この記事は VirtualDOM Advent Calendar 2014 - Qiita の2日目です。 mizchi くんから誘われて軽い気持ちで参加したら、初日からえらくエモいエントリー(VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita) でブルってます。 Virutal DOMとは、と言う話はしません。初日を見てください。いろいろ良いことあるみたいだけど、Virtual DOMってどんだけ早いの?知りたいですよね。 Elmの中の人が作ったTodoMVCのパフォーマンステストがあります。 いつものTodoMVCのデモで、100要素追加して、全て完了して、削除するというテストです。 「Run All」ボタンをクリックすると動きます。 http://evancz.github.io/todomvc-perf-comparison/ Virtua
スマホ用のWebページ(アプリ)なんかを作っていると、Chrome や Safari でその画面サイズで表示を確認したいことが多いですよね。インスペクタ便利だし。実機とかエミュレータとかめんどくさい。 一般的なスマホの画面サイズ 320 x 480 にブラウザのウインドウサイズを変更すれば、メディアクエリとかで自動的に表示を切り替えてくれるはず。が、私のMacだとなぜか Chrome/Safariの横幅が 400px までしか縮められない!微妙に足りない!!(Windowsならもうちょっと縮むとか??) サイズを変更する Chrome Extension とか試してみましたが、だめでした。やはり 400px 以下になりません。しかし、JavaScriptで別窓を開けば自由にリサイズできることが分かりました。 そこで、今見てる画面を、スマホサイズで別窓で開くブックマークレットを使うことにしま
前回のエントリでもお知らせしたように、ドコモゼミ Webアプリラボのコンテストにアプリを出しました!面白かったら下記ページの いいねをお願いします! かきまる スマートフォンを使いながらも、アナログな感触をもっと楽しんで欲しい。そういう想いで考えられた、デジタルとアナログを繋ぐお絵かきWebアプリです。 . で、今回のエントリでは 前回のHTML5機能を色々使ったスマホ向けWebアプリを作ってみた話:前編 で書き切れなかった残りを解説します。 今回は次のトピックス かわいい文字で表示したい。 音があると楽しい。 スマホとタブレット両方対応。AndroidでもiPhoneでも。 Webフォントでオリジナルフォントを使う Androidがいけてないの一つが、フォントにあると思っています。標準フォントや入っているフォントやが機種によりバラバラ。しかも標準フォントがダサイのが多い。あまりに違うため
昨日、ドコモがやっているWebアプリコンテストのノミネート作品が一般公開されました。 私も、デザイナさんと協同して作品を一つ出しました!面白かったら下記ページの いいねをお願いします! かきまる スマートフォンを使いながらも、アナログな感触をもっと楽しんで欲しい。そういう想いで考えられた、デジタルとアナログを繋ぐお絵かきWebアプリです。 . 子供達が家の中でスマホだけをいじって遊ぶのでは無く、実際のリアルな紙と色鉛筆で本物の感触で遊んで欲しい。そのきっかけをスマホアプリで与えられないか?というモチベーションで作られました。そのあたりのコンセプトはデザイナさんのアイディア。私は主にその実装担当です。 そういう狙いはあるのですが、簡単に言ってしまえば紙芝居形式で動物の絵を表示して、それをお手本に絵を描く、という至ってシンプルなアプリです。 何も考えずに作れば、複数のWebページを遷移する単な
JavaScript のビルドツール grunt が熱いということで使い始めました。 Sencha Touchの場合は senchaコマンドでビルドできるのですが、それ以外のプロジェクトでリリースビルドを作るのに、sassのコンパイル、cssのminify、jsの結合とminify、そしてリリースディレクトリへのコピーなどを一括で行うために使っています。 便利なんだけど、毎回全ビルドが走るのがどうにも非効率だなぁ、と感じていました。更新されたファイルだけ対象にしてくれればいいのに。というかantとかrakeとか他のビルドツールには普通あるでしょ! 同じような事を思っている人は当然いるわけで、gruntに提案されています。しかしまだ取り込まれていないようです。→ Provide conditional support for file inclusion ここでも言われてますが、gruntの
HTML5 で追加された audio/video 属性によって、プラグインレスで動画や音声の再生が可能になったことはよく知られていますが、モバイル(スマホ)で、その再生タイミングの制約が厳しいことは案外知られていません。これは以前、当Blogでも HTML5 x Touch UI の UXを考える(補足) の User action event restrictions でもチラッと書きました。またしてもこの制約に苦しめられながら、なんとか解決策を見いだしたので、GW最中にも関わらず久しぶりのエントリーです。 まず、本家 Apple のドキュメントにも以下のようにあります。 iOS-Specific Considerations In Safari on iOS (for all devices, including iPad), where the user may be on a ce
2年ほど前に書いた記事 #import の使いどころ:循環参照しないために。 が未だにそれなりにアクセスがあるのですが、これは間違いがあります。正確にいうと、間違いでは無いのですが、冗長であまり意味のない記述でした。 #import は C言語の #includeを拡張して、一度だけしかヘッダファイルを読み込まないようになっています。そのため基本的には循環参照は起こらないようになっています。 では、何が問題になるか。 先の記事のコードは、以下のようなものでした。 ClassA.h #import "ClassB.h" @interface ClassA { ClassB variableB; } @end ClassB.h #import "ClassA.h" @interface ClassB { ClassA variableA; } @end これをコンパイルすると、以下のような処理
年末年始に書いていた本「HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド 」が遂に出版されました! 共著で私は主に7章、8章あたりを担当させていただきました。メイン担当はありますが、もちろん他の部分もレビューし、全体的に参加しています。 Sencha Touch 2についての本は意外と少なく(日本語書籍では2冊目)、これだけのボリュームのある書籍は世界でも希です。(現時点では)まさにパーフェクトといえる内容だと自負しています。 特に3部の実践では、実務で役に立つ内容がてんこ盛り!実際に使った人が悩むポイントやはまり所などが詳しく解説されています。私も非常に勉強になりました^^; しかし、まだまだ書き足りないと思うところがあるのも事実。。特に Ext のユーティリティメソッドに関してはほとんど触れられなかったのが少し残念です。(そのあたりは後述の
今さらながら Sublime Text 2 をちょっと便利に使うTipsを2つほど。 Expand Selection の スキップ Sublime Text の特徴の一つに、Ctrl-D とかでどんどん単語を選択して、マルチセレクトで一括編集できる Expand Selection というものがあります。これはとても便利なのだけれど、特定の箇所はスキップしたい、ということも良くあります。 例えば、次のようなコードで、 "hoge_name" と "fuga_name" を、それぞれ "hoge_nickname" と "fuga_nickname" に変えたいとします。 var name_1 = "hoge_name"; var name_2 = "fuga_name"; "hoge_name" の "name" 部分を選択して Ctrl-D すればいいじゃん、と思いますが、そうすると
お世話になってるデザイン事務所で、最近よく聞くgitってやつについて教えてよ、ってことで話しました。 デザイナのためのGit入門 from dsuke Takaoka デザイナさん向け中心に、まずはイメージを掴んでもらう概要の説明となってます。コマンドとか意図的に載せてません。それは参考資料見てください。 30分前に急いで作ったので間に合わなかったとかじゃないから!(>_<) 話して驚いたのが、結構みんな git = github だと思ってたということ!githubの省略だと思ってたとかw Subversionでいいじゃん、という話しもチラホラ。確かに現状困ってないのなら Subversionでも全然よいかもしれません。個人的に思うチーム開発でSubversion使ってて困ることは、どうしてもコミット単位が大きくなりがちなこと。他の人に影響与えるといけないので切りの良いところでコミットし
本記事は、Sencha Advent Calendar 2012 の23日目の記事です。1日遅れでごめんなさい!あ、今日であってた(;´▽`A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前!おめでとうございます! Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。 原文: The Making of Fastbook: An HTML5 Love Story 和訳: HTML5へのラブストーリー: メイキングオブFastbook ネイティブを凌ぐすごいパフォーマンスに驚きますよね!これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。 ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbo
本記事は、HTML5 Advent Calendar 2012 の12日目の記事です。なんとか本日中にあげれるか・・ アップできた! 業務やらイベントやら本やらで死ぬほど忙しいなか、無謀にもHTML5 Advent Calendarに参加してしまった@dsuketです。こんばんわ。 先月の段階ではここまで修羅場になるとは思わなかったのですが、師走は恐ろしいものですね。年末にこんな首を絞めるイベントが山ほど各所で行われているとは、つくづくエンジニアはM属性だと思いました。 本ネタは始めは「HTML5で出来ること」にしようかと思っていたのです。が、そんな話は山ほどある。もはや食傷気味ですよね。そこで逆転の発想で「出来ないこと」にすればいい!と閃いたわけです。さすが良い閃きだな−、俺冴えてる!と思ったのも束の間。念のためググってみると・・・「あれ?いっぱいあるぞ・・( ̄0 ̄;)」 しかし、検索上
最近のモダンブラウザのJS実装には、Array#forEach や filter, map などがビルトインされている。 jQuery とかの each使うより、ネイティブ実装のほうが早そう。しかし forEach、filter、map の速度に違いがあるのかちょと気になったので実験してみた。 環境は Mac OS X 10.7.4, MacBook Air(Late 2010) 2012/06/22 追記: −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− Sencha Touch, iPad等を追加しました → JavaScript の Array.forEach vs jQuery.each vs Ext.each −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
本日、iOS6がリリースされましたね。明日は iPhone5 の発売日。Mobile Safari も大幅にアップデートされて、Web開発者にとって非常に気になります。 iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more で素晴らしいまとめがありましたので、簡単に紹介したいと思います。 iPhone5 新しい画面サイズ 新しい 4インチ画面になり、解像度は WDVGA (Wide Double VGA) 640×1136px になりました。横幅はこれまでと変わりませんが、高さが 176px 増えました。 新しいシミュレーター Xcode4が新しくなり、iOS6のシミュレータが出ました。Mac AppStore からダウンロードできます。 何をすべきか 画面
昨日、ありえるえりあミニ勉強会#3 ~Sencha Touch で、「HTML5 x Touch UI の UXを考える」 を発表しました。 発表資料は こちら HTML5 × Touch UI の UX を考える 川野さんの「Sencha Touch - カスタムコンポーネントを作るためにおさえておきたい 10 のステップ」、森本さんの「About Sencha Architect」も非常に面白く、勉強になりました!Sencha 使ってない方でも勉強になるかと思いますので、ぜひ次回でも覗いてみて下さい! そして、懇親会も楽しかった!まさかみんな Sublime Text 2 ユーザーになっているとはw 他にも Inkpod(Desktop版) を使ったことあるという方もいてびっくり!色々と刺激を受けることが出来ました。 帰って Ust で自分の発表見直してみたら、やたらと咳払いが多いです
今日、 ありえるえりあミニ勉強会#3 ~Sencha Touch で 「HTML5 x Touch UI の UXを考える」というタイトルで発表してきます。 その資料がとりあえず出来たので、一足お先に こちらで公開します。 UX on HTML5 x Touch UI from dsuket Webアプリの Touch UI で UX を実現するために、ということで Touch UI の概要や課題、Touch API の仕様と現状、そしてUX実現のポイントなどについて書いてみました。ちなみに、Touch API は HTML5ではないのでタイトルに偽りありです(^^; すみません。。 ちょっと詰め込みすぎた感はありますが、まだまだ書ききれないことも沢山。 後日、当日の様子と補足記事なんかもアップできればと思います。 (補足を書きました http://dsuket.hatenablog.co
ここ最近のWebアプリの進化に伴い、ネイティブアプリ並のUIを持ったWebアプリへの期待が高まっています。jQueryなんかで簡単にDOMを操作できるようになりましたが、ある程度の規模のアプリを作ろうとすると jQuery だけでは厳しいものがあります。 そこで、JavaScript でも MVCパターンを適用し、モデルとビューの分離して、開発・保守しやすい設計にする、という流れになってきています。MVCは、元々は Smalltalk で GUI アプリを作るときの設計指針として考えられました。デザインパターンの一つでもありますが、Singleton や Observer といった GoFのデザインパターンよりも抽象度の高い、ソフトウェアアーキテクチャです。 そして時は流れ、Webの時代になると Strutsなどで代表されるWeb3層モデルとして、Webアプリの設計パターンとして一世を風靡
とあるサイトの更新をしてるのですが、未だ生HTMLファイル編集だったんですね。いい加減 生HTML管理も限界。WordPressとかでもいいんだけど、MySQLとか入れるのめんどくさいし、テーマをカスタマイズするのもちょっと手間だ。なんといっても php 書きたくないw ということで色々探していたら jekyll というものが良さそうだったので試しに使ってみることに。 jekyll とは、rubyで書かれた静的サイトジェネレーターです。ジキルと読みます。ジキル博士のあれですね。githubのユーザーページなんかにも使われているそうです。 特徴 Liquid というテンプレートエンジンを使ってる。 MarkDown 形式でかける。(デフォルトでは maruku を使用。) WEBrickを使ったWebサーバも内蔵して、書いた物をすぐ確認することも出来る。 githubページを利用するなら連携
このページを最初にブックマークしてみませんか?
『webとかmacとかやってみようか R』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く