天気予報を表示するブログパーツ的なモノ

天気予報を表示するブログパーツ

天気予報を表示させるブログパーツはいくつかありますが、有料だったりフラッシュだったりとちょっと扱いにくいモノが多かった気がします。てなわけで、完全無料でテキストでの表示と画像の表示を切り分けできる柔軟な天気予報のブログパーツ的なモノを作ってみました。

特徴

  • テキストと画像なので思うがままにレイアウト(または装飾)できます
  • 画像が気に入らなければテキストに切り替えられます
  • 画像を好みの画像に切り替えられます
  • 天気予報の情報をいくつ出すか決められます(今日だけ、明日と明後日だけ等)
  • 仕組みが単純なため携帯電話用のWebサイトにも組み込めます

PHPで作成しているのでCMS(WP使いなのでWPでの利用を想定)が動く環境なら大丈夫と思います。Yahoo!やグーのブログはちょっと厳しいかも?

動作条件

ifreamタグで表示、本体はPHP。動作条件はPHP5.0以上インストールされているサーバーかなぁ。PHPを勉強し始めたばかりなのでよくわかりませんです。

謝辞

アイコンはタグボート(http://www.dspt.net/tools/emoji/)様からお借りしました。ありがとうございます。

見本

プログラムのダウンロードはしばしお待ちを、もうちょっとプログラムにバグがないか確認してから公開します。

twitterのつぶやきをブログに組み込むための方法

Twitterのウィジェットを Movable Type に貼り付けるチュートリアル」で方法が詳細に記述されています。

僕も導入してみてー

リスト項目ごとに背景色を変えるスクリプト

ムーバブルタイプで、リストを作りますよ  ってのは結構簡単な話。

リスト項目を読みやすくするために、偶数行目と奇数行目で背景色を変えたりボタンをつけたりするのはプログラム的でなかなかわかりづらい気がします。ネットで調べていると、偶数と奇数を判断できるモディファイがあったので、それを活用して実現してみました。

ソースは次のような感じで書くと幸せになれるみたいです。黄色い部分が判定の箇所ですよ。

<MTEntries>
<MTEntriesHeader>
<p class="blogbnr">
<img src="<mt:BlogUrl />img/title-msg.gif" alt="" width="" height="" /></p>
<ul id="blog">
</MTEntriesHeader>
<MTEntryCategories>
<li class="<MTIf name="__odd__">top<MTElse>under</MTIf>">
<h2><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></h2></li>
</MTEntryCategories>
<MTEntriesFooter>
</ul>
</MTEntriesFooter>
</MTEntries>

たぶん、これって他にも応用効かせられるよね?

litebox2.0の導入方法

サムネイルをクリックするとWebページに写真が重ね合わせて表示されるWebサイトをちまたでよく見かけませんか?それって、Javascriptのライブラリ「Litebox」なるものを使っているみたいです。僕もちょっとチャレンジしてみようかなぁなんて思ったりしてみます。

導入方法

1.ダウンロード

litebox2.0の公式Webサイトにアクセスします。
http://www.huddletogether.com/projects/lightbox2/

んで、次のスクリーンショットの通りにダウンロードしてみます

 

09072201.gif

2.アップロード

 

ダウンロードが完了すると「lightbox2.04.zip」というファイルが出現します。解凍するといくつかのファイルとフォルダがでてくるので、赤い線で囲っているフォルダだけをサーバーにアップロードします。

09072202.gif

3.headタグ内にスクリプトタグを挿入

headタグ内に次の四行を足してください。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

4.拡大したい写真と関連付ける

(そのまま事例を使いますが。。。)次の様に記述します。

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

<a href="images/image-1.jpg" rel="lightbox"> 拡大用の写真へのリンク rel属性にlightbox

<img src="images/thumb-1.jpg" width="100" height="40" alt="" />  サムネイルの画像

これで完成!

googlefriendcontactの導入方法

logo.gif

Googleさん画像頂きました!

さてさて、先日から書きたかったGoogleフレンドコンタクトの導入方法をメモしておきます。

Googleフレンドコンタクトとは?

「Googleがはき出すスクリプトをWebサイトに貼り付ければ、mixiのような機能を自分のホームページに付加できる」これが簡単な概要です。少し詳しい話になりますが、ログイン機能やイベント機能、コメント機能などがそれぞれ独立しているので、目的にあった機能を選び、欲しい機能だけ自分のホームページに組み込むことができます。

先ほどの記事にも書きましたが、活用の仕方によってはメールフォームを使うより遙かに効果的な場面が出てきます。

Googleフレンドコンタクトの導入

まず、http://www.google.com/friendconnect/admin/にアクセスする。ログイン画面が出てくるのでログインする。すると次のようなページが出てくる。文字を読めば簡単に導入できるように配慮されています。

09072101.gif

同意するとWebサイトに貼り付けるのかブログ「bloger」に貼り付けるのか効いてきます。

なお、ライブドアブログなどFTPや特定のファイルを設置できるブログも既存のウェブサイト用の?を選択してもらってもかまいませんが、Googleのブログ「bloger」の利用者さんは下のブログ用をクリックしてください。

09072102.gif

次へのボタンをクリック。

09072103.gif

設置するWebサイトの情報を入力し、次へのボタンをクリック。

09072104.gif

そうすると、アップロードするファイルが出てくるのでボタンを押してダウンロード。二つのファイルを「アップロード先」で指示された先にアップします。

09072105.gif

設置をテストする画面が出てくるので、ボタンを押してきちんと設置されているか確認してください。

09072106.gif

次にメンバーガジェットのコードを取得の画面が出てきますから、このコードを取得します。メンバーガジェットにはログイン機能、プロフィール機能、他のメンバーの表示機能が入っています。

09072107.gif

自分の好みの設定を行った後に、「コードを生成」のボタンを押してスクリプトを取得します。メモ帳に貼り付けておいてください。

09072108.gif

メンバーガジェットだけでは、SNS機能を十分に使っているとはいえないし、おもしろくないので他にもガジェットを追加するため、さらにコードを取得します。「ソーシャルガジェット」のリンクをクリックすると、注目のガジェットが閲覧できます。欲しい機能からガチェットをチョイスしてコードを同様の手順で取得してください。

09072109.gif

取得したメンバーガジェットとその他のガジェットのコードをWebページに貼り付けます。

これだけで、自分のホームページをSNS化することができました。めでたしめでたし。

09072110.gif

xoopsテーマ素材配布 個人利用・商用利用自由

さて、新しくXOOPSテーマを作成しました。

今回は、ワードプレスの公式サイトで配布されているGPLのモノをXOOPS用に簡易に変更させていただきました。簡易といってもちょっと手間取りましたが。。。。

んで、もともとがGPLなのでしょう利用も可能です。

下の画像をクリックするとダウンロードが始まります。

090720.jpg

特徴

  • 商用利用フリー
  • 一応、XHTML+CSSで構築(一部、テーブルレイアウト)
  • 3カラム、2カラムに自在に切り替えられます
  • ナビゲーションメニューを追加。不要な方はUl要素をざっくり消してください。
  • ヘッダーの画像は title_モジュールのフォルダ名.jpg  幅1300px高さ160px以下 をimgges/headerフォルダに入れてくれれば、自動的にチェンジします。画像が不要な方は、ストリップタグごと全部削除してください。
    なお、画像はロイヤリティーフリー&GPLのものを利用していますのでそのままご利用いただけます。

動作確認はfirefoxとie8.0とoperaで確認しています。もしかしたらie6.0だと不具合があるかもしれませんが、ご勘弁してくださいませ。

デザイナーさん向けにCSSを修正するための「theme-csscheak.htm」を同封しています。このスタイルかえたらどうなるんだろう なぁーと疑問に思ったときは「theme-csscheak.htm」をオーサリングソフトで開いて、CSSを修正してみてください。たぶんテーマファイ ルしかないよか修正は早くてすむはずです。

特徴ではありませんが、現在進行形で開発を進めているのでCSSなどの修正はお受けします。

ご連絡くださいませ。

GoogleFriendContactを導入してみた。

GoogleがSNSサービス機能を提供し始めました。

Google Japan Blog: Google Friend Connect でソーシャル化

早速、僕のブログにも導入してみました。右端のサイドメニューに「GoogleFriendContact」って表示がありますよね。そいつです。このサービスの簡単な使い方は、後ほどメモすることにしておいて、このサービスをどのように活かすことができるのかを考えてみたいと思いますよ。

イベントの告知&申し込みツールとして

顧客に対して、定期的にセミナー(お茶の勉強会)なんかを開催しているとお店は、「event」ガジェットがオススメですね。ホームページにログインガジェットとeventガジェットを組み込めば、あっという間にイベント申し込みのコンテンツができちゃう!よくあるメールフォームと比べて「Join site to RSVP」ってなボタンを押せば、そのイベントに参加申し込みできるわけですから簡単ですし、何人参加しているのかわかるってのも良いですね。人気のあるセミナーなのかどうかよくわかります。(それだけでは判断できませんが)たくさん参加しているセミナーだと安心感がありますよね。

あと、Googleカレンダーとの連携もワンボタンで超便利。

採用試験から入社までのコミュニティとして

mixiのコミュニティを自社ホームページでできるよう置き換えただけの利用方法です。mixiでよくありますが、特定の企業の採用に関するコミュニティってあるじゃないですか。それを自社ホームページで再現できるなぁと思いました。大手企業だと専用のコミュニティサイトがあるみたいですが、ログインガジェットと他の機能を使えば再現できますよね。

もし、見られたくない内容があるならば、htaccess設置して簡易ログイン機能つければいいですし。これからは中小企業でも学生とのコミュニティを作ることができるようになったのだー。ってもうこんなサービスあるのかな?

お客様の声をひたすら集めるツールとして

お客様の声をひたすら集めたい場合は、「コメント」ガジェットがオススメ。ログインガジェットとコメントガジェットを組み込めば簡単にお客様の声を収集できます。メールフォームで「お客様の声」を送ってくれって書いても誰も相手にしてくれませんが、ガジェットを使うとamazonや楽天のレビューのように簡単にかけるので書いてくれる可能性が高まります。入力してもいいかなと思えるわけですよね。

ただし、注意しておかなくちゃならないのは、悪いコメントがつく可能性も覚悟しなきゃいけません。悪いコメント残されてへこむくらいなら使わない。

 

と、いろいろ書いてみたものの、SNS機能を本格的に自分のビジネスに取り込んでいる企業ってあんまりないんだよね。mixiさんとかgogogsさんとかみていても、イマイチ広告収益モデルから脱出できていないなぁなんて思ってみたり。広告収益モデルから脱出する必要もないんだけどね。別の方法考えるのもおもしろいんじゃないかなぁなんて思ったりしましたよ。

SNS機能の本質は、Googleの担当者(及川卓也 さん)が書いているように

多くの人がウェブ上でのつながりを求めています。Google Friend Connect はそのようなソーシャル機能を簡単にウェブサイトに追加できるサービスです。

だと思います。「つながり」なんでしょうね。これはどんなビジネスにも必要なことでしょう。Webはその「つながり」を実現できる数少ないツールの一つです。できるだけ早くこういったことに気づいてくれると良いんですけどねぇ。特に地方はトホホ。。。

海外のテーマを日本語化したモノは誰のモノ?

海外のテーマがGPLで配布していたならば、海外のテーマを日本語化しても日本語化した部分には著作権があるかもしれないけれども、そのほかの大部分のソースコードは海外のGPLなんじゃないの?

どうなんだ?海外からテーマの著作権買い取ったとも思えないし。。。

http://www.wordpresstheme.jp/

WORDPRESSで画像ファイルをアップロードできない場合の対応策

ワードプレスでたまに画像ファイルをアップロードできない場合が出てきます。

そんなときは、まずftpファイル転送ソフトでワードプレスのインストールフォルダにアクセスしてください。

んで、/wp-contentをダブルクリック

09071003.jpg

/wp-contentの中に画像ファイルをアップロードするフォルダを作成し、パーミッションを755か705に変更する

09071004.jpg

09071005.jpg

ワードプレスのダッシュボード(管理画面)の「設定」 > 「その他の設定」をクリックし、

「アップロードするファイルの保存場所」を先ほど作ったフォルダに書き換えて、「変更を保存」ボタンを押せば完了!

09071006.jpg