Home > html

html Archive

FlashでいうパブリッシュのないHTML開発で、死なないためにやっといたらいいんじゃない的なこと。〜Ctrl+Enter Again〜

2013.4.23追記、cakefileよりgruntを使うのが正解です!

11/3のf-siteでしゃべってきました。

伝えたいことがいっっっっっっぱいあって、超かけあしになってしまったところがたくさんありました。そのうちのひとつ、htmlまわりの話をフォローします。

たぶん、このくだりを3-4分くらいでやっちゃったので、ポカーンとなってたことと思います。ほんとすみません!

あ、でもhtmlをディスってるわけじゃなく、Flash開発→HTML開発に移行するときに問題となるところはどこか?というところが焦点です。

  • 大炎上生テレビ、っていう案件でスマホhtml開発をやってたときの話です。で、そのときに感じたことを話します
  • Flasherならjsはそんなにむつかしくないです
  • asとjsの差はあれど、プログラムの書き方など基本はあまり変わらない感じです。
  • だが、しかし!Flashとjs開発の差はそこではなく、パブリッシュの有無、という点が大きいです…
  • Flashのパブリッシュがやってたこととは?
  • MacのひとはCommand + Enterに置換してください…。「Ctrl(Command) + Enter」と表記してたらあんまりキレイでなかったので…
  • いままで気にしてなかったけど、Flashが解決していたことは多かった
  • HTML開発となると変わります
  • swfなら1ファイルですんだところが、大量のimg,js,cssの対応に…
  • スマホだと、容量とHttpRequestを極力減らさないといけないのです
  • Ctrl+Enterを取り戻すためにすべきこと
  • 8月からMacに移行しました。で、9月28日が生放送本番の日だったので、2ヶ月くらいでモノが作れるようにはなった。移行は多少苦労はありますけど、慣れます
  • いまやNodeがHTML開発を支えているといっても過言ではない
  • Nodeを操るにはMacのほうがやりやすげ
  • 最近Nodeの本がでてます。買いました。めっちゃ詳しいです。
  • メソッドって書いてますが、ほんとはミックスインっていう名前があります
  • CoffeScript
  • jsのクソな部分を補ってくれます。
  • でも型指定とかはないです。
  • HaxeとかTypeScriptみたいな感じのやつです。
  • HaxeのほうがFlasherにやさしいかもしれないです。型指定もあるし、AS3まんまです。
  • でも、今後のことを考えるとCoffeeScriptかなあと思っています。js界隈でのCoffeeScript化がすごいです
  • CoffeScriptはググったらいっぱい日本語ドキュメントがあるので、詳しくはそちらで…。
  • もしくは1冊だけ本がでてます。僕も買いました
  • これがパブリッシュの代わりになるやつ
  • ファイル操作とかできます。
  • 後述するSublimeTextなんかではCommand + BでCakefileを実行できます(WebStorm系も設定すればできる)
  • なので、ショートカット一発で、コンパイル→圧縮→アップロードまでできたりします
  • WebStormはHTML開発では鉄板
  • SublimeTextも超モダンで超軽快でPythonでプラグイン書ける、ということで、ちかごろ大人気です
  • でも、Flasherにぜひとも使ってほしいのがIntelliJ IDEAです。
  • FlashDevelopが超イケてるおかげで、Windows→Macへの移行をためらうひとも多いと思いますが、IDEAがFDの代わりになってくれます
  • FlashやりつつJS書ける。IDEがひとつですむのはクソ便利!リファクタリングとかちゃんとした機能も充実しすぎで、まじ便利です。
  • あと、すんごい軽快な動作をします。Eclipseとは大違い
  • 次のバージョン(IDEA12)からはiPhoneに直接ipaを転送できるようになります。そういう対応とかもめっちゃしてくれてて、しかも安い!$199!
  • あと、IDEAはWebStorm系の最上位版で、スライドに書いてる以外にもpython, ruby, phpもかけます。Objective-Cだけ別製品です。
  • このスライド、セミナーでは飛ばしました
  • テンプレートのところ
    • Nodeのejsというテンプレートエンジンがわりと使いやすいです
    • テンプレートをつかって、画像のパスを一括変更とか、共通パーツを使い回すとか、そういうことはちゃんとしたほうがいいです
  • Require.js
  • LiveReload
  • いちおうWebStormもLiveEditという機能が10月に追加されて、似たようなことができるのですが、LiveReloadのほうが使いやすかったです
  • 個人的にもうちょっと勉強したいところ

まとめオレオレCtrl+Enterを作ったら、すこしは楽になれるんじゃないか。Flashでできたことをあきらめないで実現したら、ストレスなしにできるかと…。

HTMLやっていると、Flashという仕組みはさすがAdobeということがわかりました。

HTML、IE、Android、iOS6…。なんとかこの荒波を乗り切りたいですね。

f-siteでしゃべったAIRのところはまた今度…。

CreateJSで作ってる!ぬりぬり育成 ジェルミィ

ネットがなくて、ちゃんとデモできなくてすみませんでした!

wonderflで有名な@buccchiさんが作ったCreateJS製のmixiアプリ「ぬりぬり育成 ジェルミィ」です!

こちらからチェックしてね!

CreateJSののスライドは準備ができたらどっかにアップします。しばしお待ちを!

で、f-siteで伝えたかったことってなに?

セミナーではちゃんとまとめを言えなくてごめんなさい。いろいろあるんですが、

  • Flasherのコミュニティ力、もったいないから復活させたいなあ。みんなでてら子とかBlogとかTwitterで技術のことをしゃべりまくってwonderflで競い合ってた3年前くらいがなつかしい…。
  • この変化の大きいタイミングだからこそ、新しいところ(AIRとかHTMLとかCreateJSとかスマホとか)にチャレンジしてみるのもいいんじゃないか!?

的なことです。恥ずかしくてちゃんと言えてないこともあるけど、なんかそんなかんじです。

関係者のみなさま、会場にいらしてたみなさま。ありがとうございました。

us-katapadという名のhtml・cssフレームワーク?を公開した愛されゆる巻き系の俺

「とりあえず」とか「それなりに」とか「そのうち」クオリティのus-katapadフレームワークを公開しました

ながらくタンスのこやしにしてたので、とりあえずsvnに突っ込みました。

http://us-katapad.googlecode.com/svn/trunk/

どうやったらtag打ったりリリースしたりするのかわからんかったので、とりあえずtrunkを公開しておきます。tortoiseSVNかそこらでダウンロードしてみてください。TortoiseSVNのインストールと設定

中身

  • html
  • dwt
  • cssセット
    • リセットはまだ現役で使えるかな?全称セレクタ使ってるけど。safariとIEでline-heightより小さいimgを使うときは個別対処ですが、それ以外はピッタリしてくれるはず。
  • js

ドキュメント類はそのうち…

同梱してある_guideline/index.htmlあたりにちらっと書いてありますが、まだ準備してません。

以前、pukiwiki形式で20ページくらいしたためておいたのですが、googleのwikiの使い方がよくわからんのでしばらく放置状態になります。

ドキュメントがあったらかなりおもしろいと思うんやけどねー。とりあえずdwtはそれなりにいじっているので、それなりに使えると思います。bodyclassとかpagetitleとか。

  • Comments (Close): 0
  • Trackbacks (Close): 0

Google Codeでプロジェクトを作った(だけで、リポジトリには何もいれてない)

Google Codeの使い方が詳しく書いてあった。

[Subversion] Google Code でホスティング+TortoiseSVN の使い方という記事を参考にして、プロジェクトを登録しました。登録しただけであとは何もしてません。

us-katapad
http://code.google.com/p/us-katapad/

よくわからんので、当面はwikiとsubversionを試すだけになるかな?

  • Comments (Close): 0
  • Trackbacks (Close): 0

HTMLとCSSにMITとかBSDとかつけられる?著作権なしでオープンソース?

自前のHTML・CSS・JavaScriptテンプレセット&フレームワークをオープンソース化しようと思っています。

みんなでワイワイやってたほうが楽しいと思うので、オープンソース化しようかなと思っています。それにあたり、HTML等に著作権があるのかどうか気になりました。

Flashを作っているときはコンパイルされたswfのみを納品=著作権を譲渡しているので、ActionScriptは僕、あるいは会社の著作物となります(たぶん)。それにより、ライブラリ化されたソースは別の案件で使いまわしが利くようになります(たぶん)。fla納品のときはライブラリActionScriptまでは譲渡しません。

HTML・CSSとかはどうなのか調べてみました。

著作権はほぼ認められない?

HTMLソースやCSSソースに著作権は発生するか?
http://kuroneko-y.hp.infoseek.co.jp/paku4.HTML
HTMLやCSSなどホームページの著作権について
http://koke.jp/blog/2006/06/HTMLCSS.php

HTML・CSSなどは著作権が認められにくいのではないか、という結論っぽいです。

じゃあMITとかBSDとか意味がない

ということは、丸パクリのソースでも構わないのでしょうかね。となるとオープンソースでMITやBSDは意味のないものになります。オープンソースHTMLから著作権表示を書いたとしても、そもそも著作権が認められないのです(たぶん)。

と思ったけど、blueprintっていうオープンソースcssフレームワークには著作権あるやん!

思いっきり著作権が書いてあった。
http://code.google.com/p/blueprintcss/

結局のところどうなんでしょうね。

オープンソースするとしたらgoogle codeでやる

のがいいのかな?このサイトはxreaでsubversionもsshでしかいけない(そもそも正式にサポートされてない)ので、google codeがいいのでしょうかね?著作権もよくわからんので、ひとまず棚上げで!

cssとIEが原因でハゲることはあるのか

答え

あります。

この業界に入って1年とちょっとですか、名もなきコーダーの書いた変なコードに悩まされ、ブラウザ間の挙動に悩まされ、 IEに悩まされ、そしてハゲました。この1年ちょっとの間、ずっと考えてることがあります。世界のWebに関わる人全てでマイクロソフトを訴えたらいいのではないか。そう思っています。cssもJavaScriptもなんもかんも、不要なストレスと不要な作業をずいぶんと負っています。こないだのコーディングコンテストでもたった2ページのコーディングで10時間。うち7割がIEの対処ですからね。訴えられると思いますがどうでしょうか。

まあ、僕は訴えるとかよりも、育毛剤にしか関心がありませんので今回の件はパスしましょう。

前置きが長くなりましたが、前書いたkansaiWSでの資料の追加です。今回は表組みについてです。

tableのわりとよろしい使い方

あとはブラウザリセットですね。遅筆ですみません。

  • Comments (Close): 0
  • Trackbacks (Close): 0

プレゼン資料を半公開

さてさて、ながらくお待たせしました。
先週2007年07月21日にアップルストア心斎橋で行われた、kansaiWSの発表資料を公開します(しかし、まだ全部はできてません、すみません)。
http://katapad.com/logs/presentation/kansaiWS_followSite/070721/

まだ全部できてなくて申し訳ないのですが、すみません、39度の熱が続いていました。今朝、やっと引きました。これは間違いなく天罰が下りましたね。僕も本当に変死するかもしれませんね。そのときは奇跡体験アンビリバボーをよろしくお願いします。

またボチボチと進めますんで、なにか質問等ございましたらこのコメントもしくはkatapadアットgmailまでお願いします。

まだドキュメントができていないのが以下です。

  • ブラウザのcssを消すやつ
  • table回りの解説
  • Comments (Close): 0
  • Trackbacks (Close): 0

7/21(土)アップルストア心斎橋で○○○します!

当ブログをご覧の2,3人の方へ耳よりなお知らせです。

2007.7/21(土)にセレブの象徴アップルストアでゴニョゴニョとお話をすることになりましたので、告知します。
http://ws.transrain.net/

来週の土曜ですね。お時間ある方はよろしくお願いします。僕はtipsを中心にしゃべる役割です。tipsというよりlifehack的な発言かも。

一緒に情報交換できる「場」にしたいと思っています。できるだけ一方通行のコミュニケーションではなくって、インタラクティブなことを!と思っています。

その他、肩パッド情報

最近は仕事がhtml・cssコーディングからFlash・ActionScriptになりました。プログラムを書いているとドリテンプレートの分岐のさせかた、JavaScriptの書き方など、ずいぶんブラッシュアップできるようになりました。

オブジェクト指向がわかるとロールオーバーなどスクリプトがとてもわかりやすく書けるようになります。 いずれ記事も書きましょう。

dreamweaverテンプレートでTOPと下層ページのh1タグを受けわたせる変数

Topページと下層ページでサイトID(ロゴ)のマークアップを変えたいのだけれど、dreamweaverテンプレートを使うとタグの変更ができません。かといってここを編集可能領域にすると、更新するときに検索→置換をせねばならず、やっかいになります。

そこでテンプレート変数を使います。テンプレート変数とは簡単にいうと編集可能領域の外にあるものを変更できるものです。今回は変数のtype="text"、つまり文字列の操作をします。

テンプレート変数の定義

以下をdwtファイルの/head直前に記述します。

<!-- TemplateParam name="tagName" type="text" value="p" -->

テンプレート変数のnameがtagName、typeがtextでvalueがpという意味です。nameはhtmlタグのnameやid属性と同じ意味です。name、valueともに任意の値を取れます。

変数を編集可能領域の外に仕込む

変数の適用先は編集可能領域の外側でしか使えません。領域外のサイトIDの部分に以下のように設定します。

<@@(tagName)@@ id="siteID"><a href="../index.html">サイトID</a></@@(tagName)@@>

このdwtを使用し、新しくページを作ってみましょう。@@(tagName)@@の部分が変数の値であるpに変更されます。つまり<p>サイトid</p>となります。

h1にしたいとき

このdwtが適用されているページを開き「修正」メニュー→「テンプレート」→「テンプレートプロパティ」を開いてください。tagNameという項目があるので、ここにh1と入れてください。これでタグがpからh1に変更されます。

このようにしてうまく使えば一つのdwtでいくつものバリエーションを作ることができます。

  • Comments (Close): 0
  • Trackbacks (Close): 0

すぃ~えすえす クォ~ディング カンテスツでの作り方ー設計篇

Hello World。そしてありがとうございました!みなさまおつかれさまでした。いやーblog書くのめっさ久しぶりです。懐かしいですね~。まあ、ドリで書いてるんですけどね!

さておき、スーパー肩パッドが何回かに分けてhtml・css・JavaScriptコーディングのワークフローをエントリしちゃいます。まずは設計篇

めっさ大事な最初の設計

どういうコーディングフローを踏んだかをかいつまんで書きますね!ここすっごい大事なので設計にはすこし時間をかけましょう。

  1. まずデザインを一通りみる
  2. ワイヤーフレームレベルをさらっと紙に書く
  3. ワイヤーフレームの背景指定も紙に書いとく
  4. コンテンツエリアで共通項をだいたい考える
  5. このへんでテレビを見る
  6. ナビゲーションで軽く悩む
  7. 見切り発車でテンプレ部分をスライス
  8. テレビで「落合のモノマネ」を見て、いたく感心する。シュールとベタの融合。
  9. ロゴのコーディングがヤバいことに気づく
  10. テレビという現実逃避が心地よくなる
  11. ロゴはなんとかなるだろうと思い、さらりとすすめてしまう。

ここで大事なのはほんのすこし頭で考えて、紙にサラサラと書くことです。あまり細かくする必要はないです。あと、テレビは消すこと!

コーディングポリシーを決める

これもめちゃめちゃ大事です。htmlに魂を込めるんです。カズはフランスに魂を置いてきてますけど、カズ以外のみなさんは魂を込めてください。僕の魂は以下です

  • あっちはdlでこっちはtableとかだと、あとの人が大変です。ガイドラインはしっかり立てましょう
  • 難しくても、取り立てて必要ないdiv,spanは使わない
  • 文字サイズ変更は敏感に
  • div.sectionの相対配置、絶対配置系は恐れず使う
あっちはdlでこっちはtableとか

これは難しい問題です。僕の極論を言ってしまうとtableは巨大なフォーム以外、あまり使いません。新着情報はレイアウト次第ではdlのデフォルトがそっくり当てはまるときもあれば、表組みが当てはまるときもあります。今回のレイアウトだったらたまたまtableだったけど、リニューアル時にはdlのレイアウトだったら…。あるいは、逆のときは…。

必要ないdiv,spanは使わない

縛りですね。IE6がなければ、div.section以外でdivはほとんど使わなくても済みます。

文字サイズ変更は敏感に

これも縛りですね。ctrl+マウスホイールでコロコロやるのを趣味にすると、いろんな発見ができます。とはいえ、IE7のズームはひとくせあるみたいで、いま調査中です。絶対配置あたりのズームがチョーヤバい。

div.sectionの相対配置、絶対配置系は恐れず使う

見出し以下の本文やらは若干paddingが付いてるレイアウトってたくさんあると思います。いちいちcssでひとつひとつpadding入れたり、classにpadと入れるのも面倒で複雑です。そのときにdiv.section内の見出しを絶対配置!なんもこわくないです。思い出したら使ってみてください。

たぶん、みなさんも似たような魂なりポリシーは持っていると思います。僕よりもっとすばらしいポリシーを持っているひともたくさんいますね。そういう人はソースからプンプン臭ってくるのですぐわかります。

こんなに偉そうに言ってる僕ですが、print対応をほぼしていなかったり細かいミスはいっぱいあったりと、なんやかんやあります。これが俗に言う恥じらいですね。

さて、長くなったので次回に持ち越しましょう。またね!

  • Comments (Close): 0
  • Trackbacks (Close): 0

ホーム > html


Search
Feeds
Meta

Return to page top