2007年7月アーカイブ

今頃ですが、Googleのサービスに注目しています。

Googleブックマーク…オンラインブックマーク
「はてぶ」や「デリシャス」などが有名ですがあっちこっちのサービスを利用すると管理が大変なのでGoogleブックマークを使い始めました。
デリシャスのアカウントは以前に取得していましたが、さっぱり使っていませんでした。最近まではブックマークが増えるだけで管理が大変になるとしか思っていませんでした。
使い始めたきっかけは、最近はやってる「後で読む」の変わりのサービスを探していた所、よく考えるとオンラインブックマーク使えばいいじゃんって思いました。
これなら会社で見つけたサイトを自宅でもすぐにチェックできます。
使い方も以外と簡単だったのでこれから重宝しそうです。

Gspace…FireFoxの拡張機能。ファイルのバックアップとしてGmailのスペースを利用できる。

このサービスは飛行機の中でよんでた雑誌で紹介されていました。
Gmailと言えばメールサーバーのスペースが2Gぐらいあります。
そのスペースをファイルサーバーとしても利用できると書いていました。
持ち歩きたいファイルを今まではフラッシュメモリーなどにいれていましたが、これからはそんな必要はありません。
Gmail File Space (gspace)
firefoxユーザーの方ならGmail File SpaceからファイルをDLしてインストールすればツールの中にGspaceが表示されます。
Gspaceを起動してアカウントを設定すればすぐに使えます。
YUはffftpみたいです。
サイズの大きいファイルを転送すると時間がかかりますが、ちょっとしたファイルであればもんだいありません。英語表記になっているので若干使いづらさを感じますが、必要最低限のことなら使いこなせるかと思います。
ちょっと得した気分になりますね。

新しい記事にたいして3日間はnewマークを表示させます。
小枠空間のものだとちゃんと表示されないので少し修正が必要。
今回は「サブカテゴリーリストの場合」にあてはまる

追加する項目
・MTタグ
・Javascript
・CSS

<MTEntriesWithSubCategories sort_by="title" category="カテゴリー名" lastn="5">
<li class="arrow01"><span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><span class="date">(<$MTArchiveDate format="%m.%d"$>)</span></li>
</MTEntriesWithSubCategories>

MTEntriesは合体させる
<$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>←ここで3日間を表示

新着エントリーのあるカテゴリーに New マークをつける

これはいいーーー
中途半端にに残ったカードのポイントってありますよね？
あれって無駄ですよね〜
せっかく貯めたけど使えるポイントまで達してない…
そんな時にポイ探を使えばポイント移行ができるので溜まったポイントが無駄にならない。

[ポイ探] ポイント探検倶楽部：ポイント交換ルート検索、ポイント自動管理
http://www.poitan.net/

ネットマニアさんで「エクセルの配色を変える方法」を紹介したいたのでメモ。
Excelでつかる配色ってほんとダサイ色しか使えなかったのでこれは助かります。

「エクセルの配色を変える方法」

画像のボタンをロールオーバーで変化させる時は２つボタンをつくる必要がありますが、このCSSならボタンは１つで足りてしまいます。

画像の輝度を上げる
■html
<a href="http://blog.webcreativepark.net">
<img src="./tor.gif" alt="to-R"/>
</a>

■css
a:hover img{
opacity:0.8;
filter: alpha(opacity=80);
}

ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。
IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。

IE・Firefox・Opera・Netscape・Safari対応
CSS Opacity設定
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;

■IE
alpha(opacity=透明度);
100が100％となる。25％の場合は、25

■Firefox・Netscape
-moz-opacity:.透明度;
1.0が100％となる。25％の場合は、.25

■Opera・Safari
opacity:透明度;
1.0が100％となる。25％の場合は、.25

CSS3.0からは、opacity:透明度;の設定ですべてのブラウザで表示可能になるらしい。

フリーのオーサリングツールと言うことでez-htmlを使ってみようと思ったがwin専用らしい。
uiを見る所結構使いやすそうなイメージがある。
機会があったら使ってみたいと思います。

ez-html

Dreamweaverの代替ともいわれるAptanaを使ってみた。
環境osはwin,mac,linaxに対応してる。
英語版しか無いとの情報だったが、実際は8対2の割合で日本語でも表示されていた。

まずつまづいたのが、プレビュー画面。
DWではデザイン、分割、ソースの３タイプから表示できるが
Aptanaではソースがメインでデザインや分割はないようだ。
プレビューはsafariでの表示となる。

色々触ってみたがどうも使い方がわからない…
このままの状態だとコイツだけで制作するのはかなり無理があるようです。

Aptana web site

html&cssオーサリングツールのStyleNoteです。

今日聞いてたポッドキャストで紹介されていたのでチェックしてみました。
環境はwindowsのみの利用のようですね。

StyleNote

CSSとJavascriptでシンプルなプルダウンメニューを紹介しているサイトがあったのでメモ。
テキストの中央揃えとボタンの幅を変更すればすぐに使えそうです。

プルダウンメニューの方法

１つのページに複数のページを表示できるスクリプトです。
ただ、1コンテンツに大しての情報量が多いとみずらくなる可能もある。

prototype.jsベースの伸縮するアコーディオンＵＩ実装ライブラリ「Accordion v1.0」。
prototype.jsとscript.aculo.usのeffect.jsをベースに、mootoolsで作れるようなアコーディオン風ＵＩを実装できるようです。

よくホームページの新着情報などに使われているスクロールするスペースの部分をAjaxで表示する事ができる。

Sample1
矢印にマウスオーバーでスクロールする

Sample2
矢印をクリックすると画面の移動ができ、ハンドルを使ってスクロールも可能。

Sample3
ほぼiframeと変わらない

Sample4
タブ機能が追加

Sample5
タブに加え、右側にメニューも表示

Sample6
背景にオシャレな画像

(Ajaxの)デメリットとは
まず、Ajaxといってもブラウザに依存する部分がある。(MicrosoftのIEを使うのかFirefoxを使うのか)そしてそれによってプログラムを変える必要がでてくる。(工数増大)
例えばブラウザを固定するにしてもさらにバージョンによる違いがある。(IEの6か7か)(工数増大)
さらにブラウザが動作するOSによっても制限を受ける(Windows XPかVistaか)

これらをふまえてOSやブラウザを幅広くサポートしようとすれば、Ajaxの場合、
IE6(XP)/IE6(Vista)/IE7(XP)/IE7(Vista)/Firefox2(XP)/Firefox2(Vista)/Firefox2(Mac)/Firefox2(Linux)
で必ず動作するプログラムを作る必要がある。
通常、ここまでの作り込み＆テストは不可能なので、ある程度絞り込んだ範囲で動作するものをつくることになる。

ただし、Ajaxは(日々進化している)まだ発展途上の技術である。特にAjaxライブラリの出来が重要なので、主要なメーカー(MicrosoftやGoogleなど)が出してくるAjaxライブラリは随時チェックしておく必要性はある。

メリット
・CSSにより画像を一元管理できるので、メンテナンスが容易になる
・Javascriptをオフにしている環境でも動作する

デメリット
・音声ブラウザで画像の情報が読み上げられない
・CSSオン・画像非表示という環境で何も表示されない
・CSSの指定によって、古いブラウザでは表示が異なる場合がある

メリット
・サーバー管理者は安全である。
・データーはユーザーのブラウザーの中で処理されるので悪意をもったユーザーが掲示板にいたずらしたりするようなことは起きません。
・サーバー管理者はリソース（ネットワークの大域やサーバーのＣＰＵ）を消費しない。
・プログラムはユーザーのブラウザー上で動作するので、サーバーに負荷はかかりません。
いいかえれば、大量のアクセスがあっても動作できます。
・設置環境の制限がない
・原則ホームページが公開できるところであればどこでもコンテンツを作成できます。
・cgiが使えるかどうか気にする必要がありません。
・CD-ROMというネットワークに接続しない環境用のコンテンツも作成することが可能です。

デメリット
・JavaScriptという言語で記述しないとならない。
・JavaScriptはある種特殊なので、他の言語しか知らない人には難しかったりします。
・Javascriptをオフにしている環境では動作しない。
・JavaScriptの動作はブラウザーにまかせられてますのでブラウザーによっては動かないものがある。
・Macの特定のバージョンのNetscapeで動かないときがあるので使いたくありません。

JavaScriptをオンにする方法

Internet Explorer 6.0(Windows) の場合　　(MAC版も似た感じだと思います)

メニューバーの『ツール』→『インターネットオプション』→
『セキュリティ』→ 『インターネット』→『レベルのカスタマイズ』→
『スクリプト』→『アクティブスクリプト』の「有効にする」をチェックして下さい。

今の所、特に電話でお客さんと話す事はないが、基本的電話のマナーって大事ですよね。

1:だらしない姿勢で電話をとる
2:語尾上げ、語尾伸ばし
3:「はい、はい」を繰り返す
4:復唱せず聞き流す
5:同じ謝罪の言葉を繰り返す
6:相手を否定する言葉を使う
7:あいまいな言い方をする
8:相手の名前などを聞き忘れる
9:留守番電話でだらだら話す
10:人に伝言を依頼した場合、相手の名前を聞かない

Garbagenews.com

どうやら最近yahooで新しいサービスが開始されたらしい。

「yahooなんでも交換」

オークションとは違っていらないものを交換しましょう！ってサービスですね。
個人的にはいいアイデアだと思います。
なんでいらなくなった捨てるんじゃなくて、貰ってくれる人がいたら使ってもらう。これって大事なことですよね。
利用者を見てると関東よりも東海地方のユーザーが多かったのには驚いた。

で、早速、鏡を処分したかったんですがヤフオクだと梱包が大変なので「yahooなんでも交換」を利用することに。
ヤフオクを運営してるだあけあってこのサービスはヤフーにとってはお手の物って感じがした。
登録やログイン、管理者情報などはオークションによく似ている気がする。

まだユーザーが少ないがこれからどれぐらい反響があるのか楽しみです。
等身大の鏡が欲しい方は是非

「yahooなんでも交換」

Adobeソフトは高価で買えない！って方はやっぱりフリーソフトでしょっ！
って言っても多機能なフリーソフトは海外物ばかりで使い勝手がいいとは言えないが慣れれば使えるようになるのかな？

個人的には有料のソフトでなく全てフリーのソフトで賄えるようになりたい。

1. Photoshopの代替ソフト GIMP
2. Illustratorの代替ソフト Inkscape
3. Dreamweaverの代替ソフト KomPozer
4. InDesignの代替ソフト Scribus
5. AfterEffectsの代替ソフト Jahshaka
6. Flashの代替ソフト Synfig
7. Acrobatの代替ソフト PrimoPDF
8. Soundboothの代替ソフト Audacity

DesignWalker

ウノウラボさんで「 水平方向のナビゲーションの作り方」の記事を発見しました。
この方法はパン屑リストに応用できそうですね。
基本中の基本なのでしっかり覚えておきたい。

ウノウラボ

更新情報って毎日やるとなるとかなり大変なので、複数のブログから更新情報を表示させる方法を導入。
これなら他の人がブログを更新するたびに情報を更新してくれるからラクチンですね。
レッツphpさんのサイトからスクリプトがDLできるが修正点がいくつかあった。

■ダウンロードファイル
rssup.php（以下詳細）
Parser.php
RSS.php
この3つを同階層に保存してアップロードするだけ。
パーミッションの変更は必要なし

■概要
複数サイトのRSSを新着順に表示します
表示件数設定可能
RSS2.0の日付（pubDate）にも対応
文字コードはShiftJISです

■ダウンロード
　rssup.php.txt
５行目のrequire "XML/RSS.php";
「XML/」を削除　（同階層に置くのでXML/は必要ない）

■RSSサイトURL（複数可）
$rdf[] = "http://pippi-syokuji.hpnk.jp/index.rdf";
ここでは多分rdfファイルしか使えない。
xmlを使ってみたが反応なし…
$rdf[]←この部分をxmlに変えてみたが反応なし…

■サイト文字コード（SJIS、EUC-JPなど）
$code = "SJIS";
自分のサイトの文字コードに書き換える

■表示
echo <<<B
この辺はなんとなくわかるだろう。変更したければバックアップとって消してみる。
こん回は年とサイトのタイトルがいらなかったので削除した。

RSSトピックス

RSS関連の情報が掲載されているブログを発見！
今後や役立ちそうなのでメモ

RSSフィードマーケティング
http://www.feedmarketing.jp/

Flashのサイズが大きいファイルだと読み込みまでに時間がかかります。
そこで Now Loadingを設置してみました。

最初のフレームに設置する
テキストでの表示（0%～100%）は「ダイナミックテキスト」で変数を「count」とする
ダウンロードシュミレートで確認する。

コチラで分かりやすく説明しています。
カッシーのWEBる。

ホームページを作ったわいいが更新作業をどうしよう…
htmlは分かる人であってもこの作業をどうするかが重要です。
cms導入したり、php使ったりって方法もあるけどcmsは大変でそこまで大規模にするつもりはない。
それにプロバイダのサーバーや無料サーバーだとデータベースに制限があったり使えなかったりする。

もっと使いやすく作る方法ってないかなーって思い探していると面白いサービスを提供している会社があった。
「はりがみ屋」
http://www2.harigamiya.com/htm/

使いかたは非常に簡単で、メールを送るだけ！
htmlタグも使えるらしい。
（体験ページがありましたがyahooメールからの投稿はできませんでした。）

お試し40日もあるらしくメールアドレスの登録でアカウントを取得する。
指定のスクリプトを埋め込むだけのようだ。

画像の添付が可能なオプションサービスやポータルサイト向けのサービスなどもある。
費用はテキスト版で525円（月）
画像も載せれるサービスは892.5円（月）

個人のホームページや小規模店舗がメインになると思うが使い方によっては非常に便利なサービスだと思います。

とある本を読んでいるとテリー伊藤の特集ページにでくわした。
内容は企画力的なものだった。

テリー伊藤は本のタイトルなどを決める時に「１番遠い場所にある言葉をくっつける」方法を使う事があるらしい。
例えば「合コンで持ってる年金問題」？？
一瞬、なんだそれ？って思うが人って言葉として両方とも知ってるものを意外な組み合わせにされると興味を持つらしい。たしかにそうかも…

そこで考えてみた
・ニューヨーク町屋
・地下3000メートルの富士山
・毛深いシンデレラ

どうでしょう。。

他にはこんな事も書いていた。
桃太郎の話をアレンジして映画にしたらどうだろう
おばあさんが川に洗濯にいくと上流から桃が２つ流れてきた。
１つの桃は拾えたがもう一つの桃はそのまま流され鬼の手に渡ってしまう。
二人はライバルとして激突する！

なんて発想なんだーーー！って思いませんか？
コレ聞いただけで見たくなってきた。
ただ伊藤せんせーいわく、合コンや年金、桃太郎などはみんなが知っているから興味を引くと行っていた。確かに聞いた事のない言葉を使っても反応はうすいだろう。

他にいい言葉として
・「面白い事を１回言うよりつまらない事を100回」
・思いつかないならアレンジすべし
・夜中にだじゃれを言い続けてみる
・コレは面白いです！と必ず言う

ポジティブだなーこの人

『アップリンク』

■アップリンクで使われているプラグイン

Movable Typeでポータルサイトを構築するために、どのようなカスタマイズを行ったか、そのような点に苦労したのか、実制作を担当した濱田さんに伺ってみたところ、次のような答えが返ってきた。

「構築で苦労した点は、とにかくブログの数が多かったことですね」（濱田さん）

ポータルサイトと普通の日記サイトとの違いはリンクの数と言っていいだろう。アップリンクのサイトは、「NEWS」「FILM」などジャンルごとにブログを立ち上げ、トップページから各ブログのエントリータイトルを呼びだす方法を採っている。これは「MTOtherblog」というプラグインによるものだ。リンクを生成するのはMovable Typeに任せておけばよいが、複雑にブログやエントリーが入り乱れるため、テンプレートを作るのに少々手こずったようだ。

ただし、その苦労は作業の効率化という形で報われている。各ブログの更新は、各商品や映画の担当者に任せられ、これまでのようにWeb担当者が四苦八苦することは無くなった。また、担当者が直接更新するため、事前の内容チェックは行わず、素早い情報の更新が可能になったという。

また、各エントリーに貼った画像をサムネイル化してトップのインデックスページに掲載するために、「MTCollect」というプラグインも利用している。細かい部分だが、インデックスページを華やかにして閲覧者の興味を惹くのに効果的な方法だろう。このように同じデータを呼びだすページによって違う見せ方にするのも、作業の効率化といえる。

今後の課題として、データベースを直接操作して、スケジュールを組んで掲載する情報をコントロールしたり、各エントリーに英語訳も持たせることを考えているという。今後も、Webならではの方法論を追求したポータルサイト構築で、Movable Typeの可能性を広げていってくれるに違いない。

『アップリンク』がMovable Typeを利用する理由

ポータルサイトを作るにはCMSはかかせませんね。
もし作るとしたら、mtかxoopsを使うだろう。

Google ManiaさんでFireFoxの拡張機能の紹介をしていたのでメモ。
webサイト制作者にとっては非常に役立つツールがfirefoxから提供されていますね。

1. Firebug
Firebugを使えば、あらゆる Web ページの CSS、HTML、および JavaScript をリアルタイムに編集、デバッグ、モニタすることができます。また、発見したバグを知らせてくれるので、自分でエラーコードを探す手間が省けます。限定したサイトのみにfirebugを動作させるようにカスタマイズし、プレビューしたサイトに対して、on the flyでＣＳＳを編集することもできます。

2. MeasureIt
ウェブデザインでは、１ピクセルの狂いもなく正確な画像やレイアウトサイズが求められます。MeasureItはウェブサイトの特定部分の高さと横幅を正確に測るツールです。

3. ColorZilla
ColorZillaはカラーピッカーを使ってウェブサイト上のカラーをステータスバーに表示したり、パレットから選んだりできるツールです。

4. Screen Grab
表示中のページ全体のスクリーンショットを撮ったり、自分で選択した範囲のキャプチャを撮ったりできます。この範囲選択ツールを使えば、ログインが必要なページでも簡単にキャプチャすることができます。

5. Web Developer
ウェブ開発者に人気のあるツールです。ソースなどの、サイト構造をみるのに重宝します。CSSや画像の大きさなどを見れるほか、画像のパスを表示したりもできます。

6. IE Tab
世界中で最も利用されているブラウザ＝Internet Explorerで動作確認するのは必須です。 IE Tabは、Firefox上から１クリックでIE表示に切り替えてくれます。特にCSS とjavascript コードをチェックするのに役立ちます。

7. HTML Validator
ウェブデザインを完璧にするには、W3C規格に合わせることが必須です。Html Validatorはそれをローカル環境でチェックするのに最も役に立ちます。エラーログを表示し、さらに修正例まで示してくれます。

8. CSS Viewer
CSSViewerは閲覧しているサイトのhtml要素のＣＳＳ属性を表示してくれるシンプルな拡張機能です。シンプルで使いやすく、また表示される情報も正確なので、デザイナーに人気があります。

9. Fire FTP
FireFTPはFirefoxをシンプルでパワフルなFTPクライアントに変身させます。複数のアカウントを利用することができます。

ウェブ製作に便利な９のFirefox拡張機能

フォームにパラメータを入れるだけで次のような可愛いグラフが簡単に作れます。
資料作成時や、ブログの図として添える際に非常に便利。

WEB API も公開されており、URLを組み立ててタグで好きなグラフを簡単に貼り付けることも出来ます。
ブロガーにはかなり使えるツールですね。

円グラフ簡単作成サービス

以前はGoogle検索フォームのみ紹介しましたが、今回はその他の検索フォーム作成ツールも紹介します。

MSN
http://search.web-sun.com/zatu/tool/site_msn.html
MSNのインデックス数は余り多くなくサイトによっては全くインデックスされないといった場合もあります。

Yahoo!
http://search.yahoo.co.jp/promo/searchbox.html
”ドメイン内検索”の項目のソースを貼り付ければ上手く行きます。

Mooter
http://tools.mooter.co.jp/searchbox.html
MooterにもWebとサイト内検索を切り替えて使えるソースが公開されています。

Google
http://search.web-sun.com/zatu/g_site.html

これらの検索窓は検索結果を営利目的で利用しなければ許可やID等の取得の必要も無く誰でも自由に使えます。
検索窓のタグを多くのサイトが貼ってくれる事はそれだけ企業としての宣伝にもなるからです。

エントリーフッターを理解する。

< MTEntires>
.............
< p class="entry-footer" >
< span class="post-footers" >投稿者: < $MTEntryAuthorDisplayName$ > 日時: < $MTEntryDate format="%X"$ >< /span > < span class="separator" >|< /span > < a class="permalink" xhref="< $MTEntryPermalink$ >" >パーマリンク< /a >
< MTIfCommentsActive >| < a xhref="< $MTEntryPermalink$ >#comments" >コメント (< $MTEntryCommentCount$ >)< /a >< /MTIfCommentsActive >
< MTIfPingsActive >| < a xhref="< $MTEntryPermalink$ >#trackback" >トラックバック (< $MTEntryTrackbackCount$ >)< /a >< /MTIfPingsActive >
< /p >
.............
< /MTEntries >

< $MTEntryAuthorDisplayName$ > エントリー投稿者の名前
< $MTEntryDate format="%X"$ > エントリー投稿日時
< $MTEntryPermalink$ > エントリーへのパーマリンク
< $MTEntryCommentCount$ > エントリーへのコメント数
< $MTEntryTrackbackCount$ > エントリーへのトラックバック数
< $MTEntryPermalink$ >は、URLになる変数タグですが、このURLに#commentや#trackbackといったアンカーが付いています。これによって、リンク先はページの指定の位置になります。

今後、サイト制作において生命線となりそうなMovable Type。
そのmt独自のタグを少しずつ覚えたい。

< MTEntries lastn="5" >
「lastn」というのは，last numberの略。
最近（Last）のエントリー数（Number）を表します。

最近7日間のエントリーだけ再帰処理を行なう

で使える代表的なアトリビュート
・lastn="" エントリー数
・category="" 指定したカテゴリーに属するエントリー
・author="" 指定した著者名に属するエントリー
・days="" 指定した日にち分の投稿
・recently_commented_on="" 指定した数の，最近コメントが付いたエントリー
・sort_by="" 指定した，エントリー作成日以外のフィールド名でソートする

今日もいつも通り情報収集をしていると2回も同じサイトにでくわした。
そのサイトは書類の無料テンプレート集。
無料会員登録をすれば、5000種類のビジネス文書のテンプレートが無料で使用できるらしい。

前回、領収書のテンプレートを記事としてのでたが今回はこの無料テンプレートもメモしておこう。
この手のテンプレートってあると作業時間がかなり短縮できる。

毎回毎回レイアウトを作るのも面白いが、そろそろ作業効率の事を考えてテンプレートを作り始めよう。まずはスタンダードな2カラムレイアウトから！
metaタグから〜

< title >title< /title >
< meta http-equiv="Content-Style-Type" content="text/css" >
< meta http-equiv="Content-Script-Type" content="text/javascript" / >
< meta name="description" content="description" / >
< meta name="keywords" content="keywords" / >
< meta name="robots" content="all" / >
< meta name="revisit-after" content="7 days" / >
< meta http-equiv="Pragma" content="no-cache" / >
< meta http-equiv="Cache-Control" content="no-cache" / >
< meta http-equiv="imagetoolbar" content="no" / >
< link rel="stylesheet" type="text/css" href="" media="screen" >
< link rel="stylesheet" type="text/css" href="" media="print" >
< script type="text/javascript" language="javascript" src="" >< /script >