position: absolute;

Emmet + hayaku プラグインのショートコードをしらみつぶし(2文字まで)


このエントリは、Sublime Text 2 Advent Calendar 2012 の 11 日目として書いています。

※当初Emmetの記事として書いていましたがHayakuを入れていたことを完全に失念してました。ちょっと修正してます。ごめんなさい。ごめんなさい。

Emmet自体は別段Sublime Text 2のみの機能ではないですが、HayakuはSublime Text 2のプラグインとして提供されているので…。

というか見て頂ければ分かると思いますが、この作業自体はSublime Text 2の複数行の選択機能で非常に手早く出来ました。

[Ctrl]+[Alt]+[↓]で行選択→先頭文字を追加or書き換え→[Shift]+[Ctrl]+[D]で行の複製→[Ctrl]+[/]でコメントアウト→下の行で[Tab]を押してEmmetの変換。という流れで。

EmmetやHayakuのショートコードは柔軟性がとても高く、ある程度コンテキストを踏まえた変換も行なっている感じですが、とりあえず上記のように一括で変換した結果を載せています。[a~z][aaからzz]とほんの一部です。すいません。

もし、利用価値が高そうなショートコードをお探しでしたらCSSの記述を高速化する、Emmet (Zen-Coding)|Web Design KOJIKA17>hayaku/hayakuが参考になるかと。


Facebookの「今どんな気持ち?」を消すuser.js


律儀な私は本当に気持ち書いて周りの人に「???」って思われそうなので消すことにしました。

一応user.jsのルールで書いていますが、chromeでしか動作は見ていません。他のブラウザで動くかは不明ですのでそこはご理解ください。

どうも一度プレースホルダを書き換えた後に再度「今どんな気持ち?」を入れてくる時があるようなので監視して2回書き換えたら動作が止まるようになっています。こちらが想定していない3回目があったら「今どんな気持ち?」になることと、1回で終わった場合監視用のタイマーが回り続けます。

ま、遊びで作ったようなものなのですが、本気で嫌な人はどぞー(笑い)
kimochinankadoudemoeeyan.user.js

※(2012-12-07)監視を止めてしまうと画面遷移した時に効かなくなるので常に監視するようにしました。


canvasでの画像加工 最初の一歩

GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012

adventar

GraphicalWeb Advent Calendar 2012 の 5日目の記事です。

(おそらく)はじめまして、よろしくお願いします。GraphicalWeb Advent Calendar 2012のエントリーとしてcanvasについて書きます。

canvasについては改めて説明はしませんが、これからcanvasについて知ろうという方はHTML5.jpの記事が参考になると思います。

というわけでcanvasで行う画像の加工について書きます。元々描画機能もありますし、画像の重ねあわせというのも可能ですが、今回はcanvas内の画像の各ピクセルの情報取得とその編集/変更についてになります。

※今回のデモなどは一応HTML5が動作するブラウザを想定して作成していますが、あらゆる環境での動作を保証するものではありません。ご理解の程おねがいします。


12月1日(土)第31回WebSig会議「創り手が意識すべきタブレット,ユーザが使い始めるタブレット」の岡山サテライト会場を用意しました

今週末の12/1(土)にWebSig24/7さん主催のイベント【第31回WebSig会議】創り手が意識すべきタブレット,ユーザが使い始めるタブレットの岡山サテライトを行うことになりました。よろしければご参加検討お願いします。

ATNDにて受付中です

テーマはタブレット。

Windows8も発売されてノートPCもタッチデバイスとして利用していくというスタイルが普及していこうという情勢ですが、Windows8に限らずiOSやAndroidでもタブレットのサイズが多岐にわたっていますし、「ファブレット」なんていう言葉も出るぐらいスマホとタブレットの境界も曖昧になってきています。そしてタブレットデバイスがPCのシェアを食いつつある今、「スマホ対応」に追われていた業界が次はタブレットにどう向き合うべきかというのを考える必要があります。

その状況把握とワークフローや開発の姿勢などを考えていく一助になるのではということで開催しますので、土曜日のお昼から予定が空いている方はよかったらご検討くださいませ!


フロントエンド開発者であれば知っておくべきモバイル/デスクトップブラウザのバグやトリック20

斉藤さん(@cssradar)が紹介していた20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should knowがおさらい的に参考になったので各項目の表題だけ訳しておきました。ほとんど邦訳するということがないのでおかしい部分などありましたらご指摘頂けると幸いです。

各内容の詳細については訳していません。本文とサンプルのソースを見れば大体わかると思います。

また、Gistにも置いています。