Hello 生成されるJSそのものはピュアな感じなので、たしかにbosonicを捨ててもWeb Componentsとして成り立ちそうではある。 瑣末だが、この記事を書いてる時点で試したらWeb Platform featuresのフラグをEnableにしたCanaryで、bosonic-pollyfillsがエラー吐いてる... 余談、実はえらいかも Polymerコンポーネントって、結局Polymer入れないと使えないなら、BackboneJSで使えないAngularディレクティブみたいなもんな気がしてきた。Bosonicのコンセプト、実は偉いかも。（出来る範囲は制限されるかもしれないけど） — あほむバーガー (@ahomu) June 30, 2014 結論 個人的にはふつうのPolyfillとして動いてくれるものを精査したかったのだけど、結果的に Polymer/platform

リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも

Web Platform Dive into the web platform, at your pace.

この記事は賞味期限切れです。（更新から1年が経過しています） 最近になってIE6のサポートは減ってきましたが、IE8の息もまた長そうですね。 透過PNGについては以前も記事をしたためた事がありますが、 当時からまた事情も変わってきてると思いますので、ここに昨今の対応に関する雑記などを記しておきます。 前提 ここで言う「belatedPNG」は本家ではなく、 本家をフォークしている「jquery-belatedpng.js」を指しています 「おおきくくずれなければいい」IE6対応 「IE6ではおおきくくずれなければいい」 最近よく聞くようになってきたフレーズですが、つまり「完全にあわせなくてもいいけど一応見えるようにしてね」という事で、 見た目をある程度損なっても許容されるわけです。（と好意的に解釈しましょう。） ところで、今IE6を使うような人達は、おそらく諸事情があって「致し方なく」使っ

この記事は賞味期限切れです。（更新から1年が経過しています） 様々な理由から多くの方がAlphaImageLoaderよりもbelatedPNGを活用されているようですが、 単純明快な前者と違って、後者は便利な反面ブラックボックスな部分も多いです。 今回のお話は、そんなbelatedPNGを使用する上で注意すべき点と、困ったときのおまじない。 前提 ここで言う「belatedPNG」は本家ではなく、 本家をフォークしている「jquery-belatedpng.js」を指しています 何をしてくれているのか、知っておく まず、belatedPNG が行ってくれる処理をおさらいしてみましょう。 簡単に書いていますが、結構面倒な事を一手に引き受けてくれている事がわかります。 fixPng() をあてた要素の複製をVMLで生成してそれを表示する 元要素のスタイルの変更を検知してVML要素にも変更を加

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ファイル配置に悩む Gruntを使う時に 「.coffeeファイルや、.scssファイルをどこに置けばいいの？」 「ビルド後のファイルをどこに配置するのがいいの？」 って疑問に思っていたので調べてみた。 毎回悩んで適当に配置するより、良さそうな方法で決め打ちしちゃいたい。 Grunt Website gruntjs/gruntjs.com · GitHub Gruntの使い方みるなら、Gruntのホームページ見るのがよいかと思って覗いてみる。 まずはgitで管理されているソースコード % cd gruntjs.com % tree -d . ├── misc ├── src │   ├── cdn │   ├── fonts │   ├── img │   ├── js │   │   └── vendor │   │   └── lib │   ├── less │   │   └──

CSS スプライトを自動で作ってくれて Grunt で自動実行できるツール grunt-spritesmith を Windows 7 (64 bit) 環境にインストールした。（参考：Mac へのインストール） Grunt に関しては Grunt を使って LESS のコンパイル環境を作る を参照されたい。 PhantomJS のインストール grunt-spritesmith は、スプライト画像を作るエンジンとして phantomjs と gm (Graphics Magick / Image Magick) を選べる。PC-UNIX では node-canvas も選べるそうだが残念ながら Windows では動作しない。 PhantomJS は WebKit 互換の動作で、JavaScript を使って Web ページを制御したりスクリーンショットを撮ったりできるツールらしく、面白

開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者

コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ