タグ: html

Zen-CodingがNetBeansでもインストールできたのでメモ(Macだよ!)

HTMLガシガシ書く人なら注目してたであろうZen-Coding
ちょっと前から Coda にはインストールして使ってみてたんだけどね。
詳しくは、@cipherさんのブログが圧倒的に詳しくて親切でわかりやすい!
しかも、ガイヤ、マッシュ、オルテガの黒い三連星だ!(謎

まあ、NetBeansもあまりよくわかってないまま使っていたので、.nbmじゃないファイルだとどうしていいかわかんなかった。しかもサイト見てもロシア語でわけわからんw
まずは、Downloads – zen-coding – Project Hosting on Google Codeから、NetBeans用のファイルをダウンロード
画面:ダウンロード画面
解凍すると、『NetBeans.Zen.HTML.1.2』というフォルダができる。
その中の『config』フォルダを、『~/』つまり『Home』の中の『.netbeans』-『6.8』-『config』に上書きする。んでNetBeans再起動かな。
CodaやDreamweaverは、変換は『Control』+『,』なんだけど、NetBeansの場合は、『Tab』というとこが一番違うとこかな。
あ、設定とかは下記のファイルを書き換えればいいみたいよ。
~/.netbeans/6.8/config/Editors/text/html/CodeTemplates/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml

Zen-Codingの特長は、エディタやIDE超えて同じようにして、スピードアップできるという部分じゃないかな。
『.netbeans』は不可視フォルダなのでターミナルからコマンドでコピーする。
もしくは、Finderで不可視フォルダを表示するようにしておく(オレこっち派)
ターミナルで

と打ってリターン、その後、

でFinder再起動。
戻したいときは、

と打ってリターン、その後、

戻さないけどね

HTML触る機会があるユーは、『Html Validator』使っちゃいなよ!

Webの人だったり、Webアプリケーションに関わるプログラマだったり、HTML触る機会がある人は、
Firefoxのアドオンの『Html Validator』を使うべきです。
Firefoxのアドオンのページには、Html Validator :: Add-ons for Firefox
「MacOSⅩでは利用できません。」みたいに書いてあるけども、開発者のページには各OS用が用意されている。
Html Validator for Firefox and Mozilla
HTMLの細かい部分はどうでもいいんだけど、(本当はそこに拘っているんですがw)
だれかみたいについうっかり閉じタグ忘れてたり、id重複してたりの致命的なヤツはダメでしょ。

Validな例(先日公開した Backlog|お仕事うまくいきまスター☆
画面:Validな例
ウインドウ右下が緑丸になる
ダメな例(ここのブログw やっぱBloggerからWordPressとかに乗り換えようかなあ)
画面:ダメな例
ウインドウ右下が赤丸(エラー)とか黄色三角(警告)とかになる

ウインドウ右下の色が変わった部分をダブルクリックするとエラー内容もわかる
画面:エラー内容

Drawter.com – DrawAble Markup Languageに萎えた【期待age】

リーダーチェックしてたら、
ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI.COM
というのを発見。
百式さんのスクリーンショットもいい感じだし
「こりゃあ、要チェックですぜ!先輩!」ってな訳で見てみた。
なんか使いどころあるかも知れないじゃない!
確かに、作者さんのJavaScript力はスゴいかもしれない。
JQuery作品としてはかなり優秀な作品なんじゃないかな?

それっぽいのを作ろうとしている所-1枚目

それっぽいのを作ろうとしている所-2枚目

配置方法は一応選べる

Auto floatで生成してみたコード

  • charsetの前にtitleタグ来た時点で萎える
  • Auto sizesで生成したらposition: absolute;連発
  • JQuery作品として見るにはいい
  • Dreamweaver持っている人は見るのは時間の無駄になる可能性あり
  • まだ使えね〜
  • でもそのうちこんな風になるんだろうな

マークアップエンジニアという言葉に釣られてなんか書いてみるテスト

大工とマークアップエンジニア 〜宮内寿和を知って〜|groowebとか
アクセシビリティ講義で実際に音声読み上げブラウザを使わせてみたよ – 我流天性 – がらくた屋とかに
釣られてなんか書いてみるエントリー。

あえて、マークアップなんてどうでもいいと書いてみる

今そのページを見てる人にとって、マークアップなんて結構どうでもいいと思っている。
「そのうちソフトでできるようになるんじゃないの?」とか
文字サイズを大きくしたり小さくしたりして主要ブラウザで崩れなければそれでOKじゃない位の勢いで。
大多数の人がソースなんて気にしてない。大多数の人が読み上げ式ブラウザ使ってない。
大工さんの作る家と違ってWebサイトは数年したらリニューアルだろみたいな。
そもそもHTMLからXML準拠のものに準拠させたのがXHTMLですが、
データの再利用化とか言われてましたが、再利用化されてるんでしょうか?
確かに、スクレイピングするときとか便利かも。
しかし、発信者側から見たらAPI利用した方がスマートじゃね〜。とか思ったり。
プロボの中の人は、grooweb|福岡天神で働くWEBエンジニアのブログの中の人や我流天性 – がらくた屋の中の人に勝るとも劣らない位の勢いでマークアップにこだわっている。
どうしてでしょうか?
簡潔に言えば、「それが仕様だから」なんです。
ユーザーエージェントも仕様に準拠しようとして作ろうとしてるんだろうから(そうでないのが厄介だよね)
仕様に準拠した(X)HTML書こうとするのは当たりまえじゃないと?
確かに現在、携帯とか「えっ!外部CSSダメと?」とかいうのもあるので、一筋縄ではいかんかもしれん。
でも、もうどんなユーザーエージェントで閲覧されるかわからん時代に突入しているのでは?
Webサイトって、印刷物と違うから最終的な見た目とかは、ユーザが決めるモンやろうもん。
そんな中でもキチンと意味の通るWebサイト作りたい訳で。
ユーザビリティやSEO、アクセシビリティは当然いい方がいいに決まってるし。
欲張りだから、できるだけ良くしたいw
ワンパクの阿部さんのプレゼン真似れば、
「【使いやすいWebサイト】と【使いにくいWebサイト】どっちがいいですか?」ということで。
しかも、ユーザビリティやSEO、アクセシビリティって、方向性はいっしょだと思うし。
そういうのが「あたりまえ」と思うと、「他でちゃんと勝負できんといかんね〜」と自分に言い聞かしながら、
そういった意味で【どうでもいい】と言ってみたw
そんな40歳の晩秋。

自動リロードについて私の場合

vimもemacsも使いこなせない西嶋です。
どちらも保存したら、ブラウザをリロードする技が流行ってるようですね。
確かに、一度にリロードできるっていうのは、魅力的。私は、どうしてるのかと言うのをちょっとだけ。
自分の場合は、レンダリングの正しそうなブラウザなんかで確認して、後でおちゃめなブラウザの調整をするという手法でやってます。
CSSを書く時には、CSSEditというのを使ってまして、これのプレビュー機能が素晴らしいのでありまして、これに頼ってます。
おちゃめなのは結局手動でリロードさせてる次第ですが・・・。

  • CSSファイル画面とプレビュー画面が別(デュアルモニターのときに特に便利)
  • プレビュー画面もタブ
  • 反応がリニア(保存しなくても反映される)
  • インスペクタというのも付いている(手書きで書いちゃうので今ひとつ使いこなせてない)

HTML.vimでVimでのHTML編集が楽になる

最近、Vimが良いとの事で、使い始めたが、正直なにがいいのか?今ひとつピンと来てなかった。
前のエントリーでclosetag.vimについて書いたが、基本的な使い方がわかってなかったorz
Vim使いの人は、HTMLの編集には、HTML.vimとか使ってるんだな。
オレのVim環境は、杉山さんに作ってもらった環境なんで、HTML.vimはインストールしてあったけど、Last modified: Jan 03, 2007 ってなってたので、最新のファイルをダウンロードした。
ダウンロードしたファイルを開いて、サイトに書いてある通り、『:source %』って入力したら、自動でインストールできた。スゲ。

これで、filetypeがこのプラグインが動く状態になっていれば、HTMLの編集は、かなり楽になるはず。
ちなみに、オレの環境はfiletypeはhtmlでもxhtmlでもプラグインは機能してるみたい。
あとは、HTML.vimのヘルプテキスト見ながら、;○○っていうのを打ち込めば、タグが勝手に出て来て、その時のカーソルの位置もいい感じ。
例えば、;af って打てば、↓ここまで出て来て、カーソルは””の中間に来てる。
しかも、ショートカットの設定というか、キーのマッピングが直感的にわかりやすい。
知らなくても、これかな?って打ったら出てくるじゃん。
こりゃちょっと慣れたら、Dreamweaverより早いな。
次はCSSファイルだな。