18きっぷの旅@西日本横断 in 2009冬 - Day2
博多の朝は早い
始発で鳥栖へ向かう
鳥栖から一路長崎へ
鳥栖駅。佐賀だそうで
JR九州は車両にものすごくこってました。これ長崎本線は近未来的でカコイイ
カコイイです
空が白んでゆく。二日目の朝か...
内装はこんな感じ。デザインは素敵だけど、長距離はなにぶん椅子が厳しい
うおお、山に都市がある感じがやばい...!
正面は黒でシック
長崎駅！
朱印船。駅のホームにデカいオブジェがある
改装中の駅が多い中、長崎駅はとても綺麗だった。
山に都市がある感じがたまらない
中途半端に路面電車がある福井と違って、景観にばっちり溶け込んでいてなおかつメインストリームな感じがやばいよ
電車が来るのを陸橋で待ってましたとも
うわぁ、たまらん。坂にある感じがたまらん。ちょっと異世界ぽいのもね
ねこかわいいよねこ
坂画像。どんだけ坂好きなんだよ、って話ですけどね
坂画像。ほんと興奮するわ
急でちっちゃい階段とかやばすぎる
どかーん、引くぐらいのデカさ。半端ない
でもやっぱりねこかわいいよねこ。ねこ見かけるたびに近くに寄ってってシャッターを切ってた
こういう石像もどことなく南蛮風というか、純和風でない感じがまた良い
デカさが分かっていただけるだろうか
また坂。ほんとたまらん
おや...なんだか見慣れない鐘
これもまた南蛮ぽいね
どうやら原爆の鎮魂モニュメントらしい。合掌
上の丸がきのこ雲を表したりしているようだ。なんか、生々しくて、ね。
このモニュメントの全体像。亀も引くぐらいでかい
狛犬というよりはシーサーっぽい。ほんとに南蛮風である
鎮魂の鐘。ちょっと古い感じもまた生々しくて...
長崎駅周辺をぶらぶらした後に、ウルトラ銀河伝説大怪獣バトルTHEMOVIEを観てきました。どうだったかはついったーのログを見るなりなんなり...大怪獣バトル ウルトラ銀河伝説 THE MOVIE評価 - Togetter
ウルトラ銀河伝説見てたら時間なくてちゃんぽんしか食べられなかった。皿うどん食べたかったのに！
ちゃんぽんはちょっと生臭い感じ。でも、慣れるとおいしくなってくる、不思議な食べ物だった
大げさなオブジェ。これがたくさんならんでる店でした
ここから、宿泊地小倉を目指しました。途中、久留米に寄って久留米ラーメンを食べたかったけど時間の都合で無理でした。素敵なホテルにチェックインして、一息(すイエんサー見終わってから)ついてからラーメンを食べに行くことに。平蔵ラーメンというところへ行ったら空いてなかったので、仕方なくぶらぶら歩いてたまたま見つけたところに入った。
さっぱりめのとんこつがめちゃくちゃ旨かった！後味は魚介系だったかな
この後、The 4th kindを観に行きました。全く期待してなかっただけに、めちゃくちゃ面白かったです。でも、ホテルに戻っても鳥肌が立ちまくりで、風呂入るのも躊躇われましたが、せっかくホテルを取ったので光速で入ったり、明日の予定を立てたり、ボイチャしたりで3時を回るぐらいまでうだうだしてましたとさ...
18きっぷの旅@西日本横断 in 2009冬 - Day1
昨年の暮れ、18きっぷを片手に九州は博多を目指して一人旅してきました。
さぁ、出発。0451発敦賀行き快速
乗り慣れた車両
敦賀到着。まだ辺りは暗い
0611発、姫路行き快速。ここは黄金コンボ
橋を渡る
車窓から
姫路到着。ここで、京都で貨物列車から異音がしたとかで大幅に遅れはじめる。
糸崎。
遅れの影響で混む
中国地方って、なんか岩々しているというか、なんとも言えない。
何路線あるんだろう？ロマン
こういうメカっぽい煙突とか勃起する
タンクとかも勃起する
中国地方はこんな感じの車両である
瀬戸内の風景。遠くに見える工業地帯にまた疼く
たまらん
岩国。ここも結構大きい駅
しばし、駅で時間をつぶす
番号ボタンとかついてない恐らく一方通行の電話。レトロで素敵
こういう駅舎たまらん
下関到着!!!
でも、まだ目的地ではない
いよいよ目的地！時間は2130ごろ
博多 一幸舎｜職人が作る本物の博多とんこつラーメン本場、博多の博多ラーメン!!!めちゃくちゃ旨い!!!
2009年今年観た映画ランキング
今年観た映画を一通り振り返るついでに、何が面白かったか決めるためにはやはりランキングがいいと思ったので備忘録的にメモしておきます。来週、超大型映画「AVATAR」が待ち構えているので変動する可能性大です。あとカールじいさんも観に行くかもしれないので。でも、年末忙しくなると思うので暫定のランキングを発表してしまいたいと思います。
年も越したので、09年映画ランキングの完成版になりました。グラン・トリノ観れず仕舞いだったなぁ。
あと、今年「観た」映画であって「公開」映画ではないので悪しからず。ある程度旧作も含んでいます。
トップ5とワースト5は焦らし焦らしでいこうと思います。
54位「今宵、フィッツジェラルド劇場で」
最後までなんだかよく分からなかった。
53位「ウィッカーマン」
不気味なストーリー運びは良かった。オチがううむ
52位「ハプニング」
これもオチが...
51位「リボルバー」
１シーン１シーンは面白いのに、ストーリーはさっぱり分からない謎映画
50位「ロックンローラ」
45と同じく。てか、監督一緒だった気が
49位「バンディダス」
あまり記憶に残っていないが、おぼろげに面白かった
48位「仮面ライダーディケイド オールライダー対大ショッカー」(劇場)
期待していた割に酷い出来。鑑賞後にもやもやしていたけど、後で考えれば考えるほど駄作
47位「ハロウィン」
王道ホラーすぎて面白みに欠けた
46位「大怪獣バトル ウルトラ銀河伝説 THE MOVIE」(劇場)
45位「ミラーズ」
キーファー・サザーランドのジャックが抜け切れていない映画
44位「俺たちに明日はない」
パブリック・エネミーズを観に行く前に父に勧められ鑑賞。イマイチだった
43位「シューテム・アップ」
ちょっと笑いそうになるアクション、ちょっと間抜けな設定、それなりの面白さ
41位「ゲット・スマート」
ギャグが欧米寄りすぎて楽しめなかった
40位「20世紀少年 第一章 終わりの始まり」
まだマシだと思った
39位「紀元前一万年」
映像だけで
38位「ナンバー23」
そこそこに面白かった。もうひと押しだと思う
37位「パブリック・エネミーズ」(劇場)
脚本が甘いように思う。途中までは面白かった
36位「K-20 怪人二十面相・伝」
オチが予想通りすぎ。飛行機で見る分には調度良かった
35位「ドラゴン・キングダム」
いろいろベタベタすぎな洋風カンフー
33位「ローグ アサシン」
ジェイソン・ステイサム見たさで。面白かったが、あと1,2押しぐらい
32位「ウォンテッド」
映像だけで
31位「イーグル・アイ」
あんまり記憶にないけど、それなりに面白かった
29位「ワルキューレ」
全てが煮え切らない映画
28位「THIS IS IT」(劇場)
マイケル・ジャクソンを見る分には最高。ただ、映画としては...
27位「ワールド・オブ・ライズ」
なかなかに面白かった
26位「バンテージ・ポイント」
見せ方が斬新な手法だったと思う
25位「ソウ６」(劇場)
Saw4からの3部作の終結という意味では傑作だが、1には遠く及ばないし映画としても...
24位「ブラックサイト」
ネット事情をホラー、サスペンスによく結びつけていたと思う
22位「バンコック・デンジャラス」
それなりに面白かった
21位「REC:レック/ザ・クアランティン」
POW方式映画。くどかった
20位「ハンコック」
アンチヒーローモノではなかなかの傑作かも。ただ、後半がイマイチだった
19位「ヘルボーイ ゴールデン・アーミー」
2作目の法則に囚われず良かった。面白かった
18位「デュプリシティ」
ジュリア・ロバーツとクライヴ・オーウェンのコンビが良かった。設定とストーリーは良かったけど、もう一押し
17位「スウィーニー・トッド フリート街の悪魔の理髪師」
作りというか、質感がすごく面白かった
15位「アイアンマン」
オーストラリアで英語字幕で見たのに面白かった
14位「AVATAR」(劇場/3D)
3Dならオススメ。ストーリーは予告編で受けた印象がそのまま感想になる感じ。3Dの映像はスゴい
13位「テネイシャスD運命のピックをさがせ！」
JB映画。爆笑しっぱなしだった
12位「デトロイト・メタル・シティ」
原作は読んでないけど、めちゃめちゃ面白かった。デスメタルの知識は深まらないが
11位「イングロリアス・バスターズ」(劇場)
最近観た、ってせいもあるけどなんだかんだでやっぱり面白かった。あんなヒトラーを撃ちまくった映画は始めて観た
10位「ラスベガスをぶっつぶせ」
こういう映画は大好きです。最後まで読めない展開がとても良かった
8位「トロピック・サンダー」
コメディ戦争映画。イングロリアスにしても、トロピック・サンダーにしても映画好きなんだなぁ、ってのが伝わってくる作品には弱い
7位「バンク・ジョブ」
すごく出来が良かった。駆け込みで観て良かった！
55位「ミスト」
しょっぱなからモンスターが出てくる展開にはガッカリ。そして、ラストであんぐり。最低
56位「24 リデンプション」
24はもうダメだと思った。途中撮影スタッフ映ってるし、ストーリーも面白くないし。でも、s7はかなりいい出来だったので安心した。
57位「バーン・アフター・リーディング」
キャストもストーリーも、予告編で期待させておいて最悪の形でそれを裏切る酷い作品。何も面白くなかった。
58位「ゾンビ・ストリッパーズ」
B級作品はなるべく暖かい目で観るようにしてるけど、これは酷かった。意味不明
5位「マンマ・ミーア！」
ここまではある程度順調に決めてきたんだけど、ここからの5作品は非常に悩んだ。悩んだ結果、5位はマンマ・ミーア！。ABBAの心地良い曲に合わせて展開するストーリー、キャスト、いろんな要素がめちゃくちゃ面白い。今まで見てきたミュージカル映画を凌駕する作品だった。みんな楽しそうで楽しそうで、もうね。
4位「ウォーリー」
号泣だった！オーストラリアで英語字幕で観たけど、字幕なんて必要なくてウォーリーやその他機械たちのコミカルだったり、心暖まる動きに感動した。ディズニー、ピクサーというだけでちょっと敬遠してた節があったけど、いざ観てみると面白くて面白くて。そして、最後は涙が止まらなかった
3位「ダークナイト」
ストーリーも最高だし、ジョーカーの怪演、デントのキャストも素晴らしいし、バットマン(クリスチャン・ベール)もより磨きがかかっていたように思う。先に書いたが、ストーリーが破格に面白い。バットマンを題材にここまで面白いストーリーが作れるなんて！1位でもおかしくないのだけど、これを超える作品を観てしまった...
2位「ウォッチメン」(劇場)
予告編に一目惚れしてしまい、公開が待ちきれず原作を買ってしまったが、公開の前に原作を読むのが躊躇われたので冒頭ちょびっとだけ読んだりして、かなりワクワクしながら公開を待って公開日に観に行った。期待通りの最高の映画で、ウォッチメンやミニッツメンのヒーローたちのキャラや描かれ方、重厚なストーリー、目を見張るアクションシーンと上映時間は割と長めだが、それを感じさせない圧倒的な運びで持っていかれてしまった。
鑑賞後に原作を読んで、ラストの違いについて考えたがどちらも良くて(劇場版は少し破綻してしまう面もあるかもしれないが、辻褄は合うし)また映画を観てしまい、原作を読んでしまい、と観れば観るほど、読めば読むほど味が出てくる素晴らしい作品。
1位「僕らのミライへ逆回転」
ジャック・ブラック映画ということで借りたのだが、全く予想外に面白かった。これほど映画という媒体を愛している映画はないと思った。終盤まで「あ、こいつらほんとに映画好きだなぁ」と思いながら大爆笑しながら観てたのに、ラストで涙腺を一気に攻め落とされてしまった。こんなに映画好きによる映画好きのための映画は他に存在しないと思う。
これって昨今のハリウッドの風刺なんじゃないか？って思わせるような作品だな、と気付いた。金掛けなくたって面白い作品はいくらでも作れるんだぜ、って。それから、ストーリーの持って行き方もすごく上手い。自分たちの作った映画が、町の人を巻き込んでいって町の人も出演する。あぁ、映画ってこういうものなんだよな、って伝わってくる。みんなで作って、みんなで観て、みんなで想いを共有する。映画ってそういうものなんだよな、って改めて気づかされる。そんなの、ネットの動画共有サイトでも出来る、って言う人もいるかもしれない。だけど、ネットは自分は出演出来ない。声や映像を伝えることは出来ても、体温を伝えることは出来ない。他の出演者の体温を感じることは出来ない。でも、町ってのは、ひとつの映画スタジオとしてはすごく優れてるよね。なんでも揃えられるし、ロケもいくらでも出来る。そういった要素を全て含ませて、エンディングで爆発させる。最後は思わず泣いてしまった。普段映画ではあまり泣かないけど、ついグッときてしまった。
ジャック・ブラックファンとしても、一映画ファンとしてもこの映画は素晴らしい、の一言に尽きる。
さて、ぼくも映画を撮ろう。
映画好きにはたまらない - Be Kind Rewind - I am Electrical machine
以上が、今年の映画ライフの全てです。途中にカナザワ映画祭というイベントがありましたが、あれは評価が非常に面倒なので省きました。省かなかったらワースト５が大変なことになってたかも（ｒｙ
ひとまず、先にも書きましたが暫定です。公開中の映画のみならず、グラン・トリノ、レスラー、サマーウォーズ、96時間、トランスフォーマー２、エヴァ破、沈まぬ太陽、母なる証明、X-MEN:ZERO、スラムドッグ・ミリオネア...と羅列しても仕方ないぐらい積み残しがあるのでどうしようかと...
AKB48おぼえたーというサービスを作ってみた
http://profo.jp/akb48
もうすぐ紅白だし、AKB48の顔と名前を一致させたいけど面倒...というような微妙なフラストレーションを解消するためのサービス。あまり需要はない気がしてる。
作る経緯をざっくり説明すると、AKB4800てサイトがあってAKB48の画像が山のようにあったので(著作権的にはどうなのか知らないけど)選り好みした画像をTumblrに流して、溜まりに溜まった画像を使って何か出来ないか？と思ったところから。それから、いろんな媒体に移植しやすいようにAPIを作ってクライアントを作る感じでやろうと思った。
API作り
PHPを使って、typeパラメタを付けて e.g.)http://profo.jp/akb48/api?type=(img|tag) アクセスするとJSONを返してくれるようなAPIを作る。調べてみると、JSONで返すようにするには
header('Content-Type: application/json');
を書いて
$callback = htmlspecialchars($_GET['callback'], ENT_QUOTES);
if (is_array($list)) {
print $callback . "({list:";
print json_encode($list);
print "})";
}
こんな感じに書いてやればいいっぽい。
α版のつくりかた
TumblrのAPIが微妙で、APIを使ってAKB48のタグのついたpostを拾ってこようとしても最大50件しか拾ってこれないのでhttp://e-jigsaw.tumblr.com/tagged/AKB48/page/[1-20]のページをスクレイピングすれば全部拾える...と思ったのが大きな間違いだった。PHPのpreg_matchをフル活用して一応完成したけど、よく考えてみたら最大200件しか拾えないことに気付いた。調べてみると、画像はだいたい400枚くらい。ぜんぜん足りていない。というわけで、ボツに。
この時点でクライアント*1も実装してみたんだけど、タグとリソースを取得するのに合わせて20秒かかってしまいイマイチな感じになってしまった。
β版のつくりかた
根本的に、TumblrのAPIがしっかりしていないのである程度こっちでやるしかない。というわけで、一番枚数の多い藤江れいなちゃんが38枚なので、個別にタグを指定して取得してやればnum=50に設定すれば収まる。で、
$table = array("宮崎美穂", "高橋みなみ", "高城亜樹", "佐藤亜美菜", "篠田麻里子", "小嶋陽菜", "前田敦子", "藤江れいな", "板野友美", "峯岸みなみ", "北原里英", "中田ちさと", "指原莉乃", "仁藤萌乃", "多田愛佳", "中塚智実", "仲川遥香", "仲谷明香", "田名部生来", "渡辺麻友", "柏木由紀", "平嶋夏海", "米沢瑠美", "片山陽加", "奥真奈美", "河西智美", "宮澤佐江", "近野莉菜", "佐藤夏希", "秋元才加","小野恵令奈", "小林香菜", "松原夏海", "倉持明日香", "増田有華", "梅田彩佳", "大島優子");
foreach($table as $str) {
$xml = SimpleXML_load_file("http://e-jigsaw.tumblr.com/api/read?num=50&tagged=".$str);
foreach($xml->posts->post as $post) array_push($list, (string)$post->tag[1]);
}
というような、PHPの鑑ともいえる微妙なコーディングになってしまった。いや、α版のコードもひどいんだけどこれは...うん。や、でもこうするしかないしさ。
で、それぞれの読み込みに20sぐらいかかるので合わせて40s待たせることに。これはなんとかせねば
クライアント作り
クライアントはJsで作っているので、スクリプトの部分だけ載せてちょっと解説だけ。
var c = 0; $(document).ready(function() { //読み込み時に実行 $.getJSON("http://profo.jp/akb48/api?type=tag", function(data) { //APIからタグのJSON読み込み $.each(data, function(i, tag) { //詳しく分からないけど、each使わないとダメっぽい $.getJSON("http://profo.jp/akb48/api?type=img", function(data) { //APIからリソースJSON $.each(data, function(i, img) { main(img, tag); //読み込み終わったらメイン関数へ }); }); }); }); }); function main(img, tag) { var r = Math.floor(Math.random() * img.length); //乱数発生 c++; $("#main").text("").append("<img src='"+img[r]+"'><br><input id='name' type='text' /><img src='a.png' id='ar' />"); //<div id="main">の中身を消して画像と入力フォーム出力 $("#ar").click(function() { //<img id="ar">がクリックされたら if($("#name").val() == tag[r]) main(img, tag); //名前と入力フォームの名前が一致してたら else { c--; $("#main").text("") .prepend("<h2>GAME OVER!!!</h2>あなたはAKB"+c+ "です！ <a href='http://twitter.com/?status=%e3%81%82%e3%81%aa%e3%81%9f%e3%81%afAKB"+(c++)+"%e3%81%a7%e3%81%97%e3%81%9f%ef%bc%81%20http://bit.ly/5I6r07%20%23akboboet'><img src='t.png' id='tw'>結果をツイート</a><br>"+tag[r]+"ちゃんでした<br><img src='"+img[r]+"'>"); //ついったーにつぶやくリンク貼付け } }); }
うーん、やっつけ感が...
総括
- APIなんとかしないと
- Jsクライアントもうちょいブラッシュアップ必要？
改善案としては、
ローカルにデータを保存しておいてhttp://profo.jp/akb48/api?type=rdmみたいなリクエストしてタグとデータを1セット返す、みたいな。それだと味気ないんだけどなぁ、うぅむ。
H8 on Mac
実験でH8マイコンを使って遊ぶ、という週があったのでせっかくなのでMacでクロスコンパイル出来るようにしてやろうかと。
実験テキストの説明とかを基にやっているので、ところどころ曖昧です。
h8300-hms-gccのコンパイル
H8クロスコンパイラ環境作り
を参考にやってみたものの、生涯make成功率3%の私には出来るはずもなく...
仕方ないので、偉大な人のお力を借ります。
開発環境 - novi's page
LeopardでコンパイルすればSnowLeopardでも使えるみたいだけど、わざわざTimeMachineで戻すのも面倒なのでコンパイル済みGCC*1を使わせていただきます。
ダウンロードしたzipを解凍して、出てきたフォルダを/usr/local/以下に放り込みます。ちなみに、余談ですがMacでusrなんかにアクセスするときはFinderのフォルダへ移動*2でアクセスできます。Terminalでやってもよし。
各種ファイルを揃える
http://maisy.ei.fukui-nct.ac.jp/~t-saitoh/exp/h8/sample/h8car/
テキストのプログラム一式が置いてあるので、拝借します。Xcodeでコンパイルしてもいいのですが、面倒なのでTerminalで叩きます。
Makefileを書き換える
# # H8/3664F sample makefile # Copyright (c) 2001 Masahiro Ochiai # TARGET = h8car.mot CFLAGS = -O -mh -g -mrelax -mint32 -DH8_3664 CC = h8300-hms-gcc AS = h8300-hms-as LD = h8300-hms-ld LDSCRIPT = h8-3664.x CRT0 = 3664crt0.S ASRCS = SRCS = h8car.c # make all source trees all : $(TARGET) h8car.mot: h8car.coff h8300-hms-objcopy -O srec h8car.coff $@ h8car.coff: Makefile $(LDSCRIPT) $(SRCS:.c=.o) $(CRT0) $(ASRCS) $(LIBS) $(CC) $(CFLAGS) \ -T $(LDSCRIPT) -nostartfiles $(CRT0) \ $(ASRCS) $(SRCS:.c=.o) -o $@ $(LIBS) clean : rm -f $(TARGET) rm -f h8car.coff rm -f $(SRCS:.c=.o)
を以下のように
# # H8/3664F sample makefile # Copyright (c) 2001 Masahiro Ochiai # TARGET = h8car.mot CFLAGS = -O -mh -g -mrelax -mint32 -DH8_3664 CC = /usr/local/h8300-hms/bin/h8300-hms-gcc AS = /usr/local/h8300-hms/bin/h8300-hms-as LD = /usr/local/h8300-hms/bin/h8300-hms-ld LDSCRIPT = h8-3664.x CRT0 = 3664crt0.S ASRCS = SRCS = h8car.c # make all source trees all : $(TARGET) h8car.mot: h8car.coff /usr/local/h8300-hms/bin/h8300-hms-objcopy -O srec h8car.coff $@ h8car.coff: Makefile $(LDSCRIPT) $(SRCS:.c=.o) $(CRT0) $(ASRCS) $(LIBS) $(CC) $(CFLAGS) \ -T $(LDSCRIPT) -nostartfiles $(CRT0) \ $(ASRCS) $(SRCS:.c=.o) -o $@ $(LIBS) clean : rm -f $(TARGET) rm -f h8car.coff rm -f $(SRCS:.c=.o)
- 適当な場所にフォルダを置く
- cd hoge/h8car
- make
これでいけました。あとは、h8car.cをいぢるだけです。
転送はまだ出来ていません。jrem使えばできるのかな？/dev/以下になんて書けばいいのか分からないっていう。
*1:http://web.me.com/novi.mad/h8300-hms.zip
*2:shift+cmd+G
新装同好会HPのできるまで
テストも終わったので同好会のHPを一新しました！
こんな感じ
いつかの自分の備忘録兼、今後同好会を担ってゆく後輩たちのためにメモメモ。あくまで、これは我流なのであんまりアテにならないと思うけどね
1.大まかなデザインを決める
まず、大まかにデザインを決めます。今回は、
の3通りを考えました。
アールデコ調
大好きなアールデコ調。エンパイアステートビルが有名処かな。ゲーマーな人ならBioshock風。ただ、これはちょっとグロテスクなのと素材の確保が出来なかったため断念。アールデコ絵師、彫刻師急募。
2.だいたいの内容を決める
コンテンツを決めます。本来であれば、コンテンツを先に決めて、それに沿って尚かつそれが引き立つようなデザインが好ましいのですがデザインが決まらないとイマイチやる気が出ないのでここでやります。
今回は
- トップ
- 紹介
- 成果
- リンク
みたいな走り書きをして、大枠の構成を決めます。
3.トップ絵の作成
今回、恐らく一番時間が掛かっているのがこの部分です。いろんなデザインサイトをウォッチングして、グランジ風のアイデアを溜めてphotoshopと試行錯誤をしていきます。グランジ風のサイトを多数チェックしてるとちょっとコミュっぽいサイトがカッコよくて相性がいいと思ったので、色合いと大まかな雰囲気を妄想。
まずは、画像をiPhotoから選別。自分の写真は加工するのがひどく恥ずかしいので、誰か別の人を...と探していたらクリエイティブコモン高専生のアイドルいつきちゃんを発見したので心の中で承諾を貰って加工にかかる。
- 3階調にモノトーン化する。photoshopの「明るさ/コントラスト」
- それぞれの黒部分を上の層にいくほど濃くなるように色味を決めていく。photoshopの「塗りつぶし」
- ラインを引いて、ちょっとノイズを入れる。photoshopの「直線」、「エフェクト」のそれっぽいやつ、「ガウスぼかし」
- フォントの選別
- いつきちゃんの明るい部分の色とフォントの色を合わせる
- 適当に拾ってきたコミュっぽい画像を塗りつぶして透過表示
- 背景の作成。濃い部分はいつきちゃんの濃い部分と合わせる。photoshopの「グラデーション」
こんな感じで完成する。
4.セロテープ貼り付け
縁の下で役に立ってるセロテープの作り方。
以下もセロテープなど、ギザギザにする場合は同様に行う。
5.メニュー画像作成
ここもすごく時間かかってます。やってることはそんなに難しくないけど、すごく手間がかかる。
- 適当な紙の素材をダウンロードしてくる
- 四辺をギザギザにする。セロテープの要領で
- 字を乗せる。しかし、このままだとフォントが浮いてしまうので少し手間を掛ける
- フォントを範囲選択して、選択した部分の背景画像コピー
- コピーしたレイヤーの彩度を0にすると、簡易モノトーンになる
- このレイヤーを字のレイヤーの上に移動させる
- 透過度を30%ぐらいに指定
ひと手間掛けることによって、紙に書いてある感が出る。ほんとは、字もくちゃってなってるはず！ってツッコミはご愛嬌で。
7.コンテンツ背景の作成
あまりに殺風景すぎるので、各コンテンツにグランジっぽい背景を付ける。これは、グランジのフリーのブラシをダウンロードしてきてフォントを配置しただけ。ちなみに、色は背景がいつきちゃんの一番明るい部分で、フォントがちょっとだけ薄い赤。
7.コーディング2
コンテンツ背景を組み込むと表示が一気に崩れるのでその調整と、トップへのリンクをそれぞれ配置する。また、コンテンツへの移動をなめらかにするためにjQuery-page-scroller.jsを使う。
実際のコードとちょっとした解説
body { background-image: url("img/back.jpg"); } img { border: 0px; } a{ color: yellow; } a:visited { color: yellow; } #about { //About usの部分 background-image: url("img/aback.png"); background-repeat: no-repeat; position: absolute; width: 600px; height: 900px; top: 900px; left: 0; } #history { //Historyの部分 background-image: url("img/hback.png"); background-repeat: no-repeat; position: absolute; top: 0; width: 1200px; left: 1500px; } #link { //linkの部分 background-image: url("img/lback.png"); background-repeat: no-repeat; position: absolute; top: 1200px; width: 1200px; left: 1200px; } #content { //About usのコンテンツ部分。背景との兼ね合いでコンテンツには別idが振ってある。 color: #fff; width: 600px; padding-top: 150px; padding-left: 200px; } #hcontent { //Historyのコンテンツ部 color: #fff; width: 600px; padding-top: 300px; padding-left: 250px; } #lcontent { //linkのコンテンツ部 color: #fff; width: 600px; height: 400px; padding-top: 300px; padding-left: 250px; } h2 { color: #f00; border-bottom: #f00 solid 3px; width: 80%; } #back1 { //Topへ戻るリンク。どうしようもなくて、面倒だからabsolute指定してある position: absolute; top: 950px; left: 700px; z-index: 1; } #back2 { position: absolute; top: 150px; left: 2200px; z-index: 1; } #back3 { position: absolute; top: 1800px; left: 1800px; z-index: 1; } #menu { position: absolute; width: 400px; height: 700px; left: 800px; top: 40px; }
ここからHTML
<html> <head> <title>FNCT-ITsProfoHomePage - 福井高専IT研究会オフィシャル</title> <link href="main.css" type="text/css" rel="stylesheet"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.page-scroller.js"></script> <script type="text/javascript"> //jQuery-page-scrollerのパラメタ指定。横移動有り adjTraverser = 1; </script> </head> <body> <img src="img/top.png" id="top" /> <div id="menu"> <a href="#about"><img src="img/about.png" /></a> <a href="#history"><img src="img/history.png" /></a> <a href="#link"><img src="img/link.png" /></a> </div> <div id="back1"><a href="#top"><img src="img/mtop.png" /></a></div> <div id="back2"><a href="#top"><img src="img/mtop.png" /></a></div> <div id="back3"><a href="#top"><img src="img/mtop.png" /></a></div> <div id="about"> <div id="content"> <h2>IT研究会Profoとは？</h2> 福井高専のITを志す学生で構成された同好会です。<br> 日進月歩のITの世界で情報交換をしたり、互いに切磋琢磨したり、交流を深めたりしています。 <h2>同好会の目的</h2> <ul> <li>全国高専プログラミングコンテストへの参加</li> <li>互いの技術を学び合う</li> <li>他高専生との交流</li> </ul> <h2>活動内容</h2> <ul> <li>プログラミングによるソフトウェア開発</li> <li>Webサイト構築</li> <li>サーバ管理</li> <li>マイコンを用いたハードウェアスクラッチ</li> <li><a href="http://www.ei.fukui-nct.ac.jp/kosen_live/" target="_blank">高専ライブ</a>製作</li> <li>隔月開催LT(Lightning Talk)会</li> <li>長期休暇毎開催合宿</li> </ul> <h2>活動が気になる人へ</h2> 公式には毎週月、火、木のPM16:30-<br> 非公式に毎日活動を行っています。見学なども歓迎しているので、福井高専電子情報棟3Fの実験室へ </div> </div> <div id="history"> <div id="hcontent"> <h2>2005</h2> 5人でJava同好会を設立。勉強会などを行う <h2>2006</h2> 新メンバーを迎える<br> 活動報告、プレゼンなどを行う <h2>2007</h2> 勝山高校生ホームページコンテスト入賞 <h2>2008</h2> 新メンバーを迎える<br> プロコン競技部門出場<br> 東洋経済から取材を受ける<br> 高専祭でJavaカレーを販売。露天賞<br> iPhoneApp講座<br> 日視研との共同ADV企画立ち上げ<br> NHKから取材を受ける<br> 勝山高校生ホームページコンテスト入賞 <h2>2009</h2> 新メンバーを迎える<br> プロコン競技部門出場<br> </div> </div> <div id="link"> <div id="lcontent"> <h2>学校</h2> <ul> <li><a href="http://www.fukui-nct.ac.jp/" target="_blank">福井高専</a></li> </ul> <h2>同好会</h2> <ul> <li><a href="http://profo.jp/wiki/" target="_blank">福井高専IT研究会ProfoOfficialWiki</a></li> <li><a href="http://profo.jp/book/" target="_blank">ProfoBookManager</a></li> <li><a href="http://profo.jp/itsukichang/" target="_blank">いつきちゃん</a></li> <li><a href="http://profo.jp/uploader/" target="_blank">ProfoUploader</a></li> <li><a href="http://www.ei.fukui-nct.ac.jp/~h_nishi/radio_detail.html" target="_blank">高専ライブ</a></li> </ul> <h2>作者</h2> <ul> <li><a href="http://thosewho.karakasa.com/" target="_blank">THOSEWHO.KARAKASA.COM</a></li> </ul> </div> </div> </body> </html>
というわけで、こんな感じでサイトが完成した。割合としては
1(アイデア練り):7(素材作成):2(コーディング)というような感じです。コンテンツ重視のサイトを作るときはCMSを使うのでWebページを構築するときはついつい素材作成の時間が延びて仕方ない。今回は約7時間くらいかかってるけど、うち4,5時間は素材を作っていました。
それでは！
さくらのレンタルサーバ
盗難事件と学校の対応と
一旦非公開にします
