ダウンロードは以下から。
Downloads – zen-coding – Project Hosting on Google Code

コーディングがはやくなる！？「zen-coding」 (1杯目) | Security.GS Magazine （1杯目）

では、始めましょう。
今回は試しにXHTMLでSKYxLOVE.info – 空が好きな人のサイトこちらのサイトを試しに打ってみましょう。
www.skyxlove.infoのソース

まずは、このサイトのバージョンがXHTMLなので、

html:xt

これで、HTML/HEAD/BODYが出てきたはずです。
linkでスタイルシートを呼び出す

link:css

とやれば<link rel="stylesheet" type="text/css" href="style.css" media="all" />と、でてきます。
大雑把に構造を書きます。

div#base>div#header+div#main+div#footer

こうすると、<div id="base"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div>となります。
id=headerに

h1+span

id=mainに

slideshow>img.slideshowimage$*13

と入力するとスライドショー部分ができて（Classの空白はZencodingでは開けられませんでした。

div.iconthm>h2+a[href=images/pho/$$.jpg]*13>img.fade[src=images/pho/res/$$.jpg][alt=サムネイル]

で$$の部分がすべて01だと思うで置き換えると、#mainは終わりです。
id=footerに

(div.l>p>strong+br+a)+(div.copyright)

とすると、Class=lとClass=copyrightがでてきます。
あとは文字を入れるだけなので、構成がわかっていれば数十分で終わります。

たまにはZen-codingを使わないで・・・・と思ったら、Ctrl+Cを押しすぎてつかれてしまったのでそう考えたりすると、Zen-Codingとっても便利ですね！
では３回目はCSS系のCodingを。

http://kyoto-gtug.org/event/html5hackathoninkyotoboshuukaishi

ハッシュタグ「#kyotogtug」：http://twitter.com/#search?q=%23kyotogtug

と言っても、コーディングしてるので何も書けないかもしれません。
ゴメンなさい。。。

今日のハッカソンについて

会場はKRPです！！！！！！！！

svn(11:08)

git-svnの使い方がよく分からないので、取り敢えずEclipseのSVNプラグインを入れました。

13:00更新

昼ごはんを買ってきました。
うどんを普通に食べるのが憚れる雰囲気です。
プロジェクト自体は、プレゼンスライドに文字を入れる、画像を入れる（ドラッグアンドドロップで）、文字のリプレイスとリサイズを実装する段階までいきました。

15:25更新

どのチームも最終的な調整と発表資料作りに突入しました。
僕も担当のJavascript部分はある程度形になった感じです。

16:00コーディング終了

各チーム発表中です。

16:39

Toolチームの発表終了しました。
うちのチームはデモが上手く行かなかった感じです。
firefoxでしか動きませんがこんな感じです。
http://pastak.cosmio.net/html5/html5_hackathon/svg_drop_file.svg
ドラッグアンドドロップでローカルにある画像を配置したり出来ます。
また、文字や画像の再配置もドラッグアンドドロップで可能です。
（ハッカソンなのでバグが多いかもです）

16:48更新

ニコ生で中継されてるみたいです
http://live.nicovideo.jp/watch/lv17190436

16:56更新

「過去の残念な思い出の写真を爆破してくれるwebサービス」 Graphicチーム
で会場が爆笑に包まれていました。

17:13更新

ブラウザからVNCライクを実装したチームが居て、歓声が上がっています。
Web Socketで実装したそうです。
サーバのファイルを落としてきたりもできる。逆も可能。（ブラウザ画面上にドラッグアンドドロップでサーバ側にファイルを転送する）

MacのSafari上でWindowsマシンを操作しています。

Windowsを操作して、Windows上のブラウザでGoogleにアクセスしています。

写真上側のノートパソコンがサーバサイド、写真下のスクリーンがクライアントサイドになっています。

Opera Widgetの紹介

HTMLでスタンドアロンなアプリケーションを作れる。
ローカルのファイルに書き込みをするようなAPIも実装されている。

W3C Widget

W3CによってWidgetに関する仕様が策定中らしいです。
「W3C widgetとOpera widgetの仕様については、Opera社員がW3C仕様のエディタなので、ほぼ違いはない」とのことです。
http://journal.mycom.co.jp/articles/2006/11/15/widgets/index.html
http://www.w3.org/TR/widgets/

白石俊平さんのプレゼン

extend.js

http://code.google.com/p/extendjs/

「Javascriptでよく使う関数をまとめておきたい」
例えば・・・trim()
「X()で囲むと、どんなオブジェクトもパワーアップ出来る」
フレームワーク自体も拡張を可能。

keywatch.js
「キーイベントの制御は面倒だ」
まだ未公開です
Ctrl+Sとかも簡単に仕込める。
こういう感じらしいです
keywatch(textarea).ctrl().keyCode(KeyCode.S).keyup(function(){})
jQueryとも同居出来る。

17:47更新

今から投票です。

17:52更新

我らがToolチームは３票でした。

優勝はVNCを実装したチームです。
景品はGo langageのTシャツでした。

２位はMultimediaチームでした。
DJプレイがaudioとかで実装されていました。
プレゼンテーションの上手さも得点だったようです。
景品はGoogle Code Jamのステッカーでした。

おめでとうございます！！！！！！！！！！！

白石俊平さんのお子さんがもうすぐご誕生です

数日中にお生まれになるそうです。
安産祈願のお守りがKyoto GTUGからプレゼントされました。

これにて全日程終了です。
お疲れ様でしたーー

　まず、オプションを選択します。　翻訳バーではなく、総合オプションのほうです。

　高度な設定　タブを開きます。　そして中くらいの場所にある、”母国語以外のページで翻訳ツールを表示する”のチェックをはずします。

終了です。
意外と簡単なので、邪魔だと思っている方はやってみてはいかがでしょうか?

HTML

<input type="submit" class="submit" value="送信" />
<input class="reset" type="reset" name="reset" value="リセット" />

CSS

.mailform .submit, .mailform .reset {
width: 120px;
height: 43px;
cursor: pointer;
text-indent: -9999px;
font-size: 0;
line-height:0;
overflow:hidden;
}

見事に消えます。GoogleChromeなどでは消えません。

対処方法としては
display:blockを指定するということです。
変更後

.mailform .submit, .mailform .reset {
width: 120px;
height: 43px;
cursor: pointer;
text-indent: -9999px;
font-size: 0;
line-height:0;
overflow:hidden;
display:block; /*追加*/
float:left; /*追加*/
}

並べて表示だったのでフロートを付けました。
これできちんと出てくるはずです。

題名の通り、 「FireFox終了時に自動的に全てのタブをブックマークする」アドオンを紹介したいと思います。

BookMark ALL Tabs というアドオン。

何か調べ事な どをしていると、あっという間にタブを開きすぎてしまうなんてことがよくあると思います。

アドオンのTabMixPlusなどを使うと、タブを開いたままFireFoxを終了させると、そのタブが次回起動時にも 引き継がれるという事が可能です。

しかしタブを 何十個、何百個とあったまま、終了すると一気にその数だけ開かれ、CPUパワーをかなり食います。

しかしこのBookMark ALL Tabsですと、お気に入りに追加し、タブとして全て開かないので、ブラウザを間違って終了してしまったときなどに有効です。

インストール は簡単、https://addons.mozilla.org/ja/firefox/addon/11199に アクセスし、FireFoxへ追加というボタンをおし、FireFoxにアドオンをインストールします。

そして FireFoxを再起動するとアドオンが有効になります。（この時、まだ設定が完了していないので、お気に入りには追加されません。)

FireFox 上部のツール→アドオンのように辿り、BookMark ALL Tabsの設定をします。

このような設 定画面が出ると思います。

「FireFox 終了時に自動的に全てのタブをブックマークする」を選択すると、開いているタブすべてを終了したと同時にお気に入りに追加してくれます。

「終了 時に追加したブックマークフォルダには’At END’と付与する」はその言葉の通り、At ENDと付与されます。

「未整 理のブックマークへブックマークする」をチェックすると、FireFox上部のブックマークからはそのままではみられず、ブックマークの管 理をすることによって管理することができます。

しかし、全 てのタブをブックマークするにチェックを入れておくと、最後の一つのタブまでブックマークされるので注意です。毎回一つはブックマークされること になります。（自分の環境では最後の一つのタブを閉じることができなかった）

なので、自分 はCtrl+Shift+Aを押すことによってブックマークしています。

Ctrl+Shift+Aは、 自動的ではなく手動でブックマークすることが可能です。

BookMark All Tabs、使ってみてはどうでしょうか？

この記事はLoppsとの同時投稿です。

今回、軽くて拡張も自在なgoogle chromeの便利な拡張機能などをまとめてみようと思います。

このgoogle chrome、ほとんど初期では機能が無いので軽いの何の凄いです。
(拡張機能を入れても充分他のブラウザよりは軽いですが、初期よりは遅くなることがあります。
パソコンのスペックなども関係してきます。)

私が入れている拡張機能一覧、

• Chrome Gestures　マウスジェスチャーです。　左右上下とドラッグすることで楽にページ操作が出来ます。
• Google Reader Notifier (by Google)　googleリーダーの更新が無いかを自動的にチェックし、表示してくれるプラグインです。　アドレスバー右に表示されるので、見やすくていいですよ！
• Hatena Bookmark GoogleChrome extension　はてなブックマーク登録を簡単に出来、登録数を表示してくれるプラグイン。　分かりやすくていいです。まだ少し不具合などありますが、そこまで気になりません。
• IE Tab　うっかりIEをアンインストールしてしまってもタブ内でIE表示が出来るのでもう1度インストールしてくる必要が無いという便利なプラグイン。　IE専用ページでも、デザイン崩れしていないか?の確認にも使えます。
• AutoPatchWork これは凄いです。
  スクロールで次のページに移動できるので、1度入れると手放せなくなります。
  ですが、あまり激しくページ移動するとサーバーに負担をかけてしまうので注意してください。
• Chrome Stylistこれは任意のスタイルシートを適用できるので、
  文字の色を見やすく設定するなど調整自在です。

もっと使っていたこともあったのですが、このくらいで丁度いいかと思っています。
とにかくメモリを食わないので軽さ重視の方は使ってみてください。

google chromeはどんどん進化しているので、目が離せません…！

Photoshopのグラデーションマップを使って画像を簡単に修正します。
（ほぼコントラストを上げているだけですが、グラデーションマップによってグラデーションができて通常のコントラストの修正より良い感じになります。

画像を開きます。

メニューの　レイヤー(L) の 新規調整レイヤー(J)でグラデーションマップ(M)をクリックします。

ここでは、描画モードをオーバーレイにします（後で変更できます。OKを押します。

グラデーションの選択が出てくるので、ここでは「黒、白」（#000000⇒#ffffff）にしました。

そうすると、レイヤーが新規作成されて画像が変わったかと思います。そのレイヤーを非表示・表示をしてみるとよくわかります。

ピンクの囲いのところで描画モードが変更できます。コントラストが強すぎるとかなら不透明度を調整してみてください。

ただこの方法は、空とか単色が多いものではいいですが人物などでやると白が飛んでしまうので注意です。

使用する画像です。
<h4 style="font-size: 30px;">
<span style="background: transparent url(http://hy.lgr.jp/2009/07/17/test.png) repeat-x; position: absolute; display: block; width: 500px; height: 30px;"></span>
テキストサンプル。Text Sample
</h4>ソースはこのような感じです。
spanが重要で、そこにグラデーションを背景にしています。
Backgroundでは、横のみスクロールするようにして背景はtransparentを使い透明にしています。
position:absolute　がCSSで一番大事でこれを指定しないときちんと表示できません。
display: block はSpan要素をブロック要素にするために指定しています。
それほどHTML・CSSは難しいものではありませんが、グラデーションをすると文字の印象が変わって良いかと思います。
透明PNGを使用しているので、デフォだとIE6では表示がおかしくなります。

私のブログの発掘物。

Twitterのサービスはいろいろとありますね。
このサービスはTwitterのツイートで”www”を集めて表示しているサービスです。

自分もｗｗｗとやってしまいそうな、面白いモノなどがありますね！
眺めているだけで楽しい感じのサービスです。

このサービスを作成した方のブログで PHPのことが書いてあったのでそれを読んでPHPで初めて作ってみたとかすごいと思います!

デザイナーがwebサービスを10週間で作れるようになる方法。または私は如何にしてPHPを愛するようになったか。

GoogleChromeとFirefoxで確認。（IE７だと影とかがおかしくなります。

面白いなぁと思ったので紹介しておきます。

左の下にあるスイッチみたいなのをONにすると右上の電球に明かりがともり、ロゴに影ができます！

そこですげー！と思いましたがロゴをドラッグできるのです。

しかも影もきちんと普通の影のように薄くなったり大きくなったりします。

すごいですね。