« DESIGN | メイン | 雑記・未分類 »

2007年10月03日

FLASHを極めるvol.1「シンボルとインスタンス」

Flashは今後絶対的に必要になってくるスキルだなと最近実感しまして、本格的にやってみたいと思うようになりました。そこで一から徹底的に学んで、毎日覚えた事を少しづつアウトプットしていきたいと思います。

FLASH

今回は「シンボルとインスタンスの違い」について。


続きを読む "FLASHを極めるvol.1「シンボルとインスタンス」"

2007年10月01日

WordPress忘備録vol03「googleサイトマップに対応させる」

Googleにインデックスされやすくするため、Sitemapsを利用することにしました。と言う事でXMLのサイトマップを制作しなければいけませんが、WordPressは標準でサイトマップを生成してくれないので今回はサイトマップを簡単に生成してくれるプラグイン「Google Sitemap Generator for WordPress v2 Final」を導入してサイトマップを作ってみました。


プラグイン自体は日本語をサポートしてくれていますが、本体配布は英語サイトなだけに若干インストールと設定に手間取りましたがなんとかインストールする事ができました。

続きを読む "WordPress忘備録vol03「googleサイトマップに対応させる」"

2007年09月28日

WordPress忘備録vol02「記事にトピック画像をつける」

現在運営している「int」はWordPressで作っていますが、毎回施したカスタマイズや施策をメモ代わりに記していきたいと思っています。今回は記事にトピック画像をつけると言うカスタマイズです。これによりこの記事に何が書かれているのか直感的に分かるようにしていきたいです。

この機能の実装には「Multi-Topic Icon」というプラグインを使いました。

続きを読む "WordPress忘備録vol02「記事にトピック画像をつける」"

2007年09月26日

WordPress忘備録vol01「レーティング(評価)機能追加」

現在運営している「int」はWordPressで作っていますが、毎回施したカスタマイズや施策をメモ代わりに記していきたいと思っています。今回は記事にレーティング(評価)機能を付けると言うカスタマイズです。

この機能の実装には「WP-PostRatings」というプラグインを使っています。

詳しくは以下

続きを読む "WordPress忘備録vol01「レーティング(評価)機能追加」"

2007年08月06日

クリエイターポータルサイト「ロフトワーク」

intを運営していくためにどうすれば良いのか?まずは何より存在知ってもらう事が大切だと当たりまえですが考えていました、そんな中たまたま見つけたのがクリエイターポータルサイト「ロフトワーク」機能としては自身の作品とともにプロフィールや作品を登録できたり、デザイナー同士のコミュニティに参加できたりします。

loftworks.jpg

少しでも窓口を広げるために、これはとりあえず登録しておくべきと思いました。ただ登録するだけではもったいないので、登録しながら機能や特徴等を簡単にまとめて紹介したいと思います。

詳しくは以下

続きを読む "クリエイターポータルサイト「ロフトワーク」"

2007年08月01日

Flickr仕様と活用法のおさらい

先日「MovabletypeにFlickrの画像を表示させる方法」で書いたように、サイドバーにFlickrを表示させる事に成功しました。大きい写真をブログやページに使うと転送料的にも容量的にも厳しくなってしまいますので、大きい写真や写真で見せる的なコンテンツ等はFlickrを利用していこうかなと考えています。

ただ外部サービスなので色々と規約や制限が設けられているみたいです。そこで今回はFlickrの仕様と活用法のおさらいをしてみたいと思います。有料版と無料版の違いから、ナビゲ−ションのおさらいまでメモ代わりに記していきます。

詳しくは以下

続きを読む "Flickr仕様と活用法のおさらい"

2007年07月31日

MovabletypeにFlickrの画像を表示させる方法

当ブログのサイドバーにすでに表示してありますが、MovabletypeにFlickrの画像を表示させる方法を紹介したいと思います。国内外いくつかのプラグインが出ているみたいで色々と方法があるようですが、今回は「FlickrPhotos」というプラグインを使って実装してみました。

すでにFlickrでIDを取得しているものとして、導入までの手順をメモ代わりに記載していきます。

詳しくは以下

続きを読む "MovabletypeにFlickrの画像を表示させる方法"

2007年07月26日

Movabletypeでトップページを分割する

通常Movabletypeではトップページには最新のエントリー何件分しか表示されず、過去の記事を参照するには月別アーカイブかカテゴリーアーカイブから潜っていかなければなりません。そうなるとちょっと前に投稿された記事を見たい時とかユーザーにとってはワンアクションロスさせてしまいます。そこでトップページを分割してトップから過去記事へのアクセスを可能にする方法が今回記す「トップページの分割」です。

この方法は動的なページを生成して表示させますのでmovabletypeのPHP化が必須となります。PHP化については「MovableTypeをPHP化する。」をご覧下さい。またページ分割はPHP4.1以下では正常に動作しないようです。サーバー側の環境を確認してください。

詳しくは以下

続きを読む "Movabletypeでトップページを分割する"

2007年07月23日

MovableTypeをPHP化する。

一つ一つの更新頻度は低いとは言えplug-intは同一サーバーで3つのブログを動かしているため、将来的の事を考えると、できる限り再構築時やディスクスペース圧迫による負荷は減らす事を考えなければいけませんでした。そこで考えた結果、最低限のMovableType側の対策として、とりあえずはMovableTypeをPHP化しようという事になりました。

今回はMovableTypeをPHP化についてとその方法をメモ代わりに記しておきます。

詳しくは以下

続きを読む "MovableTypeをPHP化する。"

2007年07月06日

HTMLでFLASHをフルスクリーンで表示する。

フルスクリーンでFLASHを表示させたくて方々調べ回っていましたのでかHTMLでFLASHをフルスクリーンにする方法をメモ変わりに記しておきます。

■Flash Player9.0.28.0から標準搭載されたフルスクリーン機能を使ってHTMLでフルスクリーンを実現する方法。

HTML側のソース

<object data="main.swf" 
width="250" height="150"
 type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true" />
<param name="movie" value="main.swf" />
</object>

Flash側のアクションスクリプト
btn.onRelease = function() {
    Stage["displayState"] = "fullScreen";
};

Flash 6 書き出しでも ActionScript 1.0でも再生するFlash Player9.0.28.0以上であれば動作可能見たいです。また元に戻したい時はFlash側を
Stage["displayState"] = "normal";

に書き直せば標準サイズで表示されます。

単純にFlashをフルスクリーン化したい場合は、1フレーム目のフレームアクションに記述すれば、ムービーが原寸大のまま中央で表示されます。ステージ外のオブジェクトが表示されるので注意が必要です。ムービーを画面サイズに合わせて拡大縮小させたい場合は2行目はいりません。

fscommand( "fullscreen", "true" );
fscommand( "allowscale", "false" );

参考にしたサイトやブログ
コードを淡々と記録するよ
growegg/blog/: flashでフルスクリーン
HTMLで Flashを フルスクリーン表示 - yoshiweb.NET


2007年07月05日

CSSで画面の中央に配置する。

Flashを上下左右、どんなWindow幅の時にでも必ず画面の中央に配置したくて調べてみました。今回はそれをCSSで実現する方法を紹介したいと思います。

まずXHTMLは下記のようになります。

<div id="main"> <embed src="test.swf" width="760" height="340"></embed> </div>

ここは特にFLASHである必要は無く表示したい要素を入れこんでください。

CSSを以下のように記述します。ここで気をつけて欲しいのがmarginの値です。中央に表示したい幅と高さそれぞれの半分の値をネガティブマージンで指定します。これはposition:absolute;とtop:50%;とleft:50%;を使ってmainボックスの基点が画面中央になっているので、このままでは要素の左角が中央に来てしまうためネガティブマージンで調整します。

#main { position:absolute; width:760px; height:340px; left: 50%; top: 50%; margin-left: -380px; margin-top: -170px; }

入れこみたい要素が画像で無い場合は

overflow:auto;

を指定すると内容が多くなった場合でも崩れる事が無くなりますので安心ですが、要素が画像やFLASHの場合は入れてしまうとIE6.0等ではスライドバーが出てしまう恐れがありますので入れない方が無難です。

■参考サイト
画面中央に配置する 〜CSSテクニック〜
Lucky bag::blog: 要素を常に画面の中央に配置

2007年07月02日

Movable Type を始める前に設定しておきたい 10 の項目

Movable Typeは標準でもある程度運営できるようになっていますが、使ってから気がつく不便利が多々あります。例えば、標準のまま使うとすぐディレクトリィのルートフォルダが大変な事になったり、細かい設定していないがために機能を生かしきれていなかったりします。

せっかく様々なカスタマイズができるので、サイトを運営始める前にしっかりと準備しておきましょう。

詳しくは以下

続きを読む "Movable Type を始める前に設定しておきたい 10 の項目"

HTMLの文書型(DOCTYPE)宣言について

DOCTYPE宣言とは、そのページがどのバージョンのHTMLで、どの仕様に従って作られているかのを、ブラウザに伝えるためのものです。ページの規格を表すものとなり、その文書の記述が基準に適合したものである事を示すものです(ウールマークやJISマークみたいなもの)。

W3Cは、「全てのHTML文書は文書型宣言を行なうべきである」との声明をだしていますが強制ではなく、DOCTYPE宣言を入れるか入れないかは、個人の自由となっています。文書型宣言をしなくても、多くの場合、問題は生じません。

より正しく書かれたHTML文書の方が、不正な文書よりも、検索エンジンにより高く評価され、検索エンジンで上位に位置づけられる事もあり得るようなので、DOCTYPE宣言を入れておいた方がメリットが大きいとおもわれます。

W3CとはWWWで利用される技術の標準化をすすめる団体。WWW技術に関わりの深い企業、大学・研究所、個人などが集まって、1994年10月に発足した。

W3C

詳しくは以下

続きを読む "HTMLの文書型(DOCTYPE)宣言について"

Movabletypeでファイル形式に応じてアップロード先を自動振り分けしてくれるプラグイン

Movable Typeのファイルをアップロードは標準ではインストールフォルダのルートにファイルがアップロードされてしまいます。これではファイル管理がしずらく、長く運営していって写真が増えてくるとルートフォルダの中は雑然としてしまいます。

これを防ぐにはアップロード・パスを設定 (オプション)でアップロード先を選択すれば良いのですが、選択し忘れてしまったり、面倒だったりして、頻繁に写真を使う方には非常に不便利です。そこで今回紹介するのは、ファイル形式に応じてアップロード先を自動振り分けしてくれるMovabletypeプラグイン「UploadDir Plugin」です。

詳しくは以下

続きを読む "Movabletypeでファイル形式に応じてアップロード先を自動振り分けしてくれるプラグイン"

2007年06月30日

Movabletypeで関連記事を自動表示する。

テクノラティプロフィール

記事の投稿や編集が簡単なブログですがその一方で、記事が多くなればなるほど埋もれた記事にアクセスしてもらう確率が減ってきますし、ブログの中から必要な情報を探し出す事が困難になってきます。そこでエントリーに関連する記事をタグベースで関連づけして自動的に表示するMovabletypeプラグインを紹介します。

今回紹介する「TagSupplementals Plugin」をはタグによって関連記事を判別しますのでMovabletype3.3以降かタグ機能を付加したMovabletypeが必要となります。

詳しくは以下

続きを読む "Movabletypeで関連記事を自動表示する。"

GoogleMapsをページに埋め込む方法

Google Mapsは商用、非営利を問わず無料で利用できる地図サービスです。さらにAPIが公開されてい、自分のサイトに埋め込んだり他のサービスとの連携が可能です。

googlemapsを埋め込む方法
photo by retro traveler クリエイティブ・コモンズ 表示 - 非営利 2.5

非常に便利で使い勝手が良い地図ツールGoogle Mapsですが、今回はGoogle Maps APIを用いてページにgooglemapを埋め込む方法を紹介します。

詳しくは以下

続きを読む "GoogleMapsをページに埋め込む方法"