福岡のホームページ制作[BULANCO(ブランコ)]のWeb制作のこぼれ話

ことの発端

Webデザインを生業としていると、どうしても色んなサイトを見る事が必要になってきます。

これは、Webだけに限った事では、無いのですが、絵画や、建築、道ばたのポスター、車など、様々な要素を見る事で記憶を蓄積して、作る時に、その記憶の断片を追い、様々な情報を足し(お客様の要望やエンドユーザーの試行)自分のフィルターを通して出力する。それがモノ作りだったり、デザインだったりするんじゃないかと思っています。

先に述べた通り、Webサイトを見る事で、多いに刺激を受けている訳ですが、一回見ただけで覚えている訳でもないので、脳みそだけでは無く、物理的にもストックしていく必要があるわけですよ。

やったこと・辞めた理由

そこで、今まで試してきたのが

1. 単純にスクリーンショットを撮って、ローカルに保存。
   (作業が結構面倒)

2. FirefoxのアドオンのScrapBook :: Firefox Add-ons
   (プレビューが見れない)

3. Only2Clicks - speed dial to favorite web site and make it your start page
   (サイトが重くて、プレビューを見るのに時間がかかったり、見れなかったりしたので止めた)

4. スクリーンショットを撮って、Evernoteにアップロード
   (アップロードの上限があるので、あっという間に、一杯になる)

上記の通り色々試してきましたが、どれもイマイチしっくり来ませんでした。

今回の作業

そこで、最近発見したのが、FirefoxとTumblrを使ってTumblrをギャラリーサイト化しちゃおうという作戦。

出来上がりはこんな感じ

参考に成ったのがこちら。

Tumblr＋capture.tumblr.jsの組み合わせでFavorite WEBデザインGalleryを作ってみる - WEBデザイン　BLOG

Mac用のメモ

Macの場合は『JSActionスクリプトの設置・設定』の[3]:が
ユーザー>(ユーザー名)>ライブラリ>Application Support>Firefox>Profiles>(変数).Fifefox3 User←このフォルダー内に設置します。
まぁ、別にどこでも構わないみたいですが、一応私もここに設置しました。

覚え書き

一つつまずいたのが、[5]:の『capture.tumblr.conf』の設置場所ですが
ユーザー>(ユーザー名)>ライブラリ>Application Support>Firefox>Profiles>(変数).Fifefox3 User>script_set←このフォルダー内に置きます。

恐らく今までやった中で一番手間がかからず、しかも表示もサクサクと表示されて良い感じだと思います。

結局テンプレートまで含めて、M-1 2008を見ながら作ったので、約2時間ぐらいで出来たと思います。Tumblrのカスタマイズはした事が無かったので、変数関係のリファレンスを見つけきれず、少々手こずりました。

今回は、初めからあるテンプレートに少々手を加えて作りました。 変数関係を理解して、また改めて、1からオリジナルでテーマを作ろうと思います。

フルFlashサイトの対応

フルFlashのサイトは、右クリックからスクリーンショットが撮れないので、kwout | A brilliant way to quoteというFirefoxアドオンを使っています。Tumblrの管理画面を使うので、画面変遷的に3つぐらい行わないといけないので、上のやりかたより面倒ですが、フルFlashサイトは、今のところ、これくらいしか無さそうです。

出来上がったサイトはこちらです。 BULANCO's Fivorite WebDesignClip

Movable Type をソーシャルアプリケーションに『Motion』のベータを開始 | MovableType.jp

Motion。
まず、なんて書けばいいのだろうか?

『Movable Type Motion』?
そとれも、単独で『Movion』?

色んなWebサービスを取り込み、プロフィールを作れると行った形でしょうか?
MTコミュニティーブログ+iddy | ブロガー向けプロフィールページASPって感じでしょうか?

使ってみないと分からなそうなので、また後日インストールしてみて試してみようと思います。

参考リンク
今日のMovable Type：Movable Type: Motionにシックス・アパート社の開発魂を感じた: 世界中の１％の人々へ

警固公園のイルミネーション。 去年まではこの池を渡れたのに、今年からは無くなりましたね。

ISO400で露出などいじらずに、そのまま撮っています。

平日なのに人が本当に多かったです。
みんな光り物好きですねぇ。

ソラリアプラザのクリスマスツリー。 恐らく、天神で一番、フツーのツリーじゃないかな。

これは、岩田屋のツリー。
ケーキにツリーが刺さっています。。。なんで?

天神ではないですが、キャナルシティーのツリーです。
ここまで来ると、ツリーではない気もしますが、個人的にはこれが一番好きですねぇ。

イルミじゃないけれど、TUTAYA天神店。18時頃の夜空。GR II は本当に空の青が綺麗!
最近のTUTAYAのデザインワークは、佐藤可士和氏のものだろうから、恐らくここもそうかな。

続きは、私のFlickrに他にも色々あるので、是非!

お仕事で、Movable Type 4.23のコミュニティーブログを入れたんですが、今まで見慣れなかった文字が画面にありました。

この画面の

ここ!!

前からありました?
付いたとしたら、コミュニティー機能が搭載されたあとぐらいからですかね?

管理画面を変遷しなくても、そのまま、サクッと投稿出来ちゃいます。

ただ、カテゴリやら、タグ等は付けられないようなので(もしかしたら、出来るのかも、要研究)簡単に投稿したい時には便利だし、逆に、無駄な入力箇所が一切ないため(日付すら)ユーザーは使い易いかもしれませんね。

追記
カテゴリは、すでにあるものであれば選択出来る事が判明しました。
ただ、この画面で新たに作る事は出来ません。 
失礼しました。

書きたくなったら、サクっとすぐ書けるっという意味では、かなり使える機能のように思います。

コミュニティーブログ、リリースした時に試しにインストールしましたが、細かく使った事無かったので、他にも色々と便利な機能がありそうなので、この機会に研究してみます。

MacOSXでhostを変更するときの方法のメモです。

finderで直接変更出来そう(隠しファイルを表示する設定にする必要があります。文末参考)ですが、管理者権限じゃないと変更出来なかったりするので、ターミナル経由が一番簡単。

ターミナルで

sudo vi /private/etc/hosts

以上入力。 sudo viとまで書いて、該当ファイルをターミナルの画面にドラックアンドドロップでもOKです。

パスワードを聞かれるので、素直に入力。(入力している間は画面に表示ありません)

Swap file "/private/etc/.hosts.swp" already exists!
[O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it

こんな感じで聞かれるので、R(大文字)と入力
末尾まで行って入力

192.168.0.100 bulanco.net
(IPアドレス) (ドメイン名)

こんな感じで入力すればOKです。
ESCを押して、入力モード終了
ZZで保存。

以上で、再起動無しでホスト名を書き換える事が出来ます。

参考リンク

管理者権限でのファイル編集 (うむらうす)

Santa Software | MainMenu
(隠しファイルの不可視ファイルの表示を簡単に設定出来ます。その他便利なものも色々入っていて使い易いソフト)

追記(08.12．18)

別の環境(OS)用メモ

Windows XP %SystemRoot%¥System32¥drivers¥etc¥hosts

Linux+Unix系OS /etc/hosts

先週末、 サト研(サイト運営・研究会)の忘年会に行って参りました。

その前々日に、39度の熱を出し、土曜日のOSCは結局行けなかったので、サト研忘年会も、参加自体考えたのですが、当日熱が下がったので、なんとか参加出来ました。

一次会は、割と普通な、自己紹介から始まって、ビール瓶を持ってついで周るという、どこの忘年会でもあるような光景が繰り広げられていました。

3000円の予算なのに、料理も立派で驚きました。 幹事をやってくれた、たかださんには大変感謝しております!ありがとうございました。

2次会は、ふとっぱら大名店、私たちの中の通称FTPに移動して、ぐだぐだ話。 近くに、西嶋さん、田村さんが座っていまして、いつからか、コーディング話に。。。途中から、我流氏も参戦しますます熱を帯びた感じに

• inquiryはおかしいらしいよ。ネイティブではcontactらしいよ。
• _(アンダーバー)or-(ハイフン)どっち使う?(_のほうが総合的には軍配が)
• idやclass名に大文字使う?(使ってOKだけど、私は使わないかな)
• cssの構成方法。(後日別エントリーで上げます)
• hackはやる?(私は、状況により。極力やらないが、単価的に厳しい場合はやる方向)
• 結局のところ、CSSスプライトってどうよ?(使いよう。ケースバイケース)

まぁ、こんな、ディープな話が夜中のFTPで繰り広げられました。 忘年会なのに、CSSの話で盛り上がる辺り、サト研らしいなっと感じました。

知らなかったので、メモです。

この際、XHTML 1.1では、target="_blank"自体がアウトじゃないの?っという話は置いといて、target="_blank"と、普通blankの前に_(アンダーバー・アンダースコア)を書きます。 これは、文法的には正しいみたいで問題ないのですが、アンダースコアを外すと(target="blank")、一度開いた同じウィンドウで開いてくれます。

リンク集なんかを作って、リンクを全てtarget="_blank"にしたものの、じゃんじゃんウィンドウが開いて忍びないなぁ、なんか言う時に使えます。

一応、_(アンダースコア)を付けなくても、Another HTML-lint gatewayは、問題なく通過しました。

というか、これって常識ですか?

blankと_blankの違い。 続きを読む

ここの所、連発でセキュリティーバージョンアップがかかります。
本当に面倒ですよね。

Movable Type においてクロスサイトスクリプティングによる脆弱性が確認されました。この問題に対処するため、Movable Type の修正バージョンを公開致します。脆弱性の修正バージョンとなりますので、アップデートを推奨致します。

詳しくはここから。
[重要] セキュリティアップデート Movable Type 4.23 の提供を開始 | MovableType.jp

以前MTを入れたお客様に、案内するのが一番大変で、バージョンアップにある程度コストが掛かるため、どのように案内すれば良いか、いつも悩んでいます。

ある程度、メンテ料金頂いているお客様ならコストをこちら負担で構わないのですが、そうではないお客様の場合が一番困ります。コストを負担して頂ける方もいらっしゃるのですが、ご負担頂いても、こう連発でセキュリティーバージョンアップがかかると忍びなくなります。

皆様どのように案内されていますか?

Flickrに上げているやつをそのまま貼れるか実験。

マクロ機能のぼけ、良い感じです。

空の青は本当に奇麗に撮れます。

シャッタースピードを遅めにして

ぼけているけど、夜でここまで取れれば良いのかな。
次はきちんと固定しよう。

なにより、撮影するのが楽しいカメラです。

前々からMT4純正の、WYGIWYGは嫌いでした。特に1行開けたいときなんかに<br />タグを連発するあたり、大嫌いです。

かといって、プラグインのWYGIWYGも何個か試しましたが、どれもしっくり来るものが無く半ば諦めかけていましたが、ここに来て凄いのを発見しました。

それも純正です。 以前書いたエントリMovableTypeでコメントスパム防止ってやつでも、純正機能を見落としていました。

見落とし第二弾です(笑

nishiakiさんが提案しているこの方法なんかも非常に良案だと思いますし、私も有り難くまねさせて頂いています。
でも、これはあくまでもhtmlの知識がある前提なので、プロユースだったりします。

このMarkdownは、特にhtmlの知識が無くても、文章を構造化したいという要望に応えられます。

前置きはこれぐらいで、実践へ。

Movable Type 4の投稿は、Markdown一択です。 続きを読む