ラベル Project の投稿を表示しています。 すべての投稿を表示
ラベル Project の投稿を表示しています。 すべての投稿を表示

2011年11月22日火曜日

プロジェクト × Bridge Of Peace

久々のプロジェクトでのエントリー

なにもしてないわけではなく、常に仕事はあり手は動いている状況。
現在4つのホームページを同時並行で作成している。

今回は、イギリスのボランティア団体であるブリッジ オブ ピース のホームページを作成する機会をいただいた。

1から作成するのではなく、もともとあったホームページの変更を行った。


<BEFORE>


<AFTER>



もともとは、全てtableで構成されている10年前までであれば通用したhtml構造だった。
そして、ヘッダーもIE6以前のブラウザによって隠れてしまう状況。

そのため、HTMLの入れ替えを行い、デザイン関連は、CSSに外だしした。
それと合わせて、デザイン変更とコンテンツの充実化を図った。

今回は、現在いるカナダと、依頼元のイギリスとの間で物理的な問題もあり、問い合わせフォームやワードプレスでの作成ができなかった点が残念。
そのため全て、静的ページとして作成を行った。

またページ数も多いため、DWのテンプレート機能を活用している。
アイコン等に関しては、フリーのアイコン素材を用いた。


日本人がボランティア先進国のイギリスでさまざまな組織と共に活動。
エンジニアがシリコンバレーで働くようなものか?

言えることは、アウェイで頑張っている人は、常にカッコイイということだ。

2011年9月23日金曜日

ノルウェー×プレーケストーレン×プロジェクト

先日、ついに念願のノルウェー・プレーケストーレンへ行くことができた。

「死ぬまでに一度は行ってみたい場所」で一位にも輝いたことがある、リーセフィヨルドを見渡せる絶景ポイントだ。

大学生のときに、自転車でヨーロッパを横断した際(途中挫折)、最終的目的地にするも辿りつけなかったという感慨深い場所だ。
7年のブランクを経て、やっと行くことができた。

そして、今回プレーケストーレンへ行く工程を調べる中で、どうしても情報が不足していると感じた。

ならば、
自分がプレーケストーレンの行き方のサイトを作れば良い!

ということで、
「プレーケストーレンへの行き方 虎の巻」を作成した。




きれいなポスターでみるとこんな感じ↓


■行き方

プレーケストーレンへの行き方を調べるには非常に時間がかかった。
イギリスからだと行けるルートもたくさんある。

格安航空券を使用するとして、ルート候補としては、

<ルートA>
1)ガトウィック(ロンドン)からベルゲンに深夜到着
2)ベルゲン空港に朝までステイ
3)ベルゲン空港となりのフェリーポートからスタバンゲルへ
4)スタバンゲルからフェリーにてタウへ行きバスに乗ってプレーケストーレンへ

<ルートB>
1)ヒースローからオスロへ
2)夜行列車でスタバンゲルへ
以下ルートA同様

<ルートC>
1)ガトウィックからスタバンゲル空港へ直行便
以下ルートA同様


まずルートAだが、
前提としてベルゲン空港は、24時間オープンで寝ることができる。
(詳細は、sleeping in airportsのサイトを参照)
そしてベルゲンの町に行くことなく、空港となりのフェリーポートからスタバンゲルへ行けるという裏道も発見した。

ルートBは、ブリティッシュミッドランドインターナショナルという会社が、信じられないくらいの破格値で運航しているため、費用的に魅力であり、オスロから寝台列車というのも乗ってみたいとそそられた。

そして、結果的にルートして選択したのがルートCだ。
格安航空券が意外に安く1万5千円くらいで往復できた。
そして、プレーケストーレンの麓町のスタバンゲルへ直接乗り入れられるため、お金と時間の短縮ができた点が決め手だ。

■スタバンゲルの町からプレーケストーレン

詳細は、このサイトをみてほしい。
今回の旅行を受けて、


あまりにプレーケストーレンの情報がない!

と感じたため、突貫工事で私が作成したサイトだ。

「プレーケストーレンへの行き方虎の巻」


簡単にいうと、スタバンゲルからは、以下ルートだ。

1)フェリーで30分かけて、タウという町へ行く
2)タウからバスで40分のプレーケストーレンヒュッテへ行く(登山口)
3)ヒュッテから、片道2時間かけてプレーケストーレンを目指す

フェリーやバスの時間が限られているので、詳細な情報は上記サイトを参考にしてほしい。


■プレーケストーレンの山登り

甘くみると痛い目をみるのがこの山登り。

普通に歩いて、片道2時間かかる。
必要な体力は、富士山で例えると、5合目から8合目へ登るくらいの体力が必要だ。

ただ安心してほしい!
犬でも登頂に成功している!

私が登った日は、プレーケストーレン山頂で2匹ほど犬がいた。




ただ、正直途中の道は手をつかわないと登れないところや、とにかく道が険しい。
雨が降ったら非常に危険なルートばかりだった。

また、後半は崖っぷちが多いので特に気をつける必要がある。
実際に命を落としてた人も何人もいるようだ。

そして山頂へ・・・

山を登りきると、いきなり断崖絶壁が姿を現す。

ある人は、
アメージング!と叫び、
ある人は、
ユーフォーリアという言葉を静かに発する


そして、おそるおそる半身を乗り出して断崖の下をのぞきこんだり、ギリギリの端っこでジャンプしてみたり、瞑想してみたり、火をおこして料理してみたり
と色々な人がいる。

自分は、「こんな最高の景色の中で一番もったいないことをしたい」と思い、景色が一番良い場所で、持参したキンドルで読書をしながら昼食をとった。

おそらく、これが人生の中で、最初で最後、「最高の読書」だったと思う。


プレーケストーレンは、景色もさることながら、そこにいる、絶景を前にした人々の様子も感慨深く、国籍関係なく、人の素を垣間見ることができるすばらしい場所であった。

2011年9月14日水曜日

UK-Japan Volunteers Association @ウェストンスーパーメア

今回のプロジェクトでは、縁があってイギリス・ロンドンの西に位置するウェストンスーパーメアという町で、ボランティアをはじめとした活動をしている「UK-Japan Volunteers Association」のウェブページの作成をお手伝いすることができた。



より大きな地図で UK-Japan Volunteers Association を表示



ウエストンスーパーメアは、イギリスの田舎町で非常に平和な感じな町。




浜辺に、ロンドンアイではなく、ウエストンスーパーメア・アイもあります↓






「UK-Japan Volunteers Association」は、イギリス国内の障害者や老人などのボランティアなどをサポートする団体だ。
まだ発足して間もなく、今後日本からのイギリスへのボランティアへ参加したい場合等の窓口としての活躍を目指している。


イギリスでは、ワークビザやスチューデントビザ以外に、ボランティア系のビザというものが存在するらしい。
ワークビザでは、企業からの認可が必要だし、スチューデントビザであれば、学校からの認可が必要であると同様に、ボランティアビザの取得は、当然ながら政府から認められた団体を通じて認可される必要がある。

イギリスでの障害者などの活動を色々と話をさせていただいた。
日本と決定的に異なることは、障害者や体が不自由な老人であっても非常に明るく活発であるということ。それは、本人も含めて、周りの人間もそれを受け、両者が非常にオープンだということ。
日本人、特に若者がそのような海外の環境に触れ、今後日本語の高齢化社会が抱える閉塞感をぜひ変えていってもらいたいと思った。

興味のあるかたは、ぜひ「UK-Japan Volunteers Association」にコンタクトをとってみてもらいたい。


さて、本題のWEBサイトに関しては、色々と検討した結果、以下から今回はグーグルのブロガーをベースに、ホームページ風にカスタマイズする方法で作成することとなった。

理由は、

1)更新作業の簡素化
2)活動履歴を日記風に記録する
3)無料でランニングする(有料サーバーのワードプレスは使用しない)


作成のポイントは、
・ホームページ風ブログとするため、トップページを記事ではなく、ホームページ風にすること
・サイドバーのカスタマイズ


上記の主旨にて作成を行ってみたいと思う。

今回は1日のみの訪問となったが、非常に有意義なものだった。
やはり、世界で戦う日本人は非常に面白く温かい。
このような出会いを大事にしていきたい。


久々に日本食もいただき、お土産におにぎりまでもらってしまった。
おにぎりのシャケがおいしすぎた。
久々にお袋の味を思い出した一日だった。



ホームページの作成は別途報告としたい。

2011年8月3日水曜日

Project in フィリピン③(完)

フィリピン・セブ島生活も残り3日にして、なんとかフィリピンプロジェクトが完成しました。

コンテンツ量は、まだまだ少ないものの、これから徐々に増やしていきたいと思います。
完成したサイトが下記です↓


今後はローカルではなく、本番環境で手をいれていこうと思います。

Wordpressのローカル環境から本番環境への移行に関しては、絶対にエラーが多発してトラブルになるのが本能的に分かっていたので、今日こそやろう!いや、明日こそは! という感じで、ぐずぐずしてましたが、やっと昨日から着手しました・・・。

案の定、エラーが多発で、完了するまで実働5時間くらいかかりましたが、なんとかクリアしました。

次回は同じエラーを繰り返したくないので備忘録も兼ねて記録しておきたいと思います。
下記は、あくまで自分の場合のケースのため、下記の通りやる場合は、各自の責任でバックアップをとって実行してください↓


<自分の環境>
・サーバーは、さくらサーバーを借りる
(スタンダードプラン以上でないと、PHPが使えないので注意)
・ムームードメインで、ドメインを取得して、さくらサーバへ移管
・XAMPPでローカル環境でテーマ構築

<参照>
・Webクリエイターズボックス:WordPress オリジナルテーマをアップロードする 

・P-mtg アーカイブ:XAMPPで制作したWordPressを本サーバに


<全体の工程:ローカル環境から本番環境までの移行>

ローカル側の作業

1.ローカル側のPHP Adminにアクセス
2.エクスポートタブをクリック

ここで早速、第一のトラップ。
エクスポートする際は、以下に注意しないとさくらサーバでインポートした際にエラーとなります。
(実際エラーになりました。)

・PHP adminの左側のサイドバーでエクスポートしたい「データベースを選択」する
・そのすぐ右側の欄で「全選択」を押す
・オプション欄の構造の箇所で「DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT を追加」にチェックを入れる
そして、「完全な INSERT 文を作成する」欄のチェックをはずす



上記をちゃんとクリアして、「実行する」をクリック。
そうするとSqlファイルが吐き出されます。


3.上記2でエクスポートしたsqlファイルをDreamweaverで開いて、ローカルのURLを本番のURLに置き換える。
(ウィンドウズのメモ帳などでは、文字コードが異なるので編集しないようにしましょう)

Dreamweaverでsqlを開いたら、「Ctrl + F」を押して、一気に置換する。
自分の場合は、「http://localhost/mysite」を「http://good-english.jp」を置き換えした。
その際、「http://localhost/mysite/」のように最後に「/(スラッシュ)」などは入れなかった。

置き換えした結果、200個以上が置き換えされました。


ローカル側の作業は以上で完了。


さくらサーバー側の作業

4.さくらサーバーのサーバーコントロールパネルにログイン
5.左側のバーの「データベース設定」から「管理ツールログイン」をクリックしてサーバ側のPHP adminにログインする

ここで、PHPのバージョンをローカルと本番で合わせる必要はないのだろうか?と疑問に思う。
さくらサーバのコントロールパネルの「PHPのバージョン選択」から、バージョンを変更できるようになっている。さあ、どうしよう。
ちなみに、サーバ側は「PHP 5.2.17 [標準のPHP]」となっており、ローカル側と異なっていたが、無視することとした。(結果、問題なしだった。一応調べてみるとローカル側のPHPが古いと問題となるかと思われる。)




6.sqlファイルをインポートする

PHP adminに入ったら、左側のサイドバーでデータベースを選択してから、インポートファイルを選択して「実行」します。
これをきちんと選択しないとエラーとなるため注意。

ちなみに自分の場合は、上記と工程2にて、トラップにハマっていたため、以下エラーが発生しました。
#1046 - No database selected
Access denied for user・・・



以上でサーバー側の作業は完了です。


ワードプレスのファイル全体をサーバーにアップロード

7.FTPソフトを使って、アップロードします。

自分の場合は、一番有名どころのFFFTPを使ってアップロードしました。
仮に、ドメインのルートディレクトリを「/example」にしていれば、FFFTPにて、ローカル側の「htdocs」より下の階層のファイルを全て「/example」に放り込む。
(通常、ローカルではhtdocs以下にワードプレスのファイルを格納しているかと思います。ファイル数が非常に多いので時間がかかります。)

ここでまたもや2つのトラップあり。
1つ目は、パーミッションの設定。phpのパーミッションを705(もしくは755)にする必要あり。
さくらサーバーのマニュアルを参考(以下抜粋)

1.FFFTP を起動し「オプション(O)」>「環境設定(S)」メニューを選択し、オプションダイアログを開きます。
2. 「転送3」タブをクリックし、「追加(A)」ボタンをクリックします。
3. デフォルト属性の設定ダイアログが開きますので、[ファイル名(F)]欄に「*.php」、[属性(A)]欄に「705」と入力し OKボタンをクリックします。

2つ目は、何度やってもアップロードできないファイルがあった。
エラー内容としては「PASVモードで接続できません」と出てしまう。
調べてみると、知恵袋でこんなベストアンサーを発見。
早速試してみたところエラーが解消された!
サーバ側でパッシブモードでの接続を拒否している場合にこうなることがあります。FFFTPの接続メニュー ---> 接続 ---> ホスト一覧から選択 ---> 設定変更 ---> ホストの設定の拡張タブをクリック ---> PASVモードを使うここにチェックが入っていたら、外して接続してみて下さい。


8.サーバー側でアップロードしたファイルの内、「wp-config.php」を変更する。

これまたメモ帳などで開かないようにして、編集します。
自分の場合は、さくらサーバーのコントロールパネルのファイルマネージャ(旧バージョン)から下記画面を展開し「編集」にて修正しました。



内容は下記に変更。
全部、さくらのコントロールパネルの「データベースの設定」に記載されている内容です。

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** ///** WordPress のためのデータベース名 */define('DB_NAME', 'さくらのデータベース設定にある情報を入力(データベース名)');
/** MySQL データベースのユーザー名 */define('DB_USER', 'さくらのデータベース設定にある情報を入力(データベースユーザ名)');
/** MySQL データベースのパスワード */define('DB_PASSWORD', 'データベース接続パスワード');
/** MySQL のホスト名 */define('DB_HOST', 'データベースサーバ(例 mysql999.db.sakura.ne.jp)');
/** データベースのテーブルを作成する際のデータベースのキャラクターセット */define('DB_CHARSET', 'utf8');
/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */define('DB_COLLATE', '');


9.以上で完了、本番URLにアクセスすれば記事も含めてワードプレスが全て移管できているはず・・・ だが、案の定エラーとなる。

エラー事象は、トップページには問題なく表示されるが、各記事のページに遷移しようとすると、「Internal Server Error wordpress」となる。
ワードプレスのダッシュボードなどには、問題なく表示されていて記事の投稿もできる。

なぜだ・・・3時間悩む。
とりあえずgoogleで検索しながら、下記を試す。

・.htaccessファイルのパーミッションを「666」へ変更
 (さくらのファイルマネージャから変更可能)
・同じく同ファイルのファイル内容を、下記に変更

# BEGIN WordPress<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /ローカルのルートのままだったので、ここに本番に格納したルートを挿入/RewriteRule ^index\.php$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /同じくルートを挿入/index.php [L]</IfModule>
# END WordPress


それでも、「Internal Server Error 」となってしまうため、

・ワードプレスのプラグインをいったん全て無効化してみる。

それでもダメ。ワードプレスフォーラムを隅から隅まで見てみると、パーマリンクを独自にしていると再度構築する必要がある、などの回答が結構あった。
だけど自分の場合は、特に独自のパーマリンク設定はしておらず、デフォルトのまま。
とにかく、デフォルトでもいいので、ダッシュボードの「設定」⇒「パーマリンク変更」から、なにも変えずに「変更を保存」をクリック。

そしたら、治りました!!


ということで、今のところは不具合なく動いています。

2011年7月24日日曜日

Project in フィリピン②

残り2週間となったフィリピンで、早くサイトを完成させたい。

だけど今週は、ディベートだの劇の練習などなどあり、来週は金曜日には卒業式、月1の一番大きいテスト、そしてフードフェスティバルが待っている。

のんびり英語を習いにきたのに、結構激務。

欧米の留学よりアクティビティーが多く、フィリピン人の先生達が尋常でないほどフレンドリーなのが理由!
土日も関係なく生徒と遊んでいる!
そして授業がないのに、土曜日とかにも学校に遊びにきている!

そういった意味では、メンタル面では、欧米留学より遥かに良いと思う。
バーディーティーチャー制度というものもあり、一人一人になんでも相談できる担任の先生みたいな先生もついてます。


早速の本題の今回のフィリピンプロジェクト。
実はなにもやっていないわけではなく、ちゃくちゃくと進んでいます。

サイト名:「オンライン英会話の徹底比較道場」

<全体像>
全体の進捗は約65%程度。



ポイント①:
条件別に学校を選べるようにして、個別の紹介ページに行く前にサマリーの一覧ページを自動生成





ポイント②:
上記①から遷移した各学校の紹介ページに対して、基本情報の図とゲストでも簡単に評価できるチェック欄を実装

そして、評価を行うと、自動的にサイドバーの「クチコミ評価の高い学校」の欄で集計されて表示される。
この画面は、ワードプレスの記事画面から投稿するタイプ。
学校の基本情報等の一覧表は、エクセルで比較表を作成して、エクセルのマクロで自動的にHTMLで吐き出すように設定。
エクセルの一覧表さえ更新すればあとは、吐き出されたtebleタグのhtmlを貼りつけるだけで完了!




ポイント③:
上記②の評価のほかに、学校の評価などのコメントを残せるように実装


フェイスブックとツイッターアカウントでコメントを残せるようにしたいと思ってます。
現在方法を模索中。
下記イメージはワードプレスデフォルトのコメント機能に少しCSSに手を入れただけの状況。



ポイント④:
やはりコメントは嫌だという人のために体験談送信フォームを実装




今のところは、このような感じです。

残りあと2週間、今週はサーバーにアップしてみる予定。
やはりdreamweaver5.5だと動的ファイルの関連付けができるから、仕事が早い!


<現時点で実装したプラグイン>
・My Category Order
⇒ワードプレスのカテゴリーを自分の好きな順序に入れ替えることができます。
 そんなのできて当然という機能でありながら実装されていないので。。

・Contact Form 7
⇒言わずと知れた神様的な問い合わせフォームです。
 ワードプレスの問い合わせフォームといえばこれしかないです。
 日本語環境だし、CSSの加工も簡単でし、開発した人は神ですね。

・Custom-More-Link-Complete
⇒WordPressのデフォルトは、投稿記事画面でmoreタグを挿入すると(そのようなボタン
があるので押すとmoreタグが自動的に貼りつきます)、「続きを読む」という感じになり、
「続きを読む」というボタンを押すと分割後の記事が出てきます。
「続きを読む」ボタンを押したあとは、分割後の記事ではなく、記事全てを表示するように
実装するためのプラグインです。

・WP-PostRatings
⇒記事に評価をつけられるプラグインです。
 上記ポイント②で実装したものです。
 評価順に記事をサイドバーなどに表示することもできます。

・AStickyPostOrderER
⇒投稿した記事(学校紹介ページ)に関して、順序の変更を可能としたプラグインです。
 ワードプレスの基本はブログスタイルなので通常は投稿日順になってしまいますが、
 今回はCMSサイトを目指したので、注目させたい学校を一番上にもってこれるようにしています。


その他SEO系のものは割愛してます。


<これがなかったらやばかった>

すばりこの本です。
今回は、最新のtwentyelevenではなくてtwentytenをベースに作成しています。
この本に何度助かれたことか。
表紙は地味だけど、世界一周旅行でも持参しているくらい
かなり重要度が高い神様的な本です。

twentytenのcssをはじめとして、なにからなにまで全てのコードが注釈付きで載ってます。
この本がなければスピードダウンしてました。

基本からしっかりわかる WordPress 3カスタマイズブック (Web Designing Books)
大藤幹
毎日コミュニケーションズ
売り上げランキング: 75603

2011年7月18日月曜日

Project in フィリピン①


フィリピンにきて2週間程度たち、やっと生活にも落ち着いてきたので、早速World Web Developer Projectの第一弾として、Webサイトの構築を開始した。

どうせ作るならば、フィリピンに関連したサイトということで、
その名も、「オンライン英会話比較サイト」 とした。

最近オンライン英会話は、何十社も参入してきており、競争が激化している。

オンライン英会話とは、基本的には、フィリピン人とSkypeでマンツーマンの英語レッスンをするというスタイルだ。


【オンライン英会話というビジネス】
フィリピンにきて、だいぶ相場が見えてきたので、まずは収益構造をみてみたい。
もちろん推測の域だが、あながちずれてもいないと思う。


<人件費>
フィリピン人の日給は、800円程度。
オンライン英会話の生徒が払う月謝の相場は、毎日30分程度話して、月額6,000円~7,000円程度。
(毎日話せるというのがセールスポイント)

フィリピン人の時給は、100円/時として、
基本的に、全員が毎日受講するのは不可として、平均月10回程度レッスンをうけ、1レッスン30分とした場合、合計で300分(5時間)。
これをフィリピン人の時給に当てはめると、実働500円/月となる。

ここからの試算は、完全に推測の域、間接固定費を考えたい。


<事務所>
宿の相場が、一日300ペソ(600円)、多く見ても一カ月間に50,000円程度で事務所が借りられる。

<ネット回線など>
ネット回線の確保が、こっちのネット喫茶の相場からみて、月10,000円。
電気代も、多くみて月10,000円。
つまり合計20,000円


<<試算>>

■前提事項
・全生徒が平均3日に一度(月10回)レッスンをうけ、1レッスン30分とする
・初期費用や法人税など、その他細かい費用は、勘定しないこととする
・日本人の人件費は、管理費のみとし、フィリピン人の総人件費の5倍の費用とする




ちなみに、生徒の募集は、アフィリエイト等で一人あたり3,000円をASPへ払えば集まるとして、100人集めるのには、3,000円×100人=300,000円となる。

そういった意味では、初期費用や国境の壁を無視すれば、ビジネスとしては非常に成り立つスキームだ。


【構築するサイト】
サイトを構築しようとした場合、大きく2つの可能性がある。

1)オンライン英会話学校の比較サイト
2)生徒と先生のマッチングサイト

後者は、英会話スクールというスキームではなく、Facebook等のプラットフォーム等を活用して、スクール形式ではなく、「英語を習いたい日本人と英語を教えたいフィリピン人」をマッチングさせることを可能とするサイトだ。
両者がFacebookのプロフィールから投稿して、マッチングさせる。

ただし、後者に関しては、フィリピン人への資金送付の問題等もあり、どうみてもハードルが高くメンテナンス性も考えて、早速挫折。
今回は、前者のサイトに取り組みたいと思う。


<サイトの基本構造>
・オンライン英会話学校のクチコミサイト
・ワードプレスをベースとしたCMSサイトとして構築
・各オンライン学校の評価をランキング
・各タグ(値段が安い・試験対策あり等)でソートできるようにする
・クチコミはFacebookやツイッターなどのアカウントで可能とする


<作り方>
・XAMPPを使って、ローカル環境でワードプレスサイトを構築(ベースはPHP)
・DreamWeaver5.5にバージョンアップを行い、ワードプレスの動的ページを
 読み込みさせて、作成速度を向上させる(DreamWeaver5以降の新機能)
・あとは、ワードプレスのプラグインをフル活用


ということで、今週以降は、このサイト作成に取り組みます。

作成工程は別途アップします。


今回のサイト構築は、自分のためにやっていますが、サイト構築をしたい方がいればぜひともご連絡をお願いします。