カメラート・デザイン部

全画面表示させたかったのだが

2011-05-13T05:22:39Z

とある案件で背景画像をブラウザのサイズに合わせて全画面表示させようということになったと思っていただきたい。
jqueryでいっぱいあるよね、と簡単に考えていたのだがそこに立ちはだかったのがIE6である。
江戸川乱歩描くところの怪人二十面相のごとく、だいたいの事件は彼が起こすと思っていただいてかまわない。コーダーの宿敵といえるだろう。まあ、怪人二十面相の場合は少年探偵団ものに限るが。
今回も背景画像のあとからコンテンツが表示されるなど様々な事件を起こしてくれた。とりあえずコンテンツの後ろに背景画像がこなければそれは背景画像ではない。
クラシックをブラウザに聴かせてみたり、jsファイルに「ありがとう」と書いてみたりしたのだがどうにもならない。
いつも使うまとめサイトからいろいろ試してみたのだがどうもうまくいかないのでサーフィンに行った。
いまごろネットサーフィンなんて言葉使うのだろうかと思ったのだが、今ちょうどラジオでネットサーフィンうんぬんというハガキが読まれていたので大丈夫らしい。

というわけで見つけたのがこの記事。
jQueryを使って背景画像をフルスクリーン表示する方法【その２】
すばらしい。
若干見栄えが違うが許容範囲と思うことにした。cssをいじれば何とかなったかもしれないが大きなみだれがなければまあいいでしょう。

できました。

プランニングワークのリニューアル

2011-04-13T07:35:12Z

紹介がちょっと遅くなりましたが4月11日にプランニングワークのHPのリニューアルがありました。
あったと言っても縁もゆかりもなければ紹介するわけもないので私も若干のお手伝いをしたということですね。
おつかれpallaさん、そして自分。
以下、スクリーンショット。

あまりにも久しぶりにブログのエントリを書くので、余程書くことがない生活を送っておるのだろうな、こいつはと思われる向きもあろうかと思いますが、何も書くべきことが無いところからブログは始まるのだとだけ言っておこう。暗に認めてどうするのか。ではまたいつか。

近況、という名のヒマネタ

2010-07-04T02:17:04Z

珍しい話ではないけれど、前回から大きく間があいてしまった。ええと、前回は動物園に行ったのですね、5月の終わりである。今が7月の初めであることをそう大げさに考えることもないと思うが、近況でも記しておこうという気持ちになるのもやむを得ないのではないか。

そういうわけで近況を書こうという次第だが、何一つ覚えてはいない。困ったものであるがそれが私の仕様であると考えるとあきらめも付くというものだ。徐ろにtwitterの過去ログを読んで何をしていたか思い出そうとしたが、twitter、備忘録にはなりません。なんて無駄なことばかりつぶやいているんだ私は、ということを否応なく見せつけられて軽くヘコむが、そもそもtwitter自体が無駄なメディアであるからここまで普及したのだろうと考えることにする。とにかくそれらしい呟きから近況を再構築してみよう。

そうそう、トイカメラを買ったのでした。「VQ1005 NICO NICO VERSION」。いわゆるトイデジというやつである。ヴィレッジヴァンガードで一つだけ残っていたのでつい買ってしまったが、リンク先を見てもらえば判るとおり、大人の持つものではない。しかし、それ以上の魅力というのはあるもので、例えば
・電池の持ちが物凄く悪い
・ファインダーの意味が無い
・シャッターが切れるまで下手したら十秒くらいかかることがある
・シャッターが切れてないことがある、頻繁に
などなど、魅力を数え上げればキリがない。困ったやつである。
とりあえず一枚写真を上げておく。

ムラバヤシケンジ作のサンタをカーネーションの鉢植えに埋めてみた。どうもスミマセン。

あと、sigilというフリーのアプリを試してみた。ほら、世間ではiPadやらの登場で何度目かの電子書籍ブームが来るのか来ないのかと盛り上がっていたでしょう。祭りに参加してみようとそれらしいアプリを探していたら見つけたのがこれである。
どうやらkindleでは見られないようだが、多くのハードでサポートされているEPUB形式のファイルを生成してくれるらしい。使い方はいたって簡単である。
月曜ジャーナルSigilの基本的な使い方（１）から（３）まで読んでいただくと大体の基本的なことは判ると思う。興味のある方にはオススメのエントリです。
外部ファイルでcssを反映させられるのだが、iPadでデフォルトのcssが効いているのかも判らないし（持ってないから）、iPhoneでどの程度の文字サイズにすればいいのかも判らない（持ってないから）。

で、今の課題はkameradトップページのリニューアルである。おそらく近日中にやるのではないかな。
ということで近況でした。

チュウゴクオオカミのことなど

2010-05-21T14:16:47Z

天王寺動物園に行こうと思えば地下鉄御堂筋線動物園前駅で降りるのが一番近い。といってもそれは、あくまでも地図上の距離であって、人が実際に歩いてみると動物園までたどり着くのはなかなか苦労するということはご存じない方もおられるかも知れない。
試しに動物園前駅の、動物園に一番近い出口から歩いてみよう。そこに立ちはだかるのはジャンジャン横丁である。林芙美子の小説「めし」の舞台になったことでも知られるこの商店街は、全長180メートル（wiki調べ）とさしたる長さもなく、そこを抜ければ動物園は目の前であるわけで、立ちはだかるとは少々オーバーではないかとあなたは思われるだろうか。しかし一歩入ってみると、朝の十時半前にもかかわらず、開店準備の暖簾を急ぐ居酒屋の店員の姿があり、二件ほどある囲碁・将棋クラブは大勢の対局者が紫煙をくゆらし、そしてむやみに何件もある串カツ屋のカウンターは既に酔客で埋まっている。この横丁が、夜の無い、いわゆる不夜城であるのか、それともどうかと思うほど朝が早いのかは寡聞にして知らないが、こんなところ素通り出来るものではない。あっちやこっちや覗きながらの180メートルは地図では表すことの出来ない長さを持つのである。
とまあ、もはや観光スポットとしても有名なジャンジャン横丁をわざわざ紹介することもないし、そこを通るのが嫌ならすぐ隣に大きな道路が走っているのでそこを歩けば動物園はすぐである。なんの心配もいらない。むしろヤケに道幅の狭い横丁を通るよりそちらがお勧めかも知れない。もちろん私はジャンジャン横丁を通るが。

とにかくどうしたって動物園には着くわけで、そこから話を始めればこの話はもう終わっているのではないかな、今見るべきはチュウゴクオオカミの子供である。
チュウゴクオオカミは大きくなるとオオカミを名乗るだけあってこのように精悍な姿をしている。
ところがどうだ、5/15現在の姿はこうである。

子犬である。動物園まで行って子犬を見るという行為を馬鹿げていると取るか趣深いと取るかは自由であるが、動物園まで行ってこその子犬である。しかもいずれはオオカミになるかもしれない。

ところでジャンジャン横丁にはジャンジャン来太郎というロゴマークがあるらしいが、全く知らなかった。これ、キャラクターではないのだな？

銀河を見に行く、と書くと大層な話ではある

2010-05-09T07:52:05Z

地下鉄の駅を出ると、このあたり特有のダラダラと登ったり下ったりする地形をなにか新鮮な感じで歩いて行く。ギャラリーまでの道を散策気分でブラブラしていると、おそらく最近出来たであろう散髪屋を見つけたのだが、どういうわけか扉がない。いや、扉やガラス窓があるべきところに何もない。「どうぞお気軽に入ってください」と言わんばかりの開放ぶりだが、ここには入れないなと思った。まあ、私が入らなくても流行っているようなので大丈夫だろう。
十年以上も前に仕事でこのあたりを歩いたときにはこんな感じではなかったので、ここ数年の間にこの町になにか大きな変化があったのであろう。おそらくこの町は私を受け入れないなとも思ったが、まあそんなことはどうでもいい。
駅から５分も歩くとGallery Kaiにたどり着く。なぜこのギャラリーに来たのかというと、私にはカメラート・デザイン部の営業担当として知られるが、世間的にはpallalinkの主宰者として有名なpalla氏の個展、イコノグラフィー２「銀河」が始まったからである。palla氏とは一枚の写真をどうこうするうちに面白くしてしまうという芸術家であって、というと失礼な感じではあるが、まあそういう人である。異論反論は当人以外からは受け付けない。
で、ギャラリー内はこんな感じだった。

あるいはこんな。

いい感じである。そんな感想もどうかと思うが、私には芸術作品をどうのこうのいう能力が欠如しているので許していただきたい。
で、ギャラリーを出てぐるりとまわると銀杏菴がある。こちらは町家を貸しスペースとして普段はいろんな教室として使われているようだが、いまは一階でpalla氏の映像作品を流している（木曜〜日曜のみのよう）。一つ数分の作品がいくつかエンドレスで流されていて、なんとなくドイツ表現主義っぽくて面白かったが、私の言う事など信用せずに己の目で確かめられたい。
写真はこんな感じだが、よく判らないと思う。

お詫びというわけではないがトイカメラ風のエフェクトをかけてみた。

だからどうしたという話である。
それはともかく興味のある方はギャラリーに行かれるのがよいのではないかと思う。

Staceyをなんとかする

2010-04-22T13:36:55Z

さて、数回にわたってStaceyの事を書いてきたわけだが、そろそろオリジナルのテンプレートを作らないのだろうかと思われている方もいるかもしれない。というのも私自身がそんな事をボンヤリと考えていたからであり、ひょっとしてこのままお蔵入りにしてしまう気ではないのかと自分のことを疑いはじめたりしたもので、もしそうなるとなかなかのダメっぷりである。ところで「なかなかの」と打つと「中中野」が一番の候補になるあたり、google日本語入力もなかなかのものである。
まあ、そんなことはどうでもいい。
とりあえず、方針を決めてから行動することにする。
・webの制作物を紹介するだけだからシンプルに
・自己紹介などするほどの人物でもないのでそんなものにページを作らない
・トップページにはサムネールがあった方がいいのではないか
こんな感じで進める。
とりあえずテンプレートをダウンロードする。
ダウンロードページのTemplate3が良いと思う。デフォルトでサムネールにも対応しているようだ。
Template3の中身をローカルにアップして、前に書いたようにページタイトルやら記事内容やらを書き換えるとこうなった。

悪くはないがこのままでは芸がないというか、ワザワザStaceyにした意味が無いというかねえ、せめてcssだけでも変えてみましょう。あと、プロフィールはトップページに置いておきたい。テンプレートをいじる必要もあるだろう。
そろそろ気づいている方もおられるかもしれないがこれはオリジナルのテンプレート作りではなくてテンプレートの改変である。これを撤退と見るか転進と見るかは個々にお任せすることとしたい。以下を読みたい方は転進であるのだなと納得されたと理解しておく。で、cssをいろいろと変更し始めて気づいたのだが、埒があかない。最初から自分で作った方が早いのではないか。ということでcssを思い切りよく切る。

無残なものである。しかし、ここから何かが始まるのかもしれない、と良くないセミナーのような気分にひたるのもいいだろう。
そしてリセットcssだったり何かと定番のcssを適用したり、トップページにプロフィールを載せる算段をしたりした結果がこちらだ。

とりあえずはこんなものであろう。
cssに関しては説明しないが当たり前のことをしているとだけ言っておきます。
トップページにプロフィールを載せる方法を書いておく。ひょっとしてもっといい方法があるんじゃないかと疑っているのですが一応こんな感じ。



get "/about" do

@page_name


@title


:media

@content

end

マニュアルを読んでいてどうも判らんと思っていたのが

get "/url" do

なにかの命令文

end

のところだったのですが、
これは
もし"このurl"があれば命令を実行する、という事のよう。
ということで上記のコードは
aboutってフォルダがあればそこのページの名前を見出し２に、タイトルを見出し３にして（@
ホニャララはフォルダ内のテキストファイルに登録された変数。その後の@contentsも同様です）、何らかのファイルがあれば:mediaによって挿入される。（:mediaによってtemplates/partials/assetsの中のmedia.htmlが挿入されます。その中でassetsのタイプを分類してそれ用のhtmlファイルがさらに挿入される模様。ところでassetsって何だって話ですが英和辞書によると「資産」らしいです。「何のことだ、私は資産など持ってないぞ」みたいなことをTwitterでつぶやいたところ、soma1104さんから「引き出し」という回答をいただいた。なるほど、Staceyの中では「うむ、このフォルダ内の資産であるjpgファイルを表示しよう」で通じるかもしれないが、ただの人であるところの私は「引き出しの中からjpgファイルを取り出す」の方が判りやすい。assetsというものを概念ととるか実体ととるかの違いだろうか。読んでいる方にはどうでもいいかもしれないが、いい加減悩んだものであってsoma1104様には大感謝である。それにしてもこの括弧内は長すぎないだろうか。）

今日はここまで。書き残したことは後日書こうと思う。書こうと思う。
二度書くと嘘みたいだな。

Stacey-テンプレートの中を探ってみる

2010-04-14T02:18:16Z

引っ越しました。
Staceyについてまた少しずつ書いていきたい。などと書くとずいぶん調べ物は進んだんだろうと思われる方もおられるかもしれないが、引越しをしたんだから引越しのドタバタ以外のことは何もしておらんわ！

えー、そろそろ独自テンプレートを作る準備をしたいわけだがさしあたりどこからさわっていいのか判らぬ。
そこでとりあえずダウンロードページにあるテンプレートをひとつ落としてみよう。最初の（template1）はデフォルトで入っているものなのでそれ以外を。解凍したら中はこんなだ。
・content
・public
・templates
要するにこれ以外は無視して良いということになる、と思う。
さらにcontentsについてはもう説明しましたね、メインのポートフォリオをここでチャチャッと作成します。簡単、だから今回はパスさせて頂く。
であるからして、今回はpublicとtemplatesの中身を調査しておきたい。
publicを開くと
・404.html
・docs
・images
と、一つのファイルと二つのフォルダが入っている。それぞれ見ていこう。
まず、404.htmlだが、これは簡単。「そんなページ、うちでは取り扱ってないっすよ」とお断りするページだ。中を覗いたら判るが、どうかと思うくらい単純なページだ。そんなことでうっかり無いページに誘導されてしまった者たちが納得するとはとても思えない、という方はもう少し丁寧なページに改造することをお薦めするが、あまりにも丁寧すぎて慇懃無礼になってしまっては逆効果かもしれないのでホドホドが肝要だ。
次にdocsだが、この中にはcssとjsのフォルダが入っている。それぞれの必要なファイルをここに格納しておけば良いと思う。以上。
imagesはレイアウト用の画像をここにしまっておこう。以上。publicは簡単であった。

次にtemplates。開いてみると
・index.html
・page.html
・project.html
・caterory.html
・feed.atom
・partials（フォルダ）
以上、５つのファイルと１つのフォルダがある。
feed.atomはRSS配信用でしょう。ざっと見て放っておきましょう（いいのか、それで）。
partialsの中身は要するにhtmlの部品ですね。今のところは放っておく。変えたい人は中身を見てコチョコチョ変えてください。
で、それ以外のファイルが何であるのか。おそらくindex.htmlはトップページのことで間違いなかろうと思うが、それ以外がどうもあやふやであるので巨匠は大胆な策に打って出た。
ローカルにインストールしているものを１つずつ消す。当たり前だが消されたページはエラーが出るであろうからそれで検証出来るというものだし、巨匠とは誰のことだって、それは私のことだろう。

すぐ結果が出た。発表します。
index.htmlはトップページ。当たり前すぎる。
page.htmlはコンタクトとかアバウトとかの独立したページ。なるほど。
project.htmlはメインのポートフォリオの個別ページでした。
category.htmlは、、、消しても何も起こらない謎のページである。なんなんだ。おそらくカテゴリ一覧的なページのファイルなのだろうが、今のテンプレートでは必要とされてないから使ってないということでしょうか。すいません、よく判らないので勉強しなおすとともに巨匠の名を返上させて頂きます。
おそらくあるであろう次回に続く。

staceyに記事を入れる

2010-03-15T05:50:49Z

インストールも出来たのでとりあえずデフォルトのテンプレートのままで記事を作ってみた。
トップページはこんな感じ。

シンプルですが、まあとりあえずだ。
まずはheaderから説明するよ。前のエントリの口調が残ってるけどこのまま行くよ。キャプチャが良く見えないかもしれないけどとりあえず行くよ。
左上の「カメラート・デザイン部」「web designなんちゃら」とその横のメールアドレスはDocuments/content内の_shared.txtで変更出来る。それぞれ

name: サイトタイトル

profession: サイトの説明？

email:

<メールアドレス>

という感じで判りますよね。変数みたいなものですね。適当に変更してください。あ、なんかtxtファイルがShift_JISになっている場合があるのでエディタでUTF-8によろしく。
タイトルはh1タグ、説明はh1タグ内にstrong、アドレスはemでマークアップされているみたい。また、メールアドレスはデフォルトでHTMLエンコードされてます。芸が細かいですね。えー、次はサイドメニュー。
実績、デザイン部について、Contactと並んでいますが、これはフォルダのキャプチャを見ていただいたら判りやすいのでどうぞ。

2.contact-me

3.about

4.project

と名前が付いているのがお分かりだろう。ここのフォルダで先頭に数字ドットが付いているものがDocuments/templates/partials/navigation内のnavigation.htmlによって制御されている模様。あれ、ここまで詳しく書くつもりはなかったのだがな。面倒くさくなったらこのへんで読むのをお止めになるのもひとつの勇気だと思います。
とにかく大事なのは数字ドットの付いたものが降順で表示されるということ。降順というのは大きな数字が上にくるということですよ、ってことまで書かなくていいか。数字のないものは独立したものとして想像力の赴くままに好きなところに表示してください。あ、メニューの表示名はそれぞれのフォルダ内のtxtファイルのtitle: の後にお好きなものを。

さて、メインの記事です。ここでは4.projectの中にフォルダを入れてます。さっきと同じように数字ドットを付ければ降順に表示されますよ。トップページのキャプチャ参照のこと。
実際の記事のキャプチャ。

フォルダ内にはtxtファイルと画像を入れます。画像は複数おけますよ。同じように数字ドットで降順です。txtファイルは

title: 記事のタイトル

date: 投稿日時、あるいはこのprojectの作成日時

content: 記事本文

の３つによって構成されます。画像は本文の下に自動的に表示されます。なんと複数枚ある場合はajaxによってスライドショーになっています。自動で。すごい。ただ、注意すべきは画像の高さが違いすぎると下のキャプチャのように隙間が出来ます。なるべく揃えましょう。

もう一つ注意だ。記事本文はpタグでマークアップされるので改行は効きません。brタグを使いましょう。逆に言えばpタグ内で使えるタグはパリパリ使って良いということなので、結構柔軟かなとも思います。もちろん自分でcssを変更しないとどうにもなりませんが。
ちなみにDocuments/public/docs/cssの中にscreen.cssがあります。頑張りましょう。

次は変数的なものや独自タグ的なものを調べてみたい。いつか。
まあ、あまり期待されても困るのであって、こんなエントリは私のリハビリみたいなものだと思っていただきたい。
どんな終わり方だ。

StaceyをOSXにインストールしてみた

2010-03-13T08:58:19Z

Staceyというのは軽くてデータベースを使わないCMSで、OSX10.5以上ならばローカルにインストールすることが出来るようなので興味を持った。とにかく入れてみるかと思ったが、その手順の説明が英語だよ。読めない、と言うか読みたくないのだった。日本語で説明しているサイトはないかと思ったが、まあ、皆無に等しかったり。かろうじてMOONGIFT様がシンプルなポートフォリオ「Stacey」という記事を書いておられる。ポートフォリオなのか？

Staceyはごくシンプルなポートフォリオで、プロジェクトごとにフォルダを作成し、その中に内容や出来上がった作品を写真として残していく。それだけでデータベースも使わずにシンプルなポートフォリオが出来上がる仕組みだ。

ということです。
なるほど、解凍したフォルダの中のcontent/4.projectsを開くと記事ごとのフォルダがあり、その中に画像とproject.txtなるテキストファイルが入っている。こういうフォルダをアップロードすることによって記事を追加するシステムのようだ。
思案中の「お仕事しましたページに使えそうだな」ということでなんとか英語を解読することにした。

注：本家のRunning on OSXを参照しながら読んでください。画像もあって判りやすいですよね。むしろ本家のページをそのまま読んだ方が判りやすいとも思います。
MacOS10.5以上でないとインストール出来ませんよーということです。では、超訳開始。

1.staceyをダウンロードして解凍してデスクトップにおいてね。

2.Finderの画面にして移動→フォルダへ移動をクリック。
ダイアログボックスが出るから/etc/apache2と打ち込んで「移動」をクリック。

3.パーミッション変更をします。フォルダ内のhttpd.confを右クリック→「情報を見る」クリックで「共有とアクセス権の変更」をします。everyoneのアクセス権を「読み出しのみ」から「読み/書き」に変更してください。

4.さっきのhttpd.confをなんらかのエディタで開いて、うちでは115行目でしたが、まあそのあたりの

#LoadModule php5_module libexec/apache2/libphp5.so

の冒頭の#を消します。これでこのコマンドが有効になります。
次に214行目あたりかな、

#

# AllowOverride controls what directives may be placed in .htaccess files.

# It can be "All", "None", or any combination of the keywords:

#   Options FileInfo AuthConfig Limit

#

AllowOverride None

の最後のAllowOverrideのところを

AllowOverride All

に変更します。で、セーブ。これはなにかというと、えーと、AllowOverrideがNoneだと.htaccessファイルが無視されるけどAllに変えると有効になるよ、ってことのようです。勉強になりますね。.htaccessファイルが何かというのは調べてくださいね。

5.次にFinderから/ライブラリ/WebServer/Documentsを開いて中のファイルを削除。コピーしてどこかに保存しておいてもいいですよ。
で、staceyフォルダの中のapp、content、public、templatesのフォルダとhtaccess、index.phpをDocuments内に移動。

6.「システム環境設定」を開いて「共有」をクリック。「web共有」を「入」に変更。

7.Terminalを起動します。あ、ちょっと嫌になってる人がいますね。大丈夫、簡単です。私もやるまではちょっと気分が重かったものです。

cd /Library/WebServer/Documents

と書いてエンターキー押すよ。
次に

cp htaccess .htaccess

と書いてまたエンターキー押すよ。これだけ。
cdとかcpとかの謎の呪文はターミナルコマンドというものでcdは「ディレクトリの移動」、cpは「ファイル・ディレクトリのコピー」をするものみたいです。要するにDocumentsフォルダに移動してその中のhtaccessファイルをコピー、そしてそのファイルを.htaccessという名前に変えるという操作をこの二行でやってのけたわけです。かしこいですね、ターミナル。あまり使いたくはないですが。

8.ブラウザを開いてhttp://localhost/に行けばあら不思議、もうstaceyですよ。どういう意味だ。

後はDocuments内のファイルを適当に変更すればhttp://localhost/で反映されてるか確かめることができます。便利。
サイトが完成して公開用のサーバーにアップするときはftpアプリを使ってhtaccessファイルを.htaccessに変えてね、ということです。ターミナルでやったことはなんだったんだと思いますが、なんでしょう、大人の都合でしょうか。絶対違う。

注2：あくまでも超訳ですよ。怒らないでね。やり方だけは合ってると思うけどデタラメらしき記述も散見されますよ。あくまでも備忘録ですよ。
本家に怒られたら削除しよう。

お仕事しました。と、あわてた感じにエントリしてみる。

2010-02-21T06:21:57Z

営業担当者からブログ越しに恫喝されたからというわけではないですが、お仕事紹介しておきます。
昨年、当ブログ内で何度かの工務店関係のエントリをpallaさんと交わしたのを覚えておいでの方もおられるかもしれないが、なんと出来上がっていました。なんとじゃないよ。お待たせしたお詫びにキャプチャを横幅いっぱいにしてみました。

石渡康三郎塗装店

pallaさま、お疲れ様でした。