ホームページ作成の裏技!

携帯写真日記をつくってみよう! の巻

携帯写真日記(Maily)

私がMailyを公開してから 早いものでもう2年以上経過します。
その間 いろいろバージョンアップもしてきたのですが まぁPHPの設定的に設置できるサーバーが 非常に制限されていて 折角ダウンロードしてくださっても 設置できない事例が数多く寄せられました。「使ってます」っていうメッセージよりも「使えません」っていうメッセージの方が 多く寄せられてかなり凹みました(^^;)。
スクリプトが悪いみたいに思われることも多々あって・・・。PHPは 非常に馴染みやすい言語ですがWEBサーバーのモジュールとして動作するため どうしてもサーバーの設定に左右されることが避けられなくて もどかしい思いをしていました。
そんな中 サーバーのシステムに組み込みというアイデアが出てきまして 現在 ホムペネット と CMSMade に組み込まれているわけなんですが この辺で ちょっとMailyの宣伝をかねて(^^;)簡単に作れることを アピールしたいと思います。

ちょっと技術的な話

前もって書いておきますが この項目は興味のある人だけ読んでくれればいいです。作り方を知りたい方は すっ飛ばしてください。

基本的にMailyは メール送信で記事追加するタイプのスクリプトです。PHPスクリプトでは メールサーバーの設定を必要とします。スクリプトを表示するたびに メールサーバーに問い合わせをして メールを受信し 記事として加工するという流れになっています。設置を簡単にするために 自動で設定ファイル等を作成するようにしてあるのですが それがファイル所有者のパーミッション関係で 作成できない場合があるのです。セキュリティの面では ファイルが自動的に作成できないからといってサーバーの設定が悪いとも一概には言い切れません。

ホムペネットでは これらのことを全て解決することができました。
PHPのセーフモードが有効になっているため 他のユーザーのデータを見ることは基本的にできません。一部の共有サーバーでは他のユーザーのデータや 下手するとシステムファイルまでアクセスできることがあって びっくりしたりしますが(^^;) セーフモードが有効になっている場合はそのようなことはできません。
また 通常のスクリプト版Mailyとは違い メールサーバーに対して問い合わせをしないため 処理が高速に行えます。メールサーバーを介さないというのは 思った以上に高速です。スクリプトでは メールサーバーに問い合わせをしなければ メールの有無が判断できないのですが サーバーシステムに組み込んでいるためメールサーバーを介さなくてもメールの有無を確認できるのです。あれば取り込むという処理なので高速です。受信とほぼ同時に記事を追加できます。
しかも設置は 受信専用メールアドレスを作成して そのメールアドレスを設定するだけというお手軽さ♪自分で言うのもなんですが 結構使いやすいんでないのと思います。

では作り方の説明を始めましょう〜。

シンプルバージョン

シンプルバージョンは本当に簡単です。自分(もしくは限定した人間)のみが 記事更新を行うのでコンテンツエディタを使用します。コンテンツエディタは 通常のHTMLタグ内に <whiledata src='cnt' putmax='*'>〜</whiledata>というタグ内に cont='XXXX' という記述と $cnt_xxxx という変数を記述するだけで 実装できました。(※この辺の詳細は「お知らせ機能」とか「リンク集」とかあたりの説明を読んで下さい。)

基本的に新しいページを作るときのコツとして まず記事を表示したいレイアウトを「ひとつ分だけ」完璧に作ることです。ホームページビルダーなどの簡単ソフトをお使いの方でも 表示したい形式を作ることはできますよね。具体的なイメージを固めるために 見出しや内容・画像などを実際に記述してみてHTMLを作ります。記事の表示形式がひとつ出来上がったら 後はそれをページに表示したい件数分繰り返すだけです。まずは 具体的なひとつの記事の表示の形を決めること。その後 コンテンツの機能を追記するのが 一番早くて分かりやすい作成手順です。

例えば 日記のページを以下のように作成します。HTMLエディタでプレビューしながら自分の好きな形で作成してください。
<h4>沖縄へ旅行に行って来ます!</h4><p class='date'>2007/01/09(Tue)<br>&nbsp;12:00</p><img src='thunail.jpg' onclick='window.open("okinawaimage.jpg","_blank");'><p class='data'>今日から2泊3日で沖縄へ行って来ます!ちゅら海水族館へ行く予定です。ジンベイザメが飛んでる所がみられる♪楽しみです(^o^)。リアルタイムで旅行記を更新しますのでお楽しみに!</p>
ここまでできたら コンテンツの変数に置き換えていきます。
<h4>$cnt_text0</h4><p class='date'>$cnt_year.$cnt_month.$cnt_day($cnt_week)<br>$cnt_hour:$cnt_min</p><img src='$cnt_thimg0' onclick='window.open("$cnt_image0","_blank");'><p class='data'>$cnt_body0</p>
次に入力できるようにするため 各変数が何の値を示すか cont属性を記述していきます。
<h4 cont='タイトル'>$cnt_text0</h4><p class='date' cont='日付'>$cnt_year.$cnt_month.$cnt_day($cnt_week)<br>$cnt_hour:$cnt_min</p><img cont='写真画像' src='$cnt_thimg0' onclick='window.open("$cnt_image0","_blank");'><p class='data' cont='コメント'>$cnt_body0</p>
このままでもいいんですが 画像なしの記事もあるでしょう。その時にを表示させないために 次の記述を追加します。
<if $cnt_image0>  ←ココ<br>&nbsp;&nbsp;<img cont='写真画像' src='$cnt_thimg0' onclick='window.open("$cnt_image0","_blank");'></if>  ←ココ
あとはこの部分を 何個ページ上に出すかを記述するだけです。(以下の例は10個)
<whiledata src='cnt' putmax='10'>  ←ココ<br><h4 cont='タイトル'>$cnt_text0</h4>〜中略〜<br><p class='data' cont='コメント'>$cnt_body0</p></whiledata>  ←ココ
こうすれば どこに どのデータを表示すべきかが見えてきますので 置き換えも簡単です。必要なところを肉付けしていくようなイメージですね。

次は 作成したHTMLをホムペサーバーにアップし アクセスします。そうすると ホムペネットへのログイン画面が表示されます。ここで Mailyの設定をするわけです。新規でページを作成した場合は 必ず初期の設定画面にて必要項目を設定する必要があります。
いろいろ項目があってややこしいでしょうが この設定画面の「携帯からの投稿機能を有効にする」にチェックをつけ 表示された以下の部分を入力します。
メールアドレス
記事メール受信専用のメールアドレス。受信専用のメールアドレスを作成してからここに設定してください。受信専用にしないと このメールアドレスに送信された全てのメールが記事として掲載されてしまいます。
携帯画像表示機能
携帯での閲覧時は 初期値では画像ファイルへのリンクが出力されます。これはパケット代節約のためで 最初から画像を表示させたい場合にはチェックを付けてください。
投稿用メールアドレス
ここに指定したメールアドレスから送信されたメールだけを記事として掲載します。それ以外の受信メールは全て破棄されます。投稿者を限定したい場合だけ入力してください。また携帯のメールアドレスを変更した場合は この設定値も変更する必要があります。
基本的にはこれだけです。携帯から受信専用アドレスに写メールを送って ページを更新すれば記事が追加できています。
今回のソースは 次のリンクをクリックしてご確認ください。 
index.html ソース全文




NetMall
宿NetMall
宿帳くん
Powered by Homepe.net