■ 前置き ■
現在、このメルマガでは、ブログシステムの1つである「WordPress」についてのお話をしています。
この、WordPressは、商用利用の目的であっても、無料で使用できます。
前回までは、このWordPressのインストール~外観の変更(テーマの変更)のお話でしたが、今回は、このWordPressのパワーアップする、あるいは、使い勝手を向上させる、プラグイン(プログラムみたいなもの)の、いくつかの紹介です。
■ プラグインを管理する画面 ■
これから、いくつか紹介するプラグインなのですが、これらは、WordPressのダッシュボードの画面の左側カラムに見える「プラグイン」というところをクリックすると、プラグインの管理画面を開くことができます。
図1

WordPressをダウンロードし、インストールを完了すると、何もしなくても、いくつかのプラグインがインストール済みになっています。
■ プラグインのインストール方法 ■
プラグインのインストールは、日常使う、パソコンにソフトをインストールするのとは異なり、手元のパソコンではなく、サーバーにインストールするので、チョット勝手が違うと感じるかもしれません。
ただ、パソコンソフトのインストールとは違い、「インストールできない」とか「エラー出てインストールが止まってしまう」といったことき全くないので、ご安心ください。
一般的な流れは、目的とするプラグインをホームページからダウンロードする
↓
ダウンロードしたファイルはzip形式の圧縮ファイルなので、アイコンを右クリック→すべて展開(T)を選択
図2

↓
下層にいろいろなファイルを含むフォルダが1つ現れるので、このフォルダごと、FTPソフトを用いて、サーバーの「wp-content」→「plugins」フォルダにアップロードする。
図3

↓
次に、ブラウザでダッシュボードにアクセスし、上でお話しましたように、プラグインの管理画面を開くと、先ほどアップロードしたプラグインが表示されている筈なので、ブラウザ上で設定・有効化する。
図4

といった感じです。
FTPソフトと聞くと、難しそうな印象を受けますが、レンタルサーバーの運用では、必須のソフトですし、日本国内では、昔から「FFFTP」という無料ソフトが、ある意味、FTPソフトのデファクトスタンダードになっています。
「FFFTP」のホームページ
http://www2.biglobe.ne.jp/~sota/ffftp.html
設定そのものも、メールの送受信の設定の全く同じなので、それ程、違和感は感じないのでは、考えています。
そんな訳で、FTPソフトを使うには、
・ホスト名(ホストのアドレス)
・ユーザー名
・パスワード
が必要になります。
図5

私の愛用しているレンタルサーバーの「Vlue Domain(バリュードメイン)」の場合は、上記の内容を含む様々なサーバーの設定情報がメールで即、送られてきます。
■ デフォルトでインストール済みのプラグイン ■
WordPressをダウンロードして、インストールすると、特に何もしなくても、いくつかのプラグインが自動的にインストールされます。
「Akismet」
コメントスパム防止用のプラグインです。
書籍、あるいは、いくつかの解説サイトでは、有効化必須のプラグインとされていますが、私の場合、有効化の手続きが面倒なのと、実際には、コメントスパムを喰らっていないので、私は有効化していません。
「Hello Dolly」
説明を読めば、誰でも分かります。
使用するかしないかは、御自分の趣味で。。。
「WP Multibyte Patch」
英語圏で開発され、利用されているWordPress。
英語は、1バイト系列の文字ですが、日本語は2バイトの文字列なので、日本語表示でトラブルを起こさないためにも、有効化は必須でしょう。
以上、3つがデフォルトでインストールされるプラグインです。
この他にも、あれば非常に便利なプラグインがあるのですが、これについては、次号にて。
。。。続く
Monthly Archives: 1月 2010
WordPressプラグイン (1)
ノートパソコンの無線LAN設定
■ 無線LAN機能内蔵のノートパソコンを無線環境に参加させる ■
前回までは、スマートフォンの1つである、、Willcom社製のWSO11SHに標準で内臓されている無線LAN機能を利用して、現在ある有線LAN環境に本機を参加させることにトライしました。
ネット接続の環境としては、以下の通りです。
インターネット
↓
Yahoo BB
↓
ルーター(Link SYS 社製)-有線ケーブル→パソコン3台
↓ 有線ケーブル
アクセスポイント(Planex 社製)
↓ 無線接続
ノートパソコン(無線LAN内蔵)
上にある無線のアクセスポイントは、家電量販店で3000円くらいで手に入れたものですが、機能としては充分です。
写真1

そして、今回は、上の音楽用として、新しく購入したノートパソコンを、このアクセスポイントに接続できるようにします。
今回のノートパソコンは、大手メーカーのものではなく、ある意図があって、ドスパラ製のBTOパソコンです。
パソコンは、購入直後の状態は、セキュリティソフトすらも入っていない、クリーンな環境で、自分なりの環境構築には非常に好都合なのですが、何故か無線接続のユーティリティはインストールされていて、起動すると、近くにある(どこかは正確には分かりませんが)、Yahoo!BBのアクセスポイントに勝手に接続してくれます。
図1

図を見て分かるように、このアクセスポイントはセキュリティの設定がされていないので、私も含めて、誰でも勝手に接続・利用可能です(笑)。
さて、ここから本題に入るのですが、今回は、上の図の一覧に表示されている、私のアクセスポイント(「PCI」と表示)に接続できるようにします。
先ずは、「コントロールパネル」の「ネットワーク接続」をクリック。
図2

↓
「ワイヤレスネットワーク接続」を右クリックして、「プロパティ」を選択
図3

↓
開いた画面の「ワイヤレスネットワーク」のタブをクリックして、「優先ネットワーク(P)」の中の「PCI(自動)」を選択し、「上へ(U)」のボタンを押します。
図4

↓
次に、「PCI(自動)」が一番上にきたら、マウスで選択後、「プロパティ(O)」のボタンを押します
図5

↓
開いた画面の「アソシエーション」のタブをクリックし、ルーターで設定した、一連のセキュリティの設定を入力します。
図6

↓
次に、「接続」のタブをクリックして、「このネットワークが範囲内にあるとき接続する(C)」にチェックを入れます。
図7

↓
OKのボタンを押して、全てのウィンドウを閉じます。
そうすると。。。
少し時間が掛かりますが(1分位)、無事、アクセスポイントに無線接続することが出来ます。
■ 「ワイヤレスネットワーク」のタブが表示されない場合 ■
たまに、というか、よくあるケースとして、上記操作手順の中での「ワイヤレスネットワーク」のタブが無い場合があります。
特に、サードパーティーの無線LANシステムを使った後ですと、このケースが多いかもしれません。
国内では、バッファロー社の「Air Station」シリーズがこれにあたります。
(独自の無線方式を使っている為)
そんな場合には。。。
「コントロールパネル」から「管理ツール」→「サービス」を開きます。
図8

そうして、訳の分からない英語が羅列された画面になりますが、その下の方に、「Wireless Zero Configration」という項目があります。
図9

この項目をマウスで選択後、右クリックから「プロパティ」を選択し、表示された画面で、
スタートアップの種類(E) → 自動
サービスの状態 → 開始
図10

と設定し、OKを押して全ての画面を閉じると、上記の「ワイヤレスネットワーク」のタブが表示されるようになります。
その場合、「Windowsでワイヤレスネットワークの設定を構成する(W)」にチェックを入れておきましょう。
図11

。。。とマァこんな感じですが、いかがでしょうか?
以上で、ノートパソコンの無線LAN接続のお話は終わりです。
次は、何の話題にするか。。。
多分、Wordpressでしょうか?
スマートフォンを使い倒す (2)
■ メーカーのユーザーサポートの限界 ■
今回は、前回の予告通り、スマートフォンである、Willcom社製のWSO11SHに標準で内臓されている無線LAN機能を利用して、現在ある有線LAN環境に本機を参加させることにトライしました。
正直言うと、本機単体のインターネット接続は、昔のピッチ(PHS)と同じ速度で数百キロバイト位しかありません。
(「PHSかぁ~、懐かしい」と思うあなたなら、年がバレバレになります)
従いまして、会社あるいは、家庭で構築しているネットワーク環境に接続できれば、それを利用することにより、高速なネット接続が可能になります。
ですが、ここで、一つ問題が生じます。
それは、何かトラブルが発生した場合(例えば、インターネットに繋がらない等)、メーカーのサポートは一切受けられず、自力で解決しなければならない、という事です。
「一体、ナンノコッチャ?」と思われるかもしれないので、ここでは私の例を挙げてみたいと思います。
私の自宅のネットワーク構造は以下の通りです。
インターネット
↓
Yahoo BB
↓
ルーター(Link SYS 社製)
↓ 有線ケーブル
パソコン3台
これが従来の構成ですが、今回は、前回お話した、ビックカメラで手に入れた、無線LANのアクセスポイント

を用いて、以下のように繋げました。
インターネット
↓
Yahoo BB
↓
ルーター(Link SYS 社製)-有線ケーブル→パソコン3台
↓ 有線ケーブル
アクセスポイント(Planex 社製)
↓ 無線接続
WSO11SH(Willcom 社製)
で、ここで問題です。
例えば、ネットに接続しようとしても接続できない、といったトラブルが発生した場合、どこのサポート電話に連絡したらよいでしょうか?
答えは。。。たらい回しに会うだけです。
実際、私の場合、案の定、初期段階でネットに接続できなかったのですが、そこで、Willcom社に電話したところ、「それは、ルーター側の原因ですので、ルーターの製造会社に問い合わせてください」と言われ、サポートは、アッサリと断られました。
マァ、これは想定の範囲内でしたが。。。
実は、これはナイショで詳しいことは書けないのですが、昔、お財布事情が苦しい時に、上記の某Planex社の無線LAN製品の電話サポートサービスのバイトをしていたことがありました。
場所は、都内のボロいビルの一室です。
社名もPlanex社とは似ても似つかぬ会社名。
そうです。IT業界も、ゼネコン同様、表向きの社名は立派でも、実際の業務は、一次請け、二次請け等の下請けに丸投げなのです。
ですから、私も、そのバイトを始めるまでは、実際の業務が、Planex社の下請け仕事であるとは全然知りませんでした。
そして、実際の業務が始められ、ユーザーのトラブルが原因が分からない上に、ユーザーが他社製品を使っていると分かると、アッサリと「原因は、お使いの他社製品の設定にあると思うので、そちらの方にお問い合わせください」と振っていました。(←全員です)
とにかく、下請けの仕事の上に、利益を出すことが最優先なので、人員は最小限です。電話はガンガン鳴っているのですが、担当者全員が今、相手をしている対応で、手一杯で、電話に出たくても出られないのです。
ですから、話が複雑になりそうと感じた途端、チャッカリと「たらい回し」です。
話が、かなり逸れましたが、今回は、ネットワークの構築を例に取りましたが、ネットワークの知識(IPアドレス、デフォルトゲートウェイ等々の単語とその意味)があまりない場合には、同一会社の製品で環境を構築した方が無難です、というか絶対にお勧めします。
そうしないと、上でお話したように、メーカーのサポートで解決できない可能性が大です。
もし、そうでなければ、その方面の専門知識を持っている人とコネをつけておきましょう。(←私のような。。。爆)
■ WSO11SHをネットワークに参加させる ■
前置きが長くなってしまいましたが、これからが本論です。
(でも、前段より短いかも。。。)
私個人として考えるのが、無線LAN構築のポイントは、無線ルーターの設定だと思います。
端末となる無線子機の設定は、ルーターで設定した内容をそのまま入力すればいいだけですから。。。
現在、無線LAN市場ではバッファロー社製品が有名で、その設定も、初心者向けにクリック数回で済む簡単設定ですが、この場合、暗号方式に独自のAOSS方式をとっているので、そこに、WSO11SHを参加させるのは難しいかもしれません。
さて、今回の場合は、すべて手動で設定するので、チョッと骨が折れます。
先ずは、無線ルーターのIPアドレスを、PC+ブラウザで設定します。
そして、
・WSO11SHに割り当てるIPアドレス
・ネットワーク名(SSID)
・認証方式(今回はオープンを採用)
・データ暗号化方式(今回はWEP方式を採用)
・ネットワークキー(要はWEP方式でのパスワード)
等を無線ルーターで設定します。
図1

図2

そして、上記と同じ内容をWSO11SHに入力すれば、無線接続できることになります。
通常、PCの無線接続の場合、さらに、「チャンネル」というものを設定するのですが、本機(WSO11SH)には、その設定画面はないようです。
そして。。。本機(WSO11SH)の無線LAN機能をONにすると。。。
設定した、アクセスポイント名が自動的に表示できました!!
しかも!!、自分が設定したアクセスポイントの他に、別のアクセスポイントも表示されます!!
どうやら、私の自宅近くにも無線LANを使用している人が結構いるようです。
写真2

前回も言ったとおり、デジカメの扱い方が良く分からず、上記の写真では、チョット見づらいですが、「PCI」と表示されているのが、今回、設定した無線アクセスポイントです。
しかも、表示されているうちの2つのアクセスポイントは、セキュリティをかけておらず、私でも誰でも使いたい放題です。
写真3

(鍵のマークが出ていないのがセキュリティを掛けていない目印)
これだから、無線LANは、ウッカリするとセキュリティがボロボロになるのです。
こんなオマケが今回ありましたが、最終的には、本機のみで(PHS接続)は数百キロバイトの通信速度から、高速ネット接続の環境が実現し、体感速度も格段に向上した次第です。
これで、万年床にゴロ寝状態で、快適なメールチェックが可能となりました。
(流石に、ホームページを見るには、あのチッコイ画面では。。。)
本来であれば、普通、ここで終わりなのですが、私が、本機(WSO11SH)をPCのネットワーク環境にこだわったのは、本当は、別の目的があったのです。
別の目的というよりも、こちらが最終目的だったのです。
それは。。。
■ リモートデスクトップ ■
実は、本機(WSO11SH)の機能の1つに、「リモートデスクトップモバイル」というものがあります。
写真4

この機能は何かというと、ネットワークで接続されたPCのデスクトップ画面を、本機(WSO11SH)の画面に表示させることが可能となります。
言い換えると、本機(WSO11SH)で指定したPCを無線でリモートコントロールできるのです。
設定はあっけないほど簡単で、PC側で
「スタート」→「コントロールパネル」→「システム」
図2

を開いて、「リモート」のタブをクリックして、「リモートアシスタンス」にチェックを入れるだけです。
図3

以上、PC側の設定が完了後、WSO11SHの「リモートデスクトップモバイル」を立ち上げると(詳しい説明は端折りますが)、ユーザー名とパスワードを入力する画面が表示されて、認証が完了すると。。。
ナント!!、PCのデスクトップの画面が、WSO11SHに表示されます。
写真4

そう、これで、まさしく、ソファやベッドで寝転びながら、PCを遠隔操作できるのです。
これは、ノートパソコンや、昨年からヒットしているネットブックですら真似のできない芸当でしょう。
ただ、WSO11SHの小さい画面に、PCの全画面を表示するので、実際に操作するには、WSO11SH本機に付属のスタイラスペンとか、通常のボールペンのような、先の細い文房具で、チクチク操作することになるので、この操作性の好みについては、人それぞれ、といったところでしょうか?
また、これは、話がかなり複雑になるので、ここでは端折りますが、ルーターの設定を変更すれば、本機(WSO11SH)の、この機能を使い、会社から自宅のPCを遠隔操作する、といった芸当も可能になります。
以上、今まで、有線LANオンリーのパソコン生活をしていた私ですが、今回、Willcom社のスマートフォンの購入を機に、無線LANの環境を構築してみました。
そして、上で述べたように、無線アクセスポイントを設置したので、次回は、普通のノートパソコンを無線LAN環境に参加させることを、チョット考えてみたいと思います。
スマートフォンを使い倒す (1)
■ Willcom社製 WSO11SH ■
あなたは、「スマートフォン」というものをご存知でしょうか?
日本国内では、携帯電話が主流で、スマートフォンは殆ど見かけませんが、海外では結構、流行しているみたいです。(←Docomoの Black Berryとか)
いわゆる、いろいろ便利なソフト(プログラム)が単体で利用可能な上に、通話もできるといった、携帯電話(?)といったところでしょうか。
日本国内では、昨年の夏頃にアップル社がリリースしたiPhoneがそれに該当するのではないかと思います。
そして、今回、私が購入したのが、Willcom社製のWSO11SHです。
先月(3月)のことでしょうか、個人的に仕事の絡みもあって、もう一台携帯が欲しいなぁ~、と思いながら、新宿のビックカメラをブラブラしていたら、期末のバーゲンで「本体価格が無料!!」、というPOPに、思わず衝動買いしてしまったモノです。
外見はちょっと野暮ったい携帯電話みたいで、厚さもかなりありますが、
写真1

実は2段式になっていて、キーボードがガシャッと引き出せます
写真2

そして、上の写真をよ~く見てみると分かるように、キーボードを引き出すと同時に、画面表示が自動的に横長に切り替わります。
私個人としては、今まで、ず~と携帯はダイヤルして話すだけ、メールの作成などは全てPC派の私にとっては、このキーボード付きという点が、購入に至った大きなポイントになりました。
そして、(私個人が)「これは凄いっっ!!」と思ったのは、ネット上で公開されている「POsync」というフリーソフトをインストールすると、本機(WSO11SH)標準搭載の予定表(スケジューラー)と、Googleカレンダーの内容を、インターネットを介して同期させることができます。
今までは、予定をPCや携帯などに別々に入力・管理するのが面倒なので、結局、紙ベースの手帳を使用していたのですが、今回の使用感では、十分に実用に値すると考えています。
携帯でいうところの待ち受け画面は、(当然)カスタマイズ可能で、直近の予定を自動的に待ち受け画面に表示させておくことが可能です。
(これも、ネット上で公開されているフリーソフトを用いて、画面表示をカスタマイズしています)
私位の年代ですと覚えていると思いますが、シャープの「Zaurus(ザウルス)」とか、ソニーから発売され、PDAとして一世を風靡した「clie(クリエ)」と同様、画面をなぞることにより、手書き風のメモを残すことができます。
写真3

そして、これまた(私個人が)「これは凄いっっ!!」と思ったのが、Googleのサイトから専用のソフトをダウンロードして、本機にインストールすると、「Google Map」が直接利用可能になります。
写真4

そして、ナント!!ちゃんと航空写真も表示できます。
写真5

今まで、私の場合、都内で初めての場所に行く時は、PCでGoogle Mapの地図を紙に何枚も印刷して出向いて行ったのですが、これからは、その必要もなくなるかもしれません。
実は、本機(WSO11SH)は超小型のパソコンといった感じで、いろいろなプログラム(アプリケーション)は、「Windows Mobile」というOS上で動作しています。
ですから、この「Windows」という名前からピンとくるように、本機には標準で、ワードやエクセルのデータが取り扱える
・Excel Mobile
・PowerPoint Mobile
・Word Mibile
が搭載されています。
さらに、Windows Media Playerも標準で搭載されているので、ポータブル・プレイヤーとしても利用可能です。
私個人としても、以前から、ポータブル・プレイヤーが欲しくて、iPodを買う事を真剣に考えていたのですが、今回の本機で用は足りそうです。
実際には、本機の音声出力端子は、通常のイヤホン・ジャックとは形が異なるので、別途、変換アダプタが必要となりますが、ビックカメラの携帯アクセサリーのコーナーで、よ~く探してみると、数百円でアダプタがありました。
写真6

これを本体に装着するとこんな感じ。。。
写真7

これで、一般のイヤホンやヘッドフォンを繋げて、CDの音楽や、MP3形式の音楽がいつでも、どこでも楽しむことが出来ます。
また、これは現在のところ、情報収集中なのですが、Youtubeの動画(flv形式)のファイルも再生可能のようです。
もう、ここまでくれば、画面がチッコイ超小型パソコンといったところではないでしょうか?
(↑ 実際、そうなのですが。。。)
当然、ネットで公開されている、Windows Mobile用のソフトであれば、お好みのソフトをダウンロードし、インストール可能です。
昨年ヒットしたネットブックのさらに上を行き、本当にソファーやベッドにゴロ寝しながらPCライフを楽しめます。
これはあまりにも当たり前すぎるので、ここでは詳しく話しませんが、本機単独で、インターネットに接続し、ホームページの閲覧や、メールの送受信が当然できます。
あと、これくらい多彩な機能が実現できるとなると、私なんかはバッテリーの持ち時間が非常に気に掛かるのですが、これも、ビックカメラの携帯アクセサリーのコーナーを、ヨ~ク見てみると、本機(WSO11SH)にも使用可能な、汎用のポータブル充電池がありました。
写真8

ちなみに、気になる、お値段は、¥3980ですた。
これで、ACコンセントがない所でも、バッテリー残量を気にせず、バンバン使えます。
私位の世代の場合、大昔は、今回のような場合、当時は高価なメーカー純正品のバッテリー(又は大容量バッテリー)を別途購入しなければならなかったのですが、本当に便利な時代になったものです。
そして、イヨイヨ、今回というか、次回の本題となるのですが、本機(WSO11SH)には、実は、無線LAN機能が標準で搭載されています。
ですから、本機を無線LANネットワークの子機として使用可能なのです。
私の場合、PC環境は全て有線で構築しているのですが、今回は、本機(WSO11SH)を無線LANで、ネットワークに参加させることにチャレンジしました。
ただし、それには、無線LANのアクセスポイントが別途必要になるのですが、これまた、ビックカメラの店内を徘徊していると、ビックリ!!。
¥2980で、目的の機能を実現する機器を入手できました。
写真9

しかも、非常にコンパクト!!
パッケージに書いてあるように、出張にも気軽に持って行けるでしょう。
でわ、いよいよ無線LAN環境の構築です。
。。。次回に続く
追伸
本機(WSO11SH)の詳しいというか、複雑な機能の紹介は、以下のメーカーサイトを御参照ください。
http://www.willcom-inc.com/ja/corporate/press/2007/06/07/
PHP Tips (10):ブラウザにグラフを表示する
■ ブラウザに各種グラフを表示する ■
今までは、PHPプログラムの原理や、PHPプログラムを用いて、「あ~やる」「こ~やる」だのと、細々した内容をお話してきて、今ひとつ、自分の、あるいは会社のホームページで便利な内容というか、テクニックに乏しかったのではないかと思い、今回は、超実用的な内容についてお話したいと思います。
それは、サーバー上にあるデータから、グラフを生成して、それをユーザーのブラウザに表示させる、ということをしたいと思います。
で、今回の話のタネを先に言ってしまうと、PHPプログラム上で使用可能な、グラフ作成ツールはインターネット上でフリー(無料)で配布しているモノです。
こういったネットでのサービスというのは、世界が進んでいるのか、日本が遅れているのか、どちらが本当だか分かりませんが、「エッッ!!、こんなものが無料で利用できるの?」というサービスが海外のサイトにはイッパイありますネ~。
さて、実は、正直言うと、この稿は2度目の書き直しのモノなんです。
一度目は、どれか1つのグラフ作成プログラムを例に取り、実際に動きを確認する、といった流れを考えて、実際に途中までプログラムを書いたのですが、PHPによるグラフ作成プログラムについて調べると、結構な数のものが、しかも無料で公開されていることが分かりました。
中には、フラッシュを使った凝った表示ができるモノまであります。
こんなにバラエティーに富んだグラフ作成プログラムのうちの、たった1つを細々と紹介しても、チョット面白みに欠けるナ~と思い、今回は、それらPHPプログラムを羅列的に紹介するに留めました。
もし、その中で何か気に入ったものがありましたら、御連絡ください。
その際は、個別に対応したいと考えています。
振り返ってみると、数年前までは、ホームページにグラフを表示させようとする場合には、エクセルなんかで作ったグラフを切り取り、1つのイメージデータとしてホームページに表示していたものですが、今日では、プログラム的に、サーバーに置いてあるデータから直接・リアルタイムにグラフを生成できる時代なんだと、つくづくネットの世界の技術の発達は速いものだと感じいった次第です。
それでは、ネット上に公開されている、グラフ作成プログラムの一部です。
PHP/SWF Charts
http://www.maani.us/charts/index.php
pChart – a PHP class to build charts
http://pchart.sourceforge.net/
JpGraph日本語版
http://www.asial.co.jp/jpgraph/
flot
http://code.google.com/p/flot/
Open Flash Chart
http://teethgrinder.co.uk/open-flash-chart/
amCharts
http://www.amcharts.com/
Emprise JavaScript Charts
http://www.ejschart.com/
Visifire
http://www.visifire.com/
FusionCharts Free
http://www.fusioncharts.com/Free/
ちょっと調べただけでもこれだけ見つかりました。
検索エンジンで時間を掛ければ、まだまだ沢山みつかるのではないかと思います。
また、私個人としてはあまり興味がなかったので、あえてコンテンツとしては取り上げなかったのですが、会社、あるいはビジネスシーンで便利だと思われるのが、エクセルとの連携でしょう。
ここでは、私は実際に動作を確認はしていないのですが、こんな例があるようです。
「Ver.1.44:Excel to グラフ生成ツール追加」
http://ok2nd.blog87.fc2.com/blog-entry-75.html
Excelシートの取り込みには、PHP Excel読み込みツール「Spreadsheet_Excel_Reader」を使っています。
グラフ生成には、JavaScriptによるグラフ生成ツール「Bluff」および「HTML5」を使っています。
ブラウザで、Excelシートをアップロードすると、「Bluff」または「HTML5」でグラフ表示します。ボタンでグラフ種類やスタイルを変更できます。
こんな便利なツールもあるんですネ~。。。
なお、ここで、ちょっとした留意点ですが、以前、このメルマガで画像データを扱った時と同様、グラフも画像データの一種なので、PHPプログラムの動作を既定するファイル「php.ini」(←C:Windowsにあります)

の中の、
「;Windows Extensions」の部分に記述されている「;extension=php_gd2.dll」の「;」を外して、GDライブラリは利用可能にしておいた方がよいでしょう。

PHP Tips (9):ファイルのサーバーへのアップロード
■ 前置き ■
以前、ネット上の掲示板やブログのように、ホームページに表示されたフォーに文字を入力すると、書き込んだ文字というか文章(テキスト)がサーバーのハードディスクに保存される内容について、(長々と)お話しました。
で、次のネタを何にしようかナ~、と考えていたのですが、今回は、それに類する事項として、Youtubeに代表されよるように、単なる文章(テキスト)に限らず、動画であろうが、画像であろうが、音楽データあろうが、どんなデータであろうと、ユーザーのパソコンの中にあるデータ(ファイル)をサーバーのハードディスクに保存させる方法です。
私個人としては、(ネタ自体はもの凄い前ですが)マイクロソフト社のサーバー・プログラムであるIIS(インターネット・インフォメーション・サービス)が有する、「Web共有」が、ドラッグ&ドロップでファイル操作が出来る等、ユーザーにとっては直感的で、分かりやすいんじゃないかと思うのですが、今回は、サーバー自身の機能ではなく、より汎用性があると思われるPHPプログラムを用いて、ファイルのアップローダーを考えてみます。
■ ファイル・アップローダー ■
。。。で、実際のプログラムの例を私なりに考えてみました。
先ずは、サーバーにアップロードする、ファイルを選択する画面です。

これは、単なるHTMLファイルなのですが、今回のフォームの動作指定の部分が、通常の少々異なり、特徴的な記述になっているのですが、ここで細かくお話すると、かなりマニアックな内容になってしまいますで、ここでは、チョット割愛したいと思います。
で、そのファイル・アップローダーの入り口となるHTMLファイルですが、私としては以下のようなモノを考えてみました。
———————————————————————-
<html>
<head>
<title>ファイルのアップロード</title>
</head>
<body>
手元のパソコンにあるファイルをサーバーに保存します。<br />
<br />
<form method=”post” enctype=”multipart/form-data” action=”123-2.php”>
<input type=”file” name=”data” size=”30″>
<input type=”submit” value=”アップロード”>
</form>
<br />
※「参照」ボタンをクリックして、ファイルを選択後、「アップロード」ボタンを押してください。<br />
</body>
</html>
———————————————————————-
そして、上記のHTML文を「123-1.htm」というファイル名で、「C:\Inetpub\wwwroot\php」フォルダに保存します。

ただ、上記のものは、単なるHTML文で、実際には、ユーザーが選択したファイルを「123-2.php」というものに渡し、このPHPプログラムが処理を行うことになります。
で、そのPHPプログラムなんですが、こんなのは如何でしょうか?
———————————————————————-
<?php
//ここで保存するフォルダを指定
$updir = “./”;
//アップロードされたファイルを変数に入れる
$filename = $_FILES['data']['name'];
//変数に入れたファイルをサーバーのハードディスクに保存
move_uploaded_file($_FILES['data']['tmp_name'], $updir.$filename);
print(”アップロード完了”);
?>
———————————————————————-
上記のPHPプログラムを「123-2.php」という名前で、「C:\Inetpub\wwwroot\php」フォルダに保存します。

以上で、準備は完了です。
では、早速、動作の確認を。。。
先ず、ブラウザを立ち上げて、アドレス欄に「http://localhost/php/123-1.htm」と入力します。

そして、ブラウザに表示された画面の「参照」ボタンをクリックし、

適当なファイルを選択した後、

「アップロード」のボタンを押すと、ブラウザの画面が切り替わり、「アップロード完了」というメッセージが表示されると思います。

これだけですと、何がナンだか、よく分からないと思いますので、エクスプローラを立ち上げて「C:\Inetpub\wwwroot\php」フォルダの中を、よ~く見てみると。。。
先程、選択したファイルがあるのが分かるんじゃないでしょうか?

これは、チョット専門的になるので、ここでは端折りますが、上記PHPプログラムにある、「$updir = “./”」の部分を書き換えることにより、サーバーのハードディスクの好きなフォルダに保存させるよう、自由に設定が変更可能です。
今回は、サーバーにあたるものが手元のパソコンなので、アップロードは、文字通り「あっ」という間に終わってしまいますが、インターネットを介して、ファイルのアップロードを行った場合、(ファイルサイズによっては)思いのほか時間が掛かりますので、この点については考慮にいれておいた方がいいんじゃないかと思います。
例えば、このようにアップロードに時間がかかる場合のユーザーインターフェイスを考えると、進行状況を示す画面(プログレス・バー)
http://gigazine.net/index.php?/news/comments/20070801_simple_ajax_progress_bar_with_css/
を示すほうがカッコイイと思いません?
以上で、今回のネタは終わりということで。。。
PHP Tips (8):複数のページ内容を一瞬で変える
■ 前置き ■
もう、一年以上も続けていますが、現在、このメルマガでは、サーバー上で動くプログラミング言語の1つであるPHPというモノについて、延々とお話しています。
ココ最近は、他のプログラミング言語にありがちな、数字や文字等の処理ではなく、PHPというプログラミング言語は写真等の画像データも扱えますヨ~、というお話をしてきましたが、今回は、久しぶりに、文字を扱うお話にしようかと思います。
そして、これは、特にページ数の沢山あるホームページに利用価値のあるワザではないかと、私個人では考えています。
■ どんなにページ数があっても、一瞬で内容を変更する ■
それは、どんなワザかというと。。。サブタイトルのまんまです。
例えば、私のホームページの一番下には、
「Copyright(c) 2002-2007 E&A工房. All Rights Reserved」
という文字が、表示されています。

実際の話、年も変わったので、「2002-2008」と直したいのですが、私のホームページの場合、100頁以上あるので、いちいち手作業で直して、それをサーバーに再びアップロードするのはエライ作業になります。
そ・こ・で、この部分には、最初にページを作成する時に、ある細工を埋め込んであります。
それは、「Copyright(c) 2002-2007 E&A工房. All Rights Reserved」というたった一行書かれたテキスト(文章)ファイルを予め用意し、そのファイルをサーバーのハードディスクに保存しておきます。
そして、ユーザーがホームページにアクセスして表示すると、自動的に、このテキスト(文章)ファイルを呼び出し、その内容を表示するようなプログラム処理を施しているのです。
■ 別ファイルを読み込む「include」関数 ■
話だけですと分かりづらいとも思いますので、手っ取り早く、簡単な実例でお見せしたいと思います。
先ずは、下記の内容をメモ帳等にコピペして、

私のホームページへようこそ!!
「C:\Inetpub\wwwroot\php」フォルダに、「122-1.txt」という名前のファイル名で保存します。

そして、次はPHPプログラムを埋め込んだ、ファイルを作ります。
私としては、簡単ですが、次のようなものを考えてみました。
———————————-
<html>
<head>
<title>include関数のテスト</title>
</head>
<body>
<?php include ‘./122-1.txt’; ?>
</body>
</html>
———————————-
で、上記のファイルを、「C:\Inetpub\wwwroot\php」フォルダに、「122-2.php」という名前のファイルで保存してから、

ブラウザのアドレス欄に「http://locahost/php/122-2.php」と入力すると、上記のテキスト(文章)ファイルで保存した内容が表示されるかと思います。

では、ここで、あまり意味はないのですが、「PHPはHTML文の任意の部分に埋め込み可能である」という特徴を生かして、タイトル部分にも「include」関数を使ってみます。
上記と同様の要領で
「タイトル部分にPHPを使用」
という文をメモ帳にコピペして、「C:\Inetpub\wwwroot\php」フォルダに「122-3.txt」というファイル名で保存します。

で、PHPプログラムを埋め込んだ、ファイルを以下のようにします。
———————————————-
<html>
<head>
<title><?php include ‘./122-3.txt’; ?></title>
</head>
<body>
<?php include ‘./122-1.txt’; ?>
</body>
</html>
———————————————-
上記の内容を、「C:\Inetpub\wwwroot\php」フォルダに、「122-4.php」という名前のファイルで保存します。

最後に、ブラウザのアドレス欄に「http://locahost/php/122-4.php」と入力すると、ブラウザのタイトル部分が、「122-3.txt」の内容に変わっていることに気が付くでしょう。

最初にもお話しましたように、私のホームページ(http://www.e-and-a.ws)の最下部に表示されている部分は、サーバーのハードディスクに保存してある、1個のテキスト(文章)ファイルの内容を自動的に読み込んで、表示させるような仕掛けを埋め込んであるので、このテキスト(文章)ファイルの内容を書き換えれば、全てのページで、書き換えた内容が反映される訳です。
また、詳しくお話すると、ま~た話が長くなってしまいますので、ここでは端折りますが、同じく、私のホームページの左側に表示されている縦のメニュー

も同じように、別に保存してあるファイルの内容を表示するような仕掛けをしてあります。
たかだか数ページのホームページですと、あまり実感が湧かないと思いますが、大量のページのホームページの場合、このテクの有難味は、(私も含めて)実感できるのではないかと思います。
次回は何をネタにしようかナ~・・・
ちょっと考えておきます。
。。。続く
PHP Tips (7):PHPプログラムで図形処理
■ 前置き ■
何度も言うようですが、PHPというプログラミング言語は、単なる複雑な計算などの処理のほかに、ナント!!、円や線などの図が、(ブラウザ上に)書けてしまう、というお話をしてきています。
で、今回のお話なのですが、前回のお話の拡張版といった感じで、サーバー上にある画像データを加工する、といった点では同じなのですが、前回のお話に、さらに付け加えて、その画像データに文字を加えて、合成するといった内容です。
実際の例は、後ほど見ていただくとして、これが何の役に立つのか?という事ですが。。。
例えば、ホームページ上に写真のデータを掲載するとします。
その場合、その写真をユーザーは、インターネットエクスプローラの場合、マウスの「右クリック」→「名前を付けて画像を保存」という操作で簡単に自分のパソコンに保存できてしまいます。
で、その対策として、その写真の中に、ワザと「copy right ~」というような文字を埋め込み、写真のデータの質を落とすことより、ユーザーのパソコンに画像をコピーさせない、という使い方があるんじゃないかと思います。
その他にも、多分、イロイロな使い道があるとは思うのですが、それについては、あなたの御想像のままに。。。といったところでカンベンしてください。
では、早速、プログラムの実例を。。。
■ 画像と文字を合成して、画像データとしてブラウザに表示する ■
さてさて、先ずは実例その1です。
先ずは、チョ~単純な例として、ブラウザの画面の左上に黒色の四角を表示し、その四角の中に、自分の好きな文字を、白色で表示することにします。
私の考えた例では、その四角の中に、「Hello! PHP World」という文字を埋め込んで、ブラウザに表示させます。
私としては、今回、以下のようなPHPプログラムを考えてみました。
—————————————————-
<?php
$img = imagecreate(200, 100);
// 埋め込む文字を変数「$string」の中に代入します
$string = ‘Hello! PHP World’;
$bg = imagecolorallocate($img, 0, 0, 0);
$black = imagecolorallocate($img, 255, 255, 255);
// 左上の角に黒で、上の「$string」の内容を表示します
imagestring($img, 5, 10, 10, $string, $black);
header(’Content-type: image/gif’);
imagegif($img);
ImageDestroy($img);
?>
—————————————————-
上記の内容を、パソコンの「C:\Inetpub\wwwroot\php」フォルダに、ファイル名を「121-1.php」の名前で保存した後、

ブラウザのアドレス欄に「http://localhost/php/121-1.php」と入力してみると。。。
上でもお話したように、ブラウザの左上に、「Hello! PHP World」と書かれた、黒色の四角が表示されるかと思います。

モノは試しに、その画像の上で、マウスの「右クリック」→「プロパティ」で画像データの内容を確認してみると、ちゃんとGIF形式の画像である事が分かります。

今回のプログラムのキモとなるポイントは、
imagestring($img, 5, 10, 10, $string, $black);
と記述されている、PHPに予め用意されている「imagestring()」関数です。
この、「imagestring()」関数の詳細についてですが。。。
ここで細かくお話すると、ヤタラ話が長くなりますので、スミマセンが、ここでは端折らせてください。
もし興味があれば、Google等で調べてみていただけないでしょうか?
申し訳ありません。。。
さて、上記プログラムで、画像データと文字「Hello! PHP World」を合成して表示させたのですが、この文字を日本語にしてみたらどうでしょうか?
結論から言うと、ダメみたいですね。。。
私の環境では文字化けしてしまい、うまく表示されませんでした。

多分、キチンと表示出来るのは、半角英数字だけだと思うのですが、いかがでしょうか?
■ サーバー上にある画像と文字を合成してブラウザに表示する ■
さて、次は、最初にお話したように、予めサーバー上に保存されている画像データに、自分の好きな文字を合成してブラウザに表示させるプログラムですます。
ここで、ブラウザに表示させる画像の元データですが、今回も前回同様、ビートルズのジョンレノンを偲んだ、「光の塔」の写真を使います。

この写真に、上記と同じ感覚で文字を合成したいと思うのですが、ここでは、単なる文字列だけではツマラナイので、サーバーの日付と時刻を表示したいと思います。
で、私が考えたプログラム例ですが、以下のようにしてみました。
下記のプログラムでは、サーバー上のフォルダ、すなわち、C:\Inetpub\wwwroot\php」フォルダに、上記の写真が予め「121-5.jpg」というファイルで保存されている事を前提にしています。

————————————————————
<?php
Header(’Content-Type: image/jpeg’);
$img = ImageCreateFromJpeg(’./121-5.jpg’);
// ここで、サーバー上の日付と時刻を変数「$date」に代入します
$date = date(’Y/m/d H:i:s’);
$black= ImageColorAllocate($img, 255, 255, 255);
// 今回のキモである「imagestring()」関数を使います
ImageString($img, 5, 10, 10, $date, $black);
ImageJpeg($img);
ImageDestroy($img);
?>
————————————————————
で、上記の内容を「C:\Inetpub\wwwroot\php」フォルダに「121-2.php」というファイル名で保存し、

次に、ブラウザのアドレス欄に「http://localhost/php/121-2.php」と入力してみると。。。
元の写真の左上に日付と時刻が乗っかった画像がブラウザに表示されませんか?

で、今回のプログラム例では、一回ブラウザに表示させた後、ブラウザの「再読み込み」のボタンをクリックする度に時刻の部分が刻々と変化していくのが分かると思います。
この例の場合、自分だけでやっていると面白くもなんともないですが、いざ、プログラムをネットに公開した場合を考えると、ネットのユーザーが画像を表示させた日付と時刻を、ユーザーのブラウザにリアルタイムに表示することになります。
今回の上の例では、シャレで、
$date = date(’Y/m/d H:i:s’);
の部分で、関数を用いて、リアルタイムの日付と時刻を、変数「$date」に代入していますが、
例えば、
$date = ‘Hello!! PHP World’;
という具合にすれば、固定した文字が画像と共にブラウザに表示されることになります。

■ PHPプログラムをHTMLの中で使う ■
さて、上記までに紹介した、PHPのプログラム例ですが、プログラムだけを示されてもチョット使いづらい、というか、通常のホームページで使われるHTML文の中でどうやって使ったらいいのか?という問題があるんじゃないかと思います。
。。。で、その対処方法です。
他にも方法があるんじゃないかと思いますが、私が思いつくのは、「img src」タグを使う方法です。
例えば、ですが。。。
またまた、このメルマガの特徴で、今回も内容が異様に長くなってしまうので、ここでは詳細は端折りますが、
以下のような、超単純なHTML文を考えてみました。
———————————————-
<html>
<head>
<title>画像と文字を合成</title>
</head>
<body>
画像と文字を合成して表示させるテストです。<br>
<br>
<img src=”./121-2.php”><br>
</body>
</html>
———————————————-
こうすれば、お手持ちのホームページビルダーなどのホームページの作成ソフトで、簡単に(?)HTML文が作成できると思います。。。
上記の内容をHTML文として保存し、ブラウザで開いてみると、ちゃんとホームページが表示されます。

当然の事ですが、上記のHTML文には、PHPのプログラムが指定されているので、上でお話したのと同様、ブラウザの「更新」ボタンをクリックする度に、表示される時刻が、刻々と変化していきます。
という具合に、HTML文の中でもPHPプログラムは好きなように使える、というお話でした。
次回は何をネタにしようかナ~・・・
ちょっと考えておきます。
。。。続く
PHP Tips (6):PHPプログラムで図形処理
■ 前置き ■
何度も言うようですが、PHPというプログラミング言語は、単なる複雑な計算などの処理のほかに、ナント!!、円や線などの図が、(ブラウザ上に)書けてしまう、というお話をしてきています。
今までは、四角形とか、丸とか、比較的単純な図形を、プログラムで描かせた訳ですが、今回は、すでにサーバー上にある画像データを加工する、といったことにトライしてみたいと思います。
例えばの話なのですが、よく、ホームページのコンテンツに、小さい画像が羅列して表示されており(サムネイル表示)、その1つの画像をクリックすると、その画像が元の大きさで表示される、というのを結構目にします。
また、今までも何度かこのメルマガで書きましたが、この図形を出力するPHPプログラムをHTML文の中で利用するには、HTML文の「img」タグを使って、
<img src=”(PHPのプログラムコード)”>
という書き方になります。
では、早速、プログラムの実例を。。。
■ サーバー上にある画像を縮小してブラウザに表示する ■
さてさて、ともあれ実例から。。。
先ずは、元となる画像ファイルです。
「何かイイものはないかな~」と探したのですが、ここでは、去年のものになりますが、ビートルズのジョンレノンを偲んで、世界の平和を願った、「光の塔」の写真を使います。

さて、この画像ファイル(別に上記のものでなくても構いません)を、「120.jpg」の名前で、「C:\Inetpub\wwwroot\php」フォルダに保存します。

そして、いよいよ、PHPプログラムの方です。
私としては、以下のようなものを考えてみました。
————————————————–
<?php
// ファイル
$filename = ‘120.jpg’;//← ここで縮小表示する画像ファイルを指定しています。
$percent = 0.5; //← 今回は1/2表示としました。
// コンテントタイプ
header(’Content-type: image/jpeg’);
// 新規サイズを取得します
list($width, $height) = getimagesize($filename);
$new_width = $width * $percent;
$new_height = $height * $percent;
// 再サンプル
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled(
$image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height
);
// 出力
imagejpeg($image_p, null, 100);
?>
————————————————–
そして、このPHPプログラムを、「120-1.php」の名前で、「C:\Inetpub\wwwroot\php」に保存します。

さて、先ずは、元の画像の表示です。
ブラウザのアドレス欄に「http://localhost/php/120.jpg」と入力すると、元の画像が表示されます。

そして、その画像の上で、マウスの右クリック→プロパティを見てみると、画像の大きさが「450×336ピクセル」であることが分かるんじゃないでしょうか?

では、いよいよ、次にPHPプログラムを走らせることにします。
ブラウザのアドレス欄に、「http://localhost/php/120-1.php」と入力してエ
ンターキーを押すと。。。
上記の画像よりも小さくなった画像が表示されるのではないでしょうか?

念のため、上記と同じく、その画像の上で、マウスの右クリック→プロパティを見てみると、画像の大きさが「225×168ピクセル」となっており、元の画像を見かけ上、小さく見せているのではなく、実際に画像が縮小されて表示されていることが分かります。

今までは、PHPによる画像処理の例は、見るだけ・試してみるだけなら面白いかもしれませんが、どつらかというと、あまり実用性はありませんでした。
ただ、今回の場合は、例えば、ネットショップの場合、商品の写真を一覧ページ用の小さいサイズの写真と、実際の販売ページ用の大きな写真の2種類を用意しなければなりませんでしたが、今回の例を応用すれば、写真は1枚だけ用意すればいいことになります。
そんな訳で、今回の例は、実用的な面でも少しは役に立つプログラムではないでしょうか?
。。。続く
PHP Tips (5):PHPプログラムで図形処理
■ 前置き ■
何度も言うようですが、PHPというプログラミング言語は、単なる複雑な計算などの処理のほかに、ナント!!、円や線などの図が、(ブラウザ上に)書けてしまう、というお話をしてきています。
今までは、四角形とか、丸とか、比較的単純な図形を、プログラムで描かせた訳ですが、今回は、チョット複雑な図形に挑戦したいなと考えています。
でも、マァ、今回のようなケースを、実際のWebサイトのデザインの中に取り入れるケースは、殆どないであろう、と私個人としては考えているので、どちらかというと、お遊びの範疇に入る気がしないわけでもないですが。。。
また、今までも何度かこのメルマガで書きましたが、図形を出力するPHPプログラムをHTML文の中で利用するには、HTML文の「img」タグを使って、
<img src=”(PHPのプログラムコード)”>
という書き方になります。
では、早速、プログラムの実例を。。。
■ ブラウザ上に多角形を表示する ■
先ずは、ともあれ実例から。
私としては、以下のようなものを考えてみました。
————————————————–
<?php
// 多角形の点の配列の準備
$values = array(
40, 50, // ←点1の位置 (x, y)
20, 240, // ←点2の位置 (x, y)
60, 60, // ←点3の位置 (x, y)
240, 20, // ←点4の位置 (x, y)
50, 40, // ←点5の位置 (x, y)
10, 10 // ←点6の位置 (x, y)
);
// 画像の生成
$image = imagecreatetruecolor(250, 250);
// 色の設定
$bg = imagecolorallocate($image, 200, 200, 200);
$blue = imagecolorallocate($image, 0, 0, 255);
// 多角形の描画
imagefilledpolygon($image, $values, 6, $blue);
// 画像の出力
header(’Content-type: image/png’);
imagepng($image);
imagedestroy($image);
?>
————————————————–
さて、上でも書きましたが、実際のホームページ作成の中で、PHPプログラムで描かせた多角形を使用するケースは、まず無いと思いますので、ココでは詳しいプログラムの解説は端折ります。
もし、イロイロ遊んでみたい場合は、
—————————————
// 多角形の点の配列の準備
$values = array(
40, 50, // ←点1の位置 (x, y)
20, 240, // ←点2の位置 (x, y)
60, 60, // ←点3の位置 (x, y)
240, 20, // ←点4の位置 (x, y)
50, 40, // ←点5の位置 (x, y)
10, 10 // ←点6の位置 (x, y)
);
—————————————
の数字を変えてみたり、ポイントの数を増やしたり減らしてりしてみて、どのように図形がブラウザに表示されるか確認してみるのも、いいかもしれません。
さて、上記プログラムを動かし、ブラウザに、どのように表示されるか見るには。。。
上記のPHPプログラムを「119-1.php」という名前のファイル名で、「C:\Inetpub\wwwroot\php」フォルダに保存します。

その後、ブラウザを立ち上げ、アドレス欄に「http://localhost/php/119-1.php」と入力すると、ブラウザに、黒字の背景の中に、青い星型の図形が表示されるのが分かると思います。

また、上記は、生のPHPプログラムそのものですが、これをHTML文の中で使用するには、<img>タグを利用して、
————————————————-
<html>
<head>
<title>青色の多角形をブラウザに表示させる</title>
</head>
<body>
青色の多角形を表示する<br />
<br />
<img src=”./119-1.php”><br />
</body>
</html>
————————————————-
そして、上記のHTML文を「119-2.htm」という名前のファイル名で、「C:\Inetpub\wwwroot\php」フォルダに保存します。

その後、ブラウザを立ち上げ、アドレス欄に「http://localhost/php/119-2.htm」と入力すると、前の場合と同様、文字と共にブラウザに青色の多角形が表示されるのが分かると思います。

そんな感じで、PHPプログラムで図形を取り扱う例を、何回かお話しましたが、今回の例はチョット実用性に乏しいので、次回は、実際のWebサイトの運営に少しは役立つ例を考えてみたいと思います。
。。。続く