RSS
 

年末ミステリーツアーin八王子城跡レポート

08 1月

去る2007年12月23日 PM10:00に敢行されたミステリーツアーin八王子城跡のレポートです。
八王子城跡に行ってオールナイトで心霊写真を撮ろう」という主旨の催し。
パーティーの構成は以下の通り。
能力が酷く偏ってます。

  • H田(27歳・女性・早S田大卒)←企画
  • Dタカさん(29歳・男性・W稲田大卒)←無理矢理招集
  • タナカ(25歳・女性・事務屋)←言い出しっぺ
  • アベ(25歳・女性・Web屋)←暇だったので便乗

クリスマス近くに良い大人が4人も揃って(しかも半数はえらい高学歴)他にやる事は無いんか?と小1時間…(以下略)

とりあえずレンタカー借りていざ八王子城跡へ!!
デジカメに写る霊は趣に欠けるってんで途中のコンビニで使い捨てカメラ購入。
五反田から車を走らせ、特に道に迷う事もなくあっさり到着。
しかし……到着早々事件が……
なんと……

八王子城跡工事中。

うちらノープランすぎ。
無理矢理林道を進むも大して奥まではいれず……無念。

何枚か写真を撮ったが時間が余りまくり、急遽都内の心霊スポットを周る計画に変更。

  1. 八王子城跡近くの橋(名前忘れた)
  2. 青山墓地
  3. 千駄ヶ谷トンネル
  4. 平将門首塚

のコースで周回。
その間も写真を何枚か撮影。
朝日が昇る頃になると、オール20代後半というパーティーが祟ったのか次々と眠気に耐えられなくなり解散。

乗車時間計8時間。空腹と軽い腰痛をたたえて迎えた25歳のクリスマスイブ……
帰り道、東村山の朝日は美しかった……

家について風呂に入り惰眠を貪ろうとスウェットに着替えた所
右袖の中に居た蜂に腕を刺されました……
痛かった……
超腫れた……
祟りか?

フォトギャラリー

スキャナを持っているウチが写真の現像を担当し、先日出来て来たのでアップします。
心霊写真がありましたよ!
1枚目の青山墓地で撮影したやつなんですが阿部家妹曰く水子霊(雑魚)だそうです。
他にもそれっぽいのがあったので3枚程アップしときますね。

水子霊 青山墓地前にて 首塚にて 帰り道にて

おまけ

ホームページ制作に使えるアイコンと携帯の待ち受けを作ってみました。
商用利用可。
改造リサイズ何でもオーケイ。
アイコンは背景透過済みです。
使用報告は必須。
コメントにて一言どうぞ。

阿部家妹アイコンgifバージョン 阿部家妹アイコンgifバージョン(50×50 4kb)

阿部家妹アイコンpngバージョン 阿部家妹アイコンpngバージョン(50×50 4kb)

阿部家妹携帯壁紙 阿部家妹携帯壁紙(240×320 44kb)

言い訳

いや……だってみんな結構マジで心霊写真撮れるか期待してるっぽかったから……。
水滴だか水子霊だか分かんない1枚だけじゃがっかりするかなって思って……。

募集

次回(あるのかは永遠に謎)アホ企画に参加ご希望の方はコメントにてお気軽にどうぞ。
詳細が決まったらメールにてご連絡させて頂きます。
普通自動車免許をお持ちの方大歓迎です。

 
No Comments

Posted in 日記

 

府中警察武道始式

05 1月

武道始式パンフレット オレンジだるま

親父の誘いで母と3人で府中警察の武道始式を見に行ってきました。

署員の代表が柔道と剣道の試合を披露するって式で、来賓で偉いっぽい人が来てました。
しこたましそうな着物のおばちゃんとか色々。

初めて生で格闘技の試合を見れたんですが、凄い迫力でやっぱスポーツは生が一番だと思いました。

ウチは柔道はそんなに詳しくないんですが、剣道はちょび〜っとだけならルール分かります。
一人凄いウチ好みの攻め方する人が居て、構えは上段でぱっと見すごい派手。
得意技なのか片手面をバンバン打ってました。超ツボ。
野球で言うと悪球打ちしてた頃のジョーみたいなイメージ?

一般の方も参加してたんですが、流石に素人目で見ても警察官は動き違いました。
あ、でも理容師やってるらしいおっちゃんと明星大学の学生さんが強かった。

日本剣道型の披露もあり、超興奮!日本刀と小太刀の2種類使うの!真剣だよ〜真剣!!
滅多に見れないんじゃないのこれ?貴重貴重!
開始直後に道場の外にある横断歩道の故郷の空が延々流れてたのが痛かったけど格好良かったです。
武道は良いね!

入り口で配られてたパンフのイラストが無駄に格好良かったです。
あと中休憩中に太陽に吠えろのテーマ流してて笑いました。
縁起悪くない?それ。
殆ど殉職してるよ?
良い仕事してるなぁ府中警察(笑)

帰りは大國魂神社に初詣。
ミニだるま買ってきました。
オレンジ色で超可愛い〜!

野球を愛する人間の正月とも言える2月1日に必勝を祈願して目玉入れたいと思います。

 
No Comments

Posted in 日記

 

携帯サイトの作り方

04 1月

Web年賀状制作復習メモ第一弾。
「とりあえず携帯サイト作るのにコノ辺は知っとこう」的なネタです。

知識0から今すぐ携帯サイトを完成させなきゃいけないWeb屋さん(先月のウチだ)に読んで頂けると、(先月のウチから削られた)睡眠時間をプレゼントできるかと思います。

最近の携帯Webブラウザは頭良くてCSSも割かし分かってくれます。
けどちょっと凝ったデザインをやろうとするととたんにツンツンしだします。
でれツンで非常に萎える事この上ない……。

主観でかしこさを羅列するとこんな感じ。
au > softbank >>> 越えられない壁 >>> docomo

ちなみにウチの知識レベルはこんな感じ。

XHTML・CSS ★★★★☆ そこそこ自信有り
PHP ☆☆☆☆☆ 超うんこ
携帯サイトの知識 ☆☆☆☆☆ 的場の打率程度

で、制作時に困った事ランキングは以下の通り。

  1. コーディング・CSS
  2. 絵文字
  3. pngとgif
  4. 1ページあたりの容量

ググれば解説はいっぱいあるけど小難しくて「結局の所、結論は!?結論だけ教えて!!」と頭がスポンジになりました。
ので、能書き抜きで出来る限りバッサリきっぱりクッキリ要点のみまとめます。

コーディング・CSS

  1. 言語はXHTML
  2. ドキュメントタイプはXHTML 1.0 Transitional
  3. docomoにはHTTPヘッダでContent-Type: application/xhtml+xmlを吐く
  4. コンテンツの横幅は240px目安
  5. 一行の文字量はfont-size:middle;の場合横に9文字程度
  6. 画面サイズより大きい画像は画面サイズちょっきりに縮小表示される
  7. CSSはタグにstyle要素で直書き
  8. 背景色は<div>にしかつけられない
  9. <p>は上下にスペースが空きすぎて使いづらい
  10. ページ内リンクは<a name=”hoge”>にしか飛べない(idには飛べない)
  11. リンクの部分的な色かえはちょっと面倒

絵文字

  1. PHP絵文字変換スクリプトを使う
  2. i絵文字を使う(auはdocomoの絵文字を自動で変換する)

3キャリア共通を意識するならPHP絵文字変換スクリプト
softbankの時だけ絵文字がアホになっても良ければ
もしくはsoftbankの時だけ絵文字がアホになるのを直すテクがある人はi絵文字がオススメ。

pngとgif

  • docomo・Lモード・古いsoftbank→gif
  • それ以外→png

上記の様に画像の拡張子を切り替える。出来ない・めんどくさい場合は全部jpegにする。

1ページあたりの容量

  • 文書→10kb前後
  • 画像→30kb前後

とりあえず身も蓋もないけどこんだけ知ってればサクッとこなせる筈。
あくまでウチ流なので間違い訂正・突っ込み大歓迎です。

そのうち各々の解説エントリーが出来る筈。なんでその結論が出たのか知りたいって人は読んでみて下さい。
「これを先に知りたいなぁ〜」ってリクエストあればコメントでどうぞ。優先的にエントリーします。

 

今度は西武だ!!

20 7月

今、ウチはロッテの大塚選手主催のサイトHEROESをはじめ、HEROES所属選手公式サイトのコーディングをさせてもらってます。

それだけでも野球好きのWeb屋としてはもの凄く光栄の極みだったんだけど、今度は何と…西武公式サイト内の高木大成さんの新企画大成プロジェクトのデザインとコーディングを担当させて頂ける事になりました。
させて頂きました。

本日第一回目がリリースの運びとなりましたのでご報告。
ウチが作ったのは大成プロジェクトのトップページエンタメコーナーのトップページです。

猫班はもちろん鷹班・鴎班のお仲間は是非見てやってくれると嬉しいです。応募もよろしく♪

プロ野球関連のオフィシャルサイトコーディング経験2球団制覇。
【残り10球団】
…とか言ってみる(笑)

野球とコーディング位しか能の無いウチですが、「野球のサイトに関わりたい」とか無謀な夢もとりあえず言うだけ言ってみるもんですね。
人間、言うだけならいくらでもタダだ!!

何かやってみたい事があったら、とりあえず言葉にしてみて、簡単に出来そうな事だけとりあえずやっとけば無理して努力とか営業とか我慢とかしなくても意外に誰かが聞いててくれて、きっかけをくれるかもしんないよ。

ウチは野球関連のサイト作ってみたかったから、とりあえず野球めしを作ってみて、毎日毎日、「野球好き!」「パ・リーグラブ!」とか言ってたら、あれよあれよと言う間にこんな事になってたよ。
1年位で。

とは言っても、世間は狭いって言うじゃん。
だからウチみたいなデザイナーなんだかコーダーなんだか分かんない中途半端なWeb屋にも声がかかったんだって心のどっかで思ってた。
けど「世間は狭い」って、多分それあってるようでちょっと違うんじゃないかって思ったんだ。

今、人間って何人居る?日本だけでも結構居るよ。
世間は広いんだ。間違い無く広い。
なのに大多数の人間が狭いって感じるのは
「手の届く範囲も結構広い」からなんじゃないか?
そう考えたらちょびっと嬉しい感じにならない?ウチはなった。

女子美時代、シガ先生が授業で言ってた「将来の夢は、こうしたい!こうなりたい!と言い続けていれば自然に実現するものなんです。」って。
アレ、今でもはっきり覚えてる。

その時は正直「嘘言うな、そんなに世の中甘いもんか…。」って思った可愛くない生徒を許して下さい。
間違い無くホントだったよ。嘘みたいだけどさ。

きっとシガ先生も「デザイナーになりたい!デザインを教える人になりたい!」って言い続けてたから、資生堂の広告任されたり、美大の先生になれたりしたんだろうな。

実技も座学も確か数回しか教えて頂く機会が無かったけど、凄く心に染みる言葉をスマートにまとめて聞かせてくれたし、たわいもない事を伝わりやすく褒めてくれた。
でもって悪い所はさりげなく指摘してくれて、大人ってこういう人の事言うんだなぁって思ったよ。

良い意味でも悪い意味でも濃ゆくて一癖も二癖もある女子美教・講師陣の中で唯一まともな社会人と言える存在だった気がする。

そういえば、野球めしはMTのアップデート失敗してDBのデータ消えちゃってから放置しっぱなしだけど、なんだかまたいじってあげたくなってきた。
なんだかんだでアレのおかげだもん。

それから、野球の仕事するたんびに思うんだけど、何よりも、何と言っても一番感謝すべきは愛すべき野球仲間のazちゃん。
彼女が居なかったら今のウチの仕事は無い!

人生どうにかしてくれたようなもんだもん。滅茶苦茶感謝してるよ!
全部azちゃんのおかげ。
ホントにマジでありがとう!!

明日は東京ドームにオールスター見に行くよ。
試合開始から見たいから早く仕事終わらせて五時半には上がれる様に、ちょっと早起きして会社に行こう。

これからおおきく振りかぶってのアニメ見てから寝るから寝不足決定だけど頑張る!
野球馬鹿って言うが良いさ。今のウチには最高の褒め言葉だよ。

 
1 Comment

Posted in 日記

 

マイクロフォーマットってのが流行るらしいよ

15 7月

マイクロフォーマット(英語で書くとMicroformats)ってのが流行るそうです。
の割りには情報少ないけど。

「HTMLのタグで定義されていないけど、よく使う特定の要素には分かりやすく共通のタグ付けしようよ!」ってコンセプトのマークアップ規則の一種だそうです。

小難しく聞こえますが、

  • class
  • rel
  • rev

あたりを使って特定の意味を持つ要素に特定の名前をつけてマークアップするってだけです。

「メールアドレスだと<address>ってタグあるけど会社名ってタグ無いじゃん?だから<span class="fn org">ってのを会社名タグの代わりって言う共通認識を持とうよ!」みたいな感じ。

そうするとweb上の情報がもっと分かりやすく整理されて検索の精度が上がったりマッシュアップに使えたりして良くない?って話なんだって。

マイクロフォーマットで定義されている情報の種類は以下の通り。

リンク先の仕様書にマークアップ例も乗ってるので英語だけど見てみると良いかも。

hAtom
標準のHTML内にAtomフィードをつくる
hCalendar
イベント情報
hCard
連絡先情報
hReview
書評などのレビュー
hResume
履歴書
rel-directory
分散ディレクトリ
rel-tag
分散型のタギングフォークソノミー
xFolk
ソーシャルブックマーク
XFN
友人関係など社会的ネットワーク
XOXO
リストとアウトライン

と、能書きはググればいくらでも出てくる割に小難しくて正直良くわかりません。

どっちかっていうと使い方が知りたかったのですが、日本語の具体的な解説があんまり見つからなかったので、Wikipediaを参考に勉強がてらまとめてみました。

なお、このエントリーは英検5級が英語の仕様書を見て(読んでではないあたりが相当危険)適当に書いたエントリーなので導入の際は自己責任でおねがいします。
英検4級の試験に素で落ちている程度の英語力ですので要注意。

とりあえずソースの具体例をあげようかな。
以下、イベントの情報をテーブルタグでまとめようと思った時の例。


<table class="hCalendar">
<tr>
<th>イベント名</th>
<td class="summary">ホークス必勝祈願飲み会2007 〜プレーオフなんて全然怖くないんだからねっ!〜</td>
</tr>
<tr>
<th>開催日</th>
<td><span class="dtstart" titile="2007-07-15T18:30:00">2007年7月15日 18:30</span> 〜 <addr class="dtend" titile="2007-07-16T01:30:00">16日 01:30</addr></td>
</tr>
<tr>
<th>開催場所</th>
<td class="location">四谷あぶさん</td>
</tr>
<tr>
<th>URL</th>
<td><a href="http://www.hawks10-love-maman.com" class="url">http://www.hawks10-love-maman.com</a></td>
</tr>
</table>

簡単ではありますがソースの解説です。

まず、<table>タグを<table class="hCalendar">とします。
これは「こっから先はマイクロフォーマットのイベント情報です」って宣言を意味します。

次に、イベント名の<th>を<th class="summary">とします。「summary」がイベント名って意味のマイクロフォーマットです。

こんな感じで開催場所は「location」、イベントのホームページは「url」というクラス名でマークアップしていきます。

開始日は「dtstart」で終了日は「dtend」。これらは書き方にもう一工夫必要でクラス名の後に「title=”2007-07-15″」って感じで日付を書きます。

時間も書きたい時は18:30なら「title=”2007-07-15T18:30:00″」です。Tの後に時間を続けて書くだけ。工夫っつってもどってことないっしょ?

2007年7月15日 18:30〜16日 01:30に実施されるイベントの場合


<span class="dtstart" titile="2007-07-15T18:30:00">2007年7月15日 18:30</span> 〜 <addr class="dtend" titile="2007-07-16T01:30:00">16日 01:30</addr>

となる訳です。

割かしお手軽ですよね。小難しい理論解説の割には具体的な手法ははいたって単純です。
馬鹿としては何でもかんでも難しく言わないで欲しいと思うですよ。とっつきにくくなるだけだから。

使いどころがまだ浸透してないのでとりあえずマークアップだけ実装しておいてユーザーに使ってもらうのはもうちょい先って感じかな。

マイクロフォーマット専門の検索エンジンが英語だけど既にあります。Microformats Searchとか。
セミナーやイベントを主催してる会社のサイトとか、レビューやってる個人サイトなんかは導入すると新手のSEOになるって考え方もありかと思います。

レビューサイトだと早速Yahoo! Techが導入してるみたいですね。
個別製品ページのソースを「hReview」で検索してみると使用例が見れて分かりやすいですよ♪

イベント情報や連絡先情報はマイクロフォーマット対応のカレンダーソフトやアドレスソフトに一発で情報が登録出来たり、個人ユーザーレベルでも充分恩恵を享受出来るので実用的。気軽にこっそり試してみては如何でしょうか?
mixiのコミュイベントページに導入されたりとかしたら一気に流行りそうだなぁと思ってみたり。

まだ仕様が固まってなくて一部不確定な要素があるフォーマットなのでそのへんの情報収集が今後必要かと思います。

マイクロフォーマット用の可愛いアイコンなんかも配布されています。
ぶっちゃけこれが可愛いから興味持ったってだけなんですがね。そのうちこのブログでも使わせてもらおっと〜♪

突っ込み大歓迎。英語分かる人で日本語も上手い頭のいい人もっとちゃんとまとめて下さい。よろしくです。

 

「あのNASAも使っている」Drupal

26 6月

Drupalやばい。
NASAも使ってるCMSです。

「NASAも使ってる」とか「NASAで開発された」とかに弱いウチは一発でやられました。
宇宙大好っ子ですから。
というかガンダム大好きっ子ですから。
今日もガンダムWの再放送見たよ。
ウーちゃん可愛かったよ。

WordPressの吐き出すHTMLソースの傲慢さに嫌気が差し始めたので、早々にDrupalに浮気という訳です。
どーもフィーリングがあわないんだよねWordPress。

MacにMAMPを入れたのでローカルで手軽にCMSのテストが出来る様になりました。

Drupalはまだちょびっと触っただけなんですがデフォルトのテーマがすっごいキレイで可愛い。
管理のインタフェイスがイマイチですが、カスタマイズ性はWordPressより高いそうなのでガンガンモジュール突っ込んでカスタマイズして行きたいと思います。
XOOPSとWordPressの間の子みたいなイメージなのかなぁ?

あ、そうそう。今日は素敵なブログパーツを発見したので早速つけてみました。
Sports@niftyプロ野球速報です。
プロ野球の試合結果をリアルタイムで表示してくれます。
こういうの前から欲しかったんだよね!
デザインも格好よいし是非野球系のブログ持ってる人は使ってみてね♪

 
No Comments

Posted in CMS

 

MovableType 4続報

07 6月

MovableType 4発表に浮かれて情報収集してたらちょっと気になる情報が。

MovableType 4だとRightFieldsが対応してなくて拡張したフィールドが全滅するそうです。
他にも管理画面の拡張系のプラグインは死屍累々状態との事。

って事はRelatedEntriesもアウトだろうなぁ。
困ったな。

β版が英語版のみなので怖いですが、週末にちょっといじって試してみようかな。

 
No Comments

Posted in CMS

 

MovableType 4日本語版7/18日本解禁発表キターーーッ!!

05 6月

Movable Type 4日本語版7/18日本解禁発表キターーーッ!!

シックス・アパートが、最新ブログ・ソフトウェア「Movable Type 4」を発表
http://www.sixapart.jp/press_releases/2007/06/05-1430.html

公式発表より、変更点は以下の通り。

インターフェースの全面刷新

  • より使いやすくなったインストーラー
  • HTMLの知識がなくてもリッチな文章を作成できるWYSIWYGエディター
  • 画像などファイルのアップロードや管理が簡単に行えるファイルマネージャー
  • 入力中の記事の自動保存

CMSとして機能強化

  • ブログ記事以外のHTMLページの作成
  • 複数ブログをまとめたポータルページの構築
  • 画像やファイルを含む、完全バックアップ
  • ブログのクローン(コピー)機能

コミュニティ機能の搭載

  • ユーザー管理機能の強化
  • コメント投稿者へのアカウント発行も可能

CMS機能強化とコメント投稿者へのアカウント発行が個人的には注目ポイント。
練習がてらWordPressに乗り換えようかと思ってたけど、場合によっちゃMT4にバージョンアップかも。

このブログもそうだけど、いいかげん野球めしの放置プレイを何とかしないとなぁ。

 
No Comments

Posted in CMS

 

日付の書き方ってどうしてる?

23 5月

このブログだと2007-05-23の形で統一してます。
年月日の間に空間が生まれて理解しやすい気がするし、なんとなく見た目かわいいから。

人によって好みのフォーマットってあると思うんですが、たぶん一番メジャーなのが2007/5/23ってスラッシュで区切るタイプじゃないでしょうか?

けど2007/5/23はやめた方が良いらしいです。
代表的な音声ブラウザホームページ・リーダーではスラッシュで区切られた数字は分数と判断しちゃうからです。

以下は、さっき偶々発見した熊本県のホームページホームページ作成・音声ブラウザへ対応するためにのページから引用させて頂きました「日付け記載例と読み上げ例」の表です。

評価 表記 読み上げ結果
× 2004/4/1 よんぶんのにせんよんいち
× 2004/4/1 よんぶんのにせんよんいち
2004.4.1 にせんよんてんよんいち
× 2004.4.1 にせんよんよんいち
H16.4.1 えいちじゅうろくてんよんいち
× H16.4.1 えいちじゅうろくよんいち
平成16年4月1日 へいせいじゅうろくねんしがついちにち

製作するサイトのポリシーやターゲットユーザによっては書き方を考慮してみると良いかもしれませんね。

2007-05-23はどう読まれるんだろ?
ホームページ・リーダーの最新版は15,750円もするので検証出来ませんがちょっと気になる。

 

音声ブラウザへの対応

23 5月

ウチはマークアップが終わった段階でデザイン的に表示させたく無い所=音声ブラウザのために書いてるテキストはCSSでdisplay:noneを使って非表示にしてます。

text-indent:-9999px;で画面外に飛ばしても良いんですが、飛ばしたテキストが本来表示されるスペースはそのまま空白として残るのでfont-size:1pxも併記しなくちゃなので面倒くさい…。

ただdisplay:noneとすると音声ブラウザは読み上げてくれないんですよね。
音声ブラウザのために書いてるテキストなのに駄目じゃん!

って事で…。

音声ブラウザ用にaural.cssというCSSファイルを1つ用意してdisplay:noneにした部分をリストアップ。
display: blockまたはdisplay: inlineに指定しなおしてHTMLのCSS読み込みの一番最後の部分に
<link rel="stylesheet" media="aural" href="aural.css" type="text/css" />
って書くようにしてみました。

ドリとかテキストエディタの検索機能を使ってCSSフォルダ内でdisplay:noneを検索して拾うだけだしそんなに手間はかからないかなぁと。
これなら今後音声ブラウザがdisplay:noneも読んでくれるようになったらaural.cssをサクッと削除すれば良いのオーケイじゃね?とか思ったり。どうかな?駄目?