サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
gyauza.egoism.jp
生存報告を兼ねまして宣伝です……！ 5月15日発売の書籍『デジタルゲームの教科書』 私は13章で海外ゲームについて執筆致しました（＆本名が割れてしまい）。。 このblogをご覧の皆様にとっては目新しいことはさほどありませんが、 World of Warcraftについての熱は十分込めてあります。 http://www.amazon.co.jp/dp/4797358823/ 全部で500ページ超。 開発者・業界関係者だけでなく、ゲームを遊ぶ人にも十分面白いと感じて頂ける内容になっています。 立ち読みでも結構ですので一読して頂ければこれ以上の幸せはありません。 宜しくお願いします m(_ _)m 著者： デジタルゲームの教科書制作委員会 A5判 536ページ 1色 並製 ISBN: 978-4-7973-5882-7 定価： 2,380円（本体）＋税
昨日、sugamo.css にて、HTMLテンプレートの組み方のような話をしました。内容は、先日書いたエントリ、自分的HTMLテンプレートの組み方 の内容＋αで、どーしていまこーやって書くようになったのかとか言う話や、OOCSS の紹介などです。 そのうちまたまとめてサイトでも作って書きたいのですが、ひとまず発表に使ったスライドを置いておきます。 mod組み（仮） [Power Point]
製品版Movable Typeのライセンスのページには、 あなたは、本Softwareによって生成された各サイトにおいてSix Apart の製品紹介サイトへ「Powered by Movable Type」のテキスト表示でリンクを張らなければなりません。 とあるが、MTOSの場合はどうなんだろうかと思い、英語サイトを含め探したのだけれど、どこにも書いていなかったので、Six Apart社に問い合わせてみた。 答えとしては、「MTOSの場合は特にリンクなどをしていただく必要はございません」とのことで、MTOSの場合は、「Powered by Movable Type」は入れなくていいらしい。
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
今回は、画像のロールオーバーを、今まで説明してきたように、クラスを使いながら作ってみます。リンクにマウスオーバー（及びフォーカス）されると、中にある画像のsrcの "_normal." を、 "_over." に変更してセットし、マウスアウト（及びブラー）されると、これと逆のことをします。 サンプルとソース サンプルその1 <ul> <li><a class="rollover" href="http://diablo.com"><img src="diablo_normal.gif" alt="Diablo" /></a></li> <li><a class="rollover" href="http://hoge.com"><img src="hoge_normal.gif" alt="HOGE" /></a></li> <li><a class="rollover" href="ht
Movable Typeを組み込むとき、いままで、Windows上にxamppを入れて開発してたんですが、色々厄介なことがあります。それは、大体のサーバーは、Linuxであるということ。windowsだと、パスが\で区切られるのに対し、Linuxは、/です。また、CGIの1行目にある、#!/usr/bin/perlも、windowsだとこのままだと動かないので、どうにかしないとなりません。このため、色々設定しても、サーバーにアップロードした後は、もう、2度とローカルでテストできなくなってしまいます。 そこで、VMwareってのを入れ、ローカルに仮想Linuxマシンを立ち上げて、そこで作業してみたところ、かなり開発が快適になりました。実際にファイルを配置するパスを、レンタルサーバーと完全に合わせて、ローカルの仮想マシン上でテストしながら開発することで、サーバーにアップした後に変更が起こっても
自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな
前エントリがすごいブックマークされている… 時間を見て続きを書きますのでよろしくお願いします。 jQueryで、 $("body")==$("body") // false のような感じで、HTMLの要素をラップしたものを比較しようとすると、falseが出るのはなぜなんだろう。ループさせて保存してたやつと比較するときにアラ？これ一致しないの？だって同じでしょ？と思ってのだけれど、なんでダメなのか分かった。 Mozilla developer center - Comparison Operators によると、”Two objects are strictly equal if they refer to the same Object.”とのことで、オブジェクト同士を比較するときは、同じものを参照していないとtrueにならないとのこと。最初の $("body") と、2番目の $("b
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
秀丸にはアウトライン解析機能がありまして、これがとても便利です。 アウトライン解析っていうのは、テキストファイルの中で、一定のパターンにマッチするテキストを見出しの様に扱って、そのファイルはどんな構造なんだってのを概観できる機能です。具体的にはこんな感じに使ってます。 サイトマップを考えるときなどなど 秀丸のメニューより、「その他」→「ファイルタイプ別の設定」→「アウトライン - 解析」にて、こんな感じで指定します。 これは、Lv1が、行頭の文字「.」ということで、行頭に「.」がくる行がLv1。 Lv2は、「^\t\.」にマッチする行（行頭にタブが来て、その次に「.」がくる行）、Lv3はここにタブがもう一個入った行…という風に、見出しに当たる行のパターンを指定していきます。 こうすると、タブでぺこぺこテキストを打ちながら、ここを見出しにしたいという時に、頭に「.」をつけることで、テキスト
すごくお世話になったものを紹介しようと思います。 ＝Level上げ期＝ Carbonite Questをもらって「どこいけばいいのか分かりません＞＜」 に対して半透明マップで行き先を示してくれる超絶ゆとりaddon QuestHelper - Addons - Curseの代わりに入れてました。 どうやら3月25日現在Carboniteの作者が公開をストップしているようなのでむしろQuestHelperでOK! LightHeaded : WoWInterface Downloads : Quest/Leveling/Reputation Mods ゲーム内のQuest Logの横に、みんな大好きWoWHeadで付けられたコメントを表示するこれまた怠け者向けaddon. どうせalt-tabして調べる位ならこっち。 Jame's Leveling Guides | World
最近MovableTypeをいじっているのですが、ローカルで確認できるように、Vistaにxampp+ActivePerlをインストールしてやってました。画像の縮小に使うImageMagickもインストールして。ところが、エントリを書く画面にて画像のアップロードウィンドウを開くと、Perl Command Line Interpeterがフリーズしてしまいます。色々探し回ったのですが、はっきりしたことは分からず、結局、自分は古いバージョンのActive Perlをインストールことで解決しました。 よく見たら、ImageMagickのインストーラにて、「Install PerlMagick for ActiveState Perl v5.8.0 build 804」というチェックがついていたので、このバージョンのActivePerlを落としてきて入れたら、やっとこさうまくいきました。使ったイ
Web Creators 2009年4月号は、「WEBクリエイター独立開業ガイダンス」って特集なんですが、なんと、私、高津戸のインタビューが載っています。いやはや、これは・・・！ｗ店頭で見かけたら見てみてください是非是非。とりあえず、フリーになってよかったこと、失敗したこと、コーディングについてなど徒然と。 よかったこと 原稿書くとか Web Creators 2009年3月号に、CSS Tipsみたいな記事を10本書かせていただいたんですが、こういったことができるってのは、とてもでかいと思ってます。10本ぐらい書くって言うのは、会社勤めだと、かなり厳しいと思いました。研究時間がそのまま仕事になって金額が発生するというのはラッキーですね。今回インタビューさせてもらっていいですか？っていう話が来たのも、たくさん書いたのがきっかけの一つだったりします。 人と話すとか 色々、人とつながりができま
Web Creators 2009年3月号の特集、「“どうもしっくりこない”をスタイルシートで解決しよう! 表現を多彩にするCSS実践アイデアファイル」に、CSS Tipsを10本執筆させて頂きました。デザイナーがはまっちゃう問題を解決しようTips集的な内容です。 高津戸 壮 (zudolab) で出てます。 今回の記事書いてて思ったことがありまして、それは、やっぱりほとんどのケースって、デザイナーとコーダーは兼任なんだよなぁということです。自分は完全に分業されている会社にいたので、書いててうーんそうかこんなところで悩むことあるのかーと思わされることが多かったです。この特集自体がそういったデザイナー向けですし。 デザイナーの方がコーディングもやるとなると、否応なしに、自分ができる範囲に絞られてしまいますよねー。それがちょっともったいないなーと感じました。もっとぶっとんだデザインにしても
ツールチップのJavaScriptを書きました。jQuery使用です。 zudolab jqTooltip 今まで、ツールチップは jQuery tooltip plugin を使っていたんですが、もっと中身のHTMLいじりたいとか、幅計算でもうちょっとこういうのが欲しいんだよなーっていうのを機能追加している感じです。カスタマイズしやすいようにと思って作ってます。 基本的な機能は、title属性に指定したテキストをツールチップとして出すってことなんですが、幅がautoだと、ビロビロ横に広がってしまったり、でも幅固定にしたいわけじゃなかったりする場合に便利なmaxWidth指定、ツールチップが画面がいに出てしまう時、画面内に入れるよう位置調整する機能、ツールチップ内のHTMLを好きなように変更できる機能などなどが便利かも。 かなり時間かかりましたわこれ作るのに・・・
zudolab JavaScript Libraryっていうサイトを開きました。 zudolab JavaScript Library jQueryベースで作った、よく使われるようなJavaScriptを書いて、まとめました。 地味なのばっかりで、「フーンこんなんみたことあるしー」っていう物しかないですけど、会社辞めたのを機に、全部自前で作りなおそうかなーと思ったので作った次第です。 ここに上がってるやつのほかに、ツールチップとThickBoxクローンを作ってます。 かなり細かくいじくれるようなやつを。 ただ、それはまだ作成中なので、できたらアップしてここで報告します。 ブラウザテストは結構しっかりしたつもりですが、まだ仕事で使ってみてない状況です。 もし使って頂けたなら、バグや要望などいただけると嬉しいです。
前エントリ、コーダーが気にしちゃうことバトンですが、色んな方に答えていただいており、とても嬉しいです。書いて下さった皆様ありがとうございます。 自分(Takazudo) ヨモツネット（バトン作る前に答えていただきました） TRANS[hatena] blog::konk303 Hato-Style Kangaroonote アヨハタブログ mersy's lab Archiva labs.yusukenakanishi.com blog.wonder-boys.net [double-team.org] in Hatena.Inc 最近、いろんな人と会って、みんな、かなり違う環境で仕事してるなぁというのをよく思います。規模だったり、仕事の流れなんかも違ったり、各人がコーディングやってるだけではなかったりなどなど。なんかまぁ、当たり前なんですけど、みんなそれぞれ思うことがあっていろんな書き方
前回のエントリをバトンにしない？と言われたので、答えられそうな話題にしぼってバトンってことにしてみました。 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？ CSSやJavaScriptの圧縮をしていますか？ コーディングにかける時間はどのくらいでしょうか？ あなたのコーディングのこだわりはコレ！みたいなものがあれば。 「コーディン
あらたさんが大阪から出張で来る！ってんでみんなで集まって飲みました。 最初は僕とあらたさんとhamashunさんだけの予定だったんですが、もっと呼んでみる？ってなことで8人にも！以下面々。 Archiva TRANS Takazudo Clipping* coliss CSS HappyLife ヨモツネット hamashun.com vantguarde 僕は、聞きたいことリストを事前にせこせこ用意していたので持っていき、これどう？→わーわーおしゃべりって感じでした。以下が僕が用意していったリストです。飲み会やブログのネタにどうぞ？ 右に画像左にその他モジュールについてどう思うか。やっぱtableにする？もしくはtable嫌だからそもそもそういうモジュールは用意しない？ Web標準に準拠、アクセシビリティに準拠と銘打ってHTMLを書くとき、tableをつかわないといけないことはないの？
今月25日で会社を辞めます、Takazudoこと高津戸壮(25)です。本日はしょーもない自分話ですよ。 会社を辞めてフリーランスになることにしました。屋号はzudolabにします。やることは基本的に(X)HTML+CSS+JavaScriptのコーディングです。もう有給消化で会社には通っていないので、zudolabのサイトに載せることなど考えているところ、税金とかどーするのか等調べているところです。 私が勤めていた会社はキノトロープです。最近一躍話題になってしまいましたが（苦笑）。 サイトを作るのは高校のころから好きでやってました。友達とゲームのブログつくったりなんのしてました。大学に入っても、周りがみんな就職活動してるさなか、就職活動しないで、Web製作やる会社にいくーと思ってたりとか。それで大学行きながらデジハリ3カ月コースとか行き、なんかキノトロープって有名らしいってことで、説明会
inline-block pagination Element Prev12345Next Prev12345678910111213141516171819202000Next XHTML <ul class="pagination" ><li class="prev"><a href="DUMMYURL">Prev</a></li ><li><a href="DUMMYURL">1</a></li ><li><a href="DUMMYURL">2</a></li ><li><a href="DUMMYURL">3</a></li ><li><a href="DUMMYURL">4</a></li ><li><a href="DUMMYURL">5</a></li ><li class="next"><a href="DUMMYURL">Next</a></li ></ul> おかしい
inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を
classでとってくるより、idでとってきた方が速いに決まってるけどどのくらい？と思ったのでちょっとテスト。100kbぐらいあるHTMLファイルの中から、要素を取得するスピードを計ってみる。jQueryのselector使って。 以下はjQuery1.2.6で、各要素を100回とってきたときの、Firefox3でのスピード。 ベンチマークに使ったHTMLファイル $("#ID")
PHP/CSS書いてて、最近思ったことと、自分CSSデザインパターン解説。class名のつけ方の続き的内容。 オブジェクト指向を勉強してるとこ 最近、XSLTでCMS作る！って思っていろいろPHP書いてます。それで、すっごいclassが増えまくってしまって、継承とかいうものがある！ということで使ってみたら、すっきり。ほほーこれは便利だ！と思いきや、またしてもごちゃごちゃ。どこをどうしたらいいのやら。どーしたもんかと思ってネットをうろうろ見てたら、どうやら、デザインパターンってのを覚えた方がよさそうだということに気づき、この本を買いました。 これがすごい良かったです。継承とかinterfaceとか、こういうためにあったんだ！というのを学びました。すべてをまだ理解できてないけど、大きいものには大きいものの作り方があるんだ！と。結果総作りなおしｗｗｗ CSSのデザインパターン？ そんでCSSの話
最近JavaScriptを書いていて、jQueryのslideToggleよく使います。slideToggleってのは、こーいうやつです。 クリックでslideToggle発動 ⊂二二二（ ＾ω＾）二⊃ ﾌﾞｰﾝ JavasScriptが重すぎる 一瞬でパッパッと切り替わるところで、slideToggleを使うと、見た目がすごいいんですよね。ユーザーにもどこがかわったのか分かりやすいし。animateも同じです。しかし、ページ内の要素がふえたり、どんどん複雑になってくると、これが、IE6/7でカクカクになってしまうのです。これだと逆に見た目が悪いので、ブラウザ分岐して、slideToggleのところはIE6/7だけ、一瞬で切り替わるようにしてしまいます。してしまいますというか、否応なくなんですが、これがまた悔しい感じになっております。MOSeっていうやつですね。animate, fade
このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル（印刷対応無） <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa
新人研修コーディングについての資料作らねばーーー… HTMLコーダーとは何をする人？ (X)HTML, CSS, Javascriptを中心とした、 Webサイトの表側の技術を担う人です。 サイト設計 → デザイン → コーディング → システム開発 具体的には… コードを書いて、ページを作っていったり…((X)HTML+CSS) 仕掛けをのっけて、分かりやすいインターフェイスを作ります。(Javascript) (X)HTMLって何？ (X)HTMLとは、ページの文書構造を表す言語です。 ページの内容を把握し、適切なマークアップ※を行います。 ※(X)HTMLタグを書いてページを作っていくこと CSSって何？ CSSとは、(X)HTMLのタグに、見栄えの要素を加える言語です。 具体的には、この要素の下に線を引く、後ろに画像を敷く、 文字サイズを指定する、右側に配置するなどとい
昨晩、3時間以上かけてドロップダウンメニューを作ったのだけれど、今日、もっと簡単な方法を思いついた。従兄コンテナ隠す関数だの子供のさらに子孫を隠すとかいろいろ関数書いてたのに、こんな単純につくれるとは…自分の苦労は一体ー…。 ドロップダウメニュー(HTML) そのCSS(CSS) そのjavascript(js) まとめたやつ(zip) まず、モダンブラウザに対しては、CSSだけでできる。 基本は、2階層目以降を最初からdisplay:noneにしておき、li:hoverしたとき、1個下にあるulをdisplay:blockにする。 <div class="treeNav"> <ul><!-- ←display block --> <li> <a href="http://google.com/">Menu</a> <ul><!-- ←display none --> <li><a hr
次のページ
このページを最初にブックマークしてみませんか？
『gyauza.egoism.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
