Weblogy » Tips

同一URLのままでスプラッシュページを作る

dacelo — Tue, 26 Apr 2011 00:51:36 +0000

「最初の訪問時だけ、トップページでフラッシュ・ムービーが流れる」というようなページを手軽に作る方法です。

【スプラッシュページという手法】

Web制作には、「スプラッシュページ」という手法があります。これは実際のトップページの前に配置する、フラッシュなどを使用したリッチな扉ページのことです。大抵は、そのサイトのイメージを演出するフラッシュムービーが流れ、ムービーが終わるかスキップボタンを押すかすると、サイトの本体に移動するような仕組みになっています。

古くからある手法ですが、Web業界では賛否両論で、特にユーザビリティの観点からは「全く意味のないページ」として批判されることも多い手法です。

しかし、業務としてWeb制作をしていると、「スプラッシュページが欲しい」という要望があるのもまた事実です。
期間限定のキャンペーンサイトや、アパレルブランドのサイトなど、イメージ演出に対するニーズが高い場合が考えられますね。

【トップページのURLが変わってしまう】

そこで、普通に作るとこうなります。

index.htmlをスプラッシュページにする→top.htmlに移動

しかしこれだと、サイト内のトップページへのリンクを全てtop.htmlにしなくてはなりませんし、”/”で接続すると毎回フラッシュが流れ始めてしまいます。

【index.htmlのまま、スプラッシュと通常ページを切り替えたい】

同じURLのまま、スプラッシュページを管理することが出来れば、リンクもキレイに決まりますし、運用していくうちにスプラッシュページを廃止することも容易です。
ただし、毎回トップページに戻るたびにスプラッシュページにならないようにします。

そこで、phpとmod_rewriteを使用して、訪問者の状態に応じて、表示させる内容を変更する簡易プログラムを作成いたしました。

■サンプルページ

外部サイトからの移動、直接アクセスなどで、１回目の訪問時にはフラッシュが表示され、それ以降、サイト内の遷移では通常のトップページが表示されます。

■必要なファイル群

index.php …リファラーを元にアクセスを振り分けます。
index.html …通常のトップページです。
splash.html …スプラッシュページです。
.htaccess …mod_rewriteでindex.phpを常にインデックスとして振るまわせます。

■コードの解説

『index.php』
ホスト名、インデックスページ、スプラッシュページの3つは、設置する場所によって書き換えてください。

『.htaccess』

DirectoryIndex index.php
Options -Indexes
#↑index.phpがインデックスになるようにし、念のためにファイルの自動インデックスを不可にします。
 
RewriteEngine On
#RewriteCond %{REQUEST_URI} ^/$
#RewriteRule ^(.*)$ /index.php
RewriteCond %{REQUEST_URI} ^/index\.html$
RewriteRule ^(.*)$ /index.php [L]
#↑mod_rewriteを使用して、"index.html"、"/"へのリクエストをindex.phpに振り向けます。

これで、最初の訪問時だけフラッシュムービーを流れるページを作ることが出来ます。
（スプラッシュページという手法の是非はともかくとして）

■動作環境

php、mod_rewrite、htaccessが実行可能なサーバー環境

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Poderosaで保存されるホストのリストを増やす

Thu, 06 Jan 2011 05:57:13 +0000

Poderosaで、接続したリストは、直近の5件が保存されます。

直近の接続情報が保存されている接続画面

でもこれって、5件だと意外と少ないんですよね。
色んなサーバに接続して作業していると、すぐに押し出されてしまいます。
押し出されたサーバがまた接続パスワードが複雑なところだったりすると面倒です。

そこでこの設定。
ツール→詳細プリファレンスエディタ
で、下の方にある
org.poderosa.usabillity.mru.limitColunt
を編集します。
デフォルトでは5になっているのを、ダブルクリックして任意の整数に書き換えます。（例えば30とか）

詳細プリファレンスエディタ

これで好きなだけ接続済みサーバが保存されますので、次からはすんなり接続できます。
パスワード無しの公開鍵接続にしておけば、クリックだけで接続できてらくちんですね。

WordPressの管理画面が真っ白になってしまったら WordPressの管理画面だけが真っ白になってしまった。サイトのトップページを普通に見てみると、普通に表示されている。 /wp-admin/ wp-login.php 管理画面にログインしようとすると、真っ白になって ...続きを読む...
Evernote 4.4 の便利な新機能。とうとうノート間リンクが！本日6月15日、Evernote4.4 Windows版が正式リリースされました。色々と機能の改善が施されて、さらに便利に使えるようになっています。１．ノート間リンク全Evernoteユーザーが「あったらいいな」と ...続きを読む...

Related posts brought to you by Yet Another Related Posts Plugin.

VMwareのUbuntu にvmware toolsをインストール

Tue, 20 Apr 2010 13:41:46 +0000

Windows上のVMwareにUbuntuをインストールしてちょっと使ってみようと思ったんですが、画面が小さい画面に固定で不便なのでvmware toolsをインストールします。
これはホストOS（Windows）上ではなく、仮想サーバの方にインストールします。

左下の「You do not have VMware Tools installed.」の部分をクリックすると、デスクトップ上にポッとCDアイコンが出現します。

ｃｄのアイコンが表示される

そしたら「端末」を開いてmedia/cdromに行ってこのCDの中にあるtar.gzアーカイブをどこかにコピーし、解凍します。
解凍したディレクトリの中に入り、vmware-install.plをsudoで実行するとインストールが始まります。
インストールする場所等を聞くダイアローグが沢山出てきますが、全てyesでも特に問題はありません。

以上です。簡単ですね。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Thunderbird エラー『これ以上メッセージを保存できません。』削除したのに…

Mon, 21 Dec 2009 11:05:29 +0000

Thunderbirdを使い続けていると、こんなメッセージが出て受信が出来なくなることがあります。

受信トレイ　フォルダが一杯で、これ以上メッセージを保存できません。メッセージを保存する領域を空けるには、古くて不要なメッセージを削除するか、フォルダを最適化してください。

まぁ読んだとおりのエラーなので、不要なメールを削除、それか「最適化」を行なえばOK、のはずなんですが…。

受信トレイから削除してもエラーがなくならない！

そもそも受信トレイにメールアイテムを起きすぎると、Inboxファイルが肥大化してしまうので、ちゃんとローカルフォルダに作ったフォルダに適宜メールアイテムを移動させていたのに…どういうこと？

削除フラグ

実は、Thunderbirdの“削除”は、メールアイテムが完全に消えるわけではなくて、削除フラグが立つだけでデータはInboxファイルの中にあるままなんですね。なので、不要メールを削除、移動して受信トレイを整理したら、
受信トレイを右クリック→最適化
で、受信トレイを最適化する必要があります。この作業によって、削除ファイルが本当に削除されて、肥大化していたInboxファイルが身の丈にあったサイズに戻る、というわけです。

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PhotoShopで作ったPNGがブラウザによって見え方が違う！ときのプラグイン

Fri, 31 Jul 2009 11:34:25 +0000

photoshopでPNG画像をWeb用に保存しようとすると、困ることがあるんですよね。

PNG形式ファイルは、ガンマ情報というのを内包していて、これがフィルターとなって画像の色合い・明るさを調整できます。しかし、Web用にこれを使うと、ブラウザによって明るさが変わってしまう。

上がFireFox3で下がIE7

これが非常に困るわけです。これを回避するには、ガンマ情報を削除して保存すればいいはずなんですが、PhotoShopではガンマ情報が削除できない。致命的。（噂ではPhotoShopCS3以降では対応できるとか？）

そこで何とかならないもんかと調べてみると、『SuperPNG』というPhotoShopプラグインを発見しました。

SuperPNG

このプラグインをインストールすると、『別名で保存』（Web用に保存ではない）を選択すると、保存形式の中に『SuperPNG』が現れます。これで保存すると、ガンマ情報のないきれいなPNGで保存できますよ、と。

phtoshopのプラグイン保存先

フォトショップのプラグイン保存先はこちらです。ここにダウンロードしたファイルの中にあるSuperPNG.8biというファイルを放り込む。以上でインストール完了です。

SuperPNGの画面

ただし、『Web用に保存』では使えないので、一枚の画像から大量のPNGパーツをスライスで一挙に切り出す、というような使い方は出来ないのは不便ですね。

WordPressの管理画面が真っ白になってしまったら WordPressの管理画面だけが真っ白になってしまった。サイトのトップページを普通に見てみると、普通に表示されている。 /wp-admin/ wp-login.php 管理画面にログインしようとすると、真っ白になって ...続きを読む...
Evernote 4.4 の便利な新機能。とうとうノート間リンクが！本日6月15日、Evernote4.4 Windows版が正式リリースされました。色々と機能の改善が施されて、さらに便利に使えるようになっています。１．ノート間リンク全Evernoteユーザーが「あったらいいな」と ...続きを読む...

Related posts brought to you by Yet Another Related Posts Plugin.

テーブルコーディングのコンテンツ部分の抜き出し

Wed, 21 Jan 2009 05:20:17 +0000

テーブルレイアウトの古いHTMLサイトのコンテンツ部分を抜き出して、CSSレイアウトのサイトやCMSに流し込んだりするとき、困るのがテーブルタグの取り扱いです。

全体のレイアウトがテーブルだけならまだいいんですが、ひどいサイトになると、本文の中の段落がまた一つのテーブルで区切られていたりして、大変なことになっています。

こういう場合に、テーブルタグを消して文章（

やは含めて）を抜き出す方法を考えました。

といっても単に置換するだけなんですが、ｌ秀丸等の正規表現による置換ができるテキストエディターで、

<(/*)t(.*?)>

を消去置換してみてください。

マッチした部分をハイライト表示させたところ

といったテーブル開始タグから、など、テーブル関連の開始タグ、終了タグを全て消すことが出来ます。
まず、大まかなコンテンツ部分はどうにかして抜き出してからやるといいでしょう。（抜き出せなくてもそれなりに役に立つと思います）
Related posts:
公開鍵ファイルauthorized_keysの設置場所とパーミッション Linuxで鍵を作成するには、ssh-keygenコマンドを使用します。で、出来た鍵を置く際のパーミッションで、よくハマる箇所があるのでメモ書き。ファイル場所パーミッションユーザールート /user 701 S ...続きを読む...
WordPressのテーマ『Twenty Ten』でアドセンスに不思議な背景色が… WordPressの3.1系デフォルトテーマ、『Twenty Ten』で、Adsenseを配置してみると、広告が表示される前の一瞬、不思議な薄い黄色（#ffc）の背景色が表示されます。広告が呼び出されれば見えなくなるん ...続きを読む...
Evernote 4.4 の便利な新機能。とうとうノート間リンクが！本日6月15日、Evernote4.4 Windows版が正式リリースされました。色々と機能の改善が施されて、さらに便利に使えるようになっています。１．ノート間リンク全Evernoteユーザーが「あったらいいな」と ...続きを読む...
Related posts brought to you by Yet Another Related Posts Plugin.

Thunderbirdのデフォルト設定をHTMLからテキストに

Tue, 04 Nov 2008 07:31:40 +0000

メールの形式には、テキスト形式とHTML形式があります。

で、Thunderbirdの送信メールの形式は、
「ツール → オプション → 一般」の右下「送信テキスト形式」で変更できるんですが、これは送信先がHTMLメールを受け取れない（と思われる）場合にどうするかの設定です。

作成メールは、デフォルトではHTML形式になっています。ビジネスシーンではデフォルトがテキスト形式だろう、ということで、返信時のメールをテキスト形式指定にする設定です。

ツール→アカウント設定

アカウント設定で、それぞれのメールアカウントで設定します。

編集とアドレス入力

「編集とアドレス入力」で、

　□ HTML形式でメッセージを編集する（C）

のチェックを外します。

以上です。

Related posts:
WordPressの管理画面が真っ白になってしまったら WordPressの管理画面だけが真っ白になってしまった。サイトのトップページを普通に見てみると、普通に表示されている。 /wp-admin/ wp-login.php 管理画面にログインしようとすると、真っ白になって ...続きを読む...
Evernote 4.4 の便利な新機能。とうとうノート間リンクが！本日6月15日、Evernote4.4 Windows版が正式リリースされました。色々と機能の改善が施されて、さらに便利に使えるようになっています。１．ノート間リンク全Evernoteユーザーが「あったらいいな」と ...続きを読む...

Related posts brought to you by Yet Another Related Posts Plugin.

Weblogy » Tips

同一URLのままでスプラッシュページを作る

【スプラッシュページという手法】

【トップページのURLが変わってしまう】

【index.htmlのまま、スプラッシュと通常ページを切り替えたい】

■サンプルページ

■必要なファイル群

■コードの解説

Poderosaで保存されるホストのリストを増やす

VMwareのUbuntu にvmware toolsをインストール

Thunderbird エラー『これ以上メッセージを保存できません。』 削除したのに…

削除フラグ

PhotoShopで作ったPNGがブラウザによって見え方が違う！ときのプラグイン

テーブルコーディングのコンテンツ部分の抜き出し

Thunderbirdのデフォルト設定をHTMLからテキストに

Thunderbird エラー『これ以上メッセージを保存できません。』削除したのに…