横浜のホームページ制作スタジオFIXの社長ブログ

卒業おめでとう

admin — Mon, 08 Mar 2010 10:06:48 +0000

たくさん飲み、
たくさん食べ、
たくさん笑い、
たくさん泣き、
たくさん騒ぎ、
横浜中華街の一角、まるで我が家のような空間。
これから一生付き合うであろう仲間達とめぐりあわせてくれた場所。

近所から苦情が出るほど騒いでも、
ビルが揺れるほど笑い転げても、
癇癪起こして泣き叫んでも、
「普段頑張ってるんだから、ここではそれでいいんだよ！」と
5年間もの間、どんな時も私を受け止めてくれた友人に心から感謝しています。

数えきれない程の思い出に心よりの感謝を込めて、
卒業おめでとう!!!!

ゆっくり、ゆったり、これからもずっと一緒に。

admin — Mon, 08 Feb 2010 09:59:51 +0000

足掛け１ヶ月半くらいも入院していた友人が
ようやく退院する運びとなりました。

最初の快気祝い、鮟鱇鍋を用意してみんなで待っていたのに、
退院した翌日に暴飲して即再入院しちゃったので
本人不在、みんなで鮟鱇鍋食って終わったのだが、
今度は体調が安定しているようで、ほっと一安心。

お花見しようね！
温泉行こうね！
BBQしようね！
恒例ツアーも参戦しようね！

ゆっくり、ゆったり、これからもずっと一緒に遊ぼうね！

ローカルMac環境に構築したWordPressにVirtualBoxのゲストWindowsでブラウザアクセス

admin — Fri, 05 Feb 2010 09:42:47 +0000

MacOSXローカル環境にMAMPを使ってWordPressをインストールすると、
ローカルMacのWordPressのURLは
http://localhost:8888/wordpress/
のようになります。

でもせっかく VirtualBoxでMacOSXにWindows7をインストールしてあるのに、
「http://localhost:8888/」のままでは、
VirtualBoxのゲストOSのWindowsから
ホストOSのMacに構築したWordPressにブラウザアクセスできません…。orz

そこでローカルMac環境に構築したWordPressへ、
VirtualBoxのゲストWindowsでもアクセスできるようにしてみました。

[前提条件]
1. MacOSXに「MAMP」がインストールされている
2. MacOSXに「WordPress」が構築できている
3. MacOSXに「VirtualBox」がインストールされている
4. VirtualBox上で Windowｓが起動する

1. Macの設定

システム環境設定＞共有＞Web共有を「切」にする

2. MAMPの設定

Applications＞MAMP＞conf＞apache＞httpd.conf を修正する

219行目あたりポート番号の指定を「80」に変更 Listen 8888 ↓ Listen 80
一番下に以下の4行を追加する ServerName localhost:80 DocumentRoot "/Applications/MAMP/htdocs"

MAMPを起動中であれば再起動する。
再起動しないと、設定が変更されません。

3. VirtualBoxの設定

設定＞共有フォルダ＞共有フォルダの追加で
MAMPの「htdocs」フォルダを追加する。

フォルダのパス：/Applications/MAMP/htdocs
フォルダ名：htdocs（何でもOK）

4. ゲストOSでWordPressへアクセス

共有フォルダの追加が完了したら、VirtualBoxを起動。
IEを立ち上げて…以下のURLにアクセス。
http://192.168.1.2/wordpress/
「wordpress」部分は、WordPressディレクトリ

わーい!!! (^-^*)
ちゃんとWordPressが表示されました!

Mac/Safari、Mac/FireFox、
Win/IE6、Win/IE7、Win/IE8 を同時に立ち上げたらこんな感じ!

もちろんWordPressだけでなく、htmlファイルも同様にブラウザアクセスできるので
/Applications/MAMP/htdocs/
の中に「project01」というフォルダを作成してWebデータを格納すれば、
http://192.168.1.2/project01/
でアクセスすることができます。

MacOSXでホームページを制作するなら、ぜひ手に入れたい環境ですね！（・∀・）

横浜のホームページ制作スタジオFIXの社長ブログ、WordPressテーマを変更しました

admin — Wed, 03 Feb 2010 15:05:06 +0000

ビックリしちゃいましたか？　(^-^)
横浜のホームページ制作スタジオFIXの社長ブログ、
新しいWordPressテーマにお着替えしました〜。

シンプルなWordPressテーマを作りたかったのですが、
こう色々貼り付けてると…ちっともシンプルには見えないですね。(´･ω･)　

きちんとデータを整理したら、また無料WordPressテーマとして
このデザインも配布する予定ですので、お楽しみに〜!

AmazonEC2、ElasticIPsを付け替える

admin — Tue, 02 Feb 2010 00:14:17 +0000

ご親切な名無しさんのおかげで
「Amazon EC2、EBS(Elastic Block Store)を使ってみた」が
超リスキーだったことを、ご指摘から3ヶ月目でようやく理解できまちた。
理解力低すぎ。てへ。

ls /dev/sd* で、
デバイスが認識されているか確認したまでは正しかったみたいなのですが、
その後に私がとった行動は、
# yes | mkfs -t ext3 /dev/sda1
# mount /dev/sda1 /vol
（↑わかる人ならズッこけるはず）

「sda1」は、Linuxがインストールされている「/」なので、
間違えて「mkfs」とかしちゃったら、
Linuxが起動しなくなっちゃうんですって。
ひぃぃぃぃぃぃぃぃぃぃぃ…。

気に入るとすぐに連打したくなるタチのド素人が
よくもまぁ、今日の今日まで「mkfs!! mkfs!!」しなかったもんだわ…。(:_:)
「sudoさん、スー！」とか言いながら、とっくにやっててもおかしくないのに。

神にと名無しさんに見守られているうちに、
健康なEBSを手にいれなくっちゃ！

しかし…思い立ったらなお憂鬱。
EBS最大の魅力は、つけかえがワンタッチだということなのに
なんせ私のEBSは地雷原。
そのSnapshotsを保存したところで地雷原の複製にしかならないケロ！
仕方ないので、昔の記憶を辿りながらDebianをゼロから再設定…。orz

新たにインスタンスを立ち上げる

1. AWSで新たにインスタンスを立ち上げる
2. SSHでログインして、Debianを設定する
3. AWSで10GBのEBSを作成、Statusが「Available」になるのを待つ
4. 新しいインスタンスに作成したEBSを「Attach Volume」する際に「sdf」を選択する
5. 再びSSHでログインして以下コマンド

AWSで作成したEBSボリュームが見えるか確認 # ls /dev/sd* /dev/sda /dev/sda1 /dev/sda2 /dev/sda3 /dev/sdf 上記手順4 で選んだ「sdf」が表示されればOK
「sdf」をフォーマットする # yes | mkfs -t ext3 /dev/sdf
EBSをマウントさせるためのディレクトリ作成 # mkdir /vol　
いざ合体 # mount /dev/sdf /vol
合体先へ移動 # cd /vol
合体先へ移動 # ls lost+found　だ・け・が表示されればOK

6. 「vol」以下にバーチャルドメインを設定
7. MySQLを「/vol/lib/mysql」で動くように設定
8. 最後に「vol」の中に、htmlファイル一式をアップロード。

Elastic IPsをつけかえる

1.古い方のインスタンスにくっつけているElastic IPsを切り離す(Disassociate)。
切り離すだけ。リリース（Release Address）しちゃダメ！
2.新しい方のインスタンスに切り離したElastic IPsをくっつける(Associate)。

ぽちっとなで終了ーー!!

名無しさん、おかげさまで健康なEBSを手に入れることができました。
本当にどうもありがとうございました！(^-^)ノ

AmazonEC2で、WordPressのMySQLをバックアップ

admin — Sun, 31 Jan 2010 19:59:27 +0000

WordPressのデータベース、MySQLをバックアップするには
有名な「wp-db-backup」というプラグインがありますが、
mysqlコマンドを使ってバックアップ→復元する方法を試してみました！
Webデザイナーのくせに、あたしってば勇敢！

MySQLをバックアップ（保存）する

AmazonEC2へSSHログイン # ssh -i EC2key.pem root@ec2-XXXX.amazonaws.com
MySQLディレクトリに移動する（私の場合 /vol/lib/mysql） # cd /vol/lib/mysql
MySQLを停止する # /etc/init.d/mysql stop
MySQLをバックアップする # mysqldump -u root -pパスワード DB名 >　適当なファイル名.sql （例） mysqldump -u root -pPASSWORD WP01 >　WP01_Backup.sql 「WP01」というデータベースを「WP01_Backup.sql」というファイル名で保存する。 -pとパスワードの間にスペースはいれちゃダメ！
バックアップをとるだけならこれで終了。MySQLを再起動 # /etc/init.d/mysql start
MySQLディレクトリの中を確認する # ls 「WP01_Backup.sql」が表示されていればOK

MySQLを復元（リストア）する

AmazonEC2へSSHログイン # ssh -i EC2key.pem root@ec2-XXXX.amazonaws.com
MySQLディレクトリに移動する（私の場合 vol/lib/mysql） # cd /vol/lib/mysql
復元したいファイルを確認する # ls 「WP01_Backup.sql」があればOK
MySQLを停止する # /etc/init.d/mysql stop
MySQLのrootユーザになる # mysql -u root -p
MySQLのrootのパスワードを聞かれるので… Enter password: rootのパスワード
新しいデータベースを作成する（例：WP02） mysql > create database WP02;
データベースが作成されたか確認する mysql > SHOW DATABASES; +--------------------+ | Database | +--------------------+ | WP02 | +--------------------+
MySQLモードを終了する mysql > ¥q
Linuxに戻ったら… # mysql -u root -pパスワード DB名 >　復元ファイル.sql （例） mysql -u root -pPASSWORD WP02 >　WP01_Backup.sql 「WP01_Backup.sql」というファイルを「WP02」というデータベース名で復元する。ここでも、-pとパスワードの間にスペースはいれちゃダメ。
MySQLをスタートする # /etc/init.d/mysql start

完璧っ!! （・∀・）

サーバ乗り換え＆WordPressを移行なら…
旧サーバで「mysqldump」して「.sqlファイル」をFTPでダウンロード。

新サーバの「mysql」ディレクトリに、
「.sqlファイル」をFTPでアップロードして、新しいDB作成。
最後に「mysql -u root -pパスワード DB名 >　適当なファイル名.sql」すればOK。

これさえ覚えておけば、WordPressのお引っ越しも楽勝ですね！

WordPress テーマ作成の基礎知識

admin — Sat, 30 Jan 2010 09:35:50 +0000

WordPressテーマを自作する場合、
ゼロから全て自力で作るのは、さすがに難しいと思いますので、
最初はデフォルトテーマ「WordPress Default」の
カスタマイズから始めてみるのがオススメです。

WordPressテーマのディレクトリ

自作するWordPressテーマは、
WordPress＞wp-content＞themes
以下に「テーマフォルダ」を作成して関連ファイルを格納します。

WordPressテーマのスタイルシート

WordPressテーマのスタイルシートには、テーマ名、作成者などを記載します。
style.cssに記載されたテーマ名、作成者情報が
WordPressダッシュボード＞外観＞テーマに表示される仕組みになっています。

以下は、このブログで無料配布している
WordPressテーマのスタイルシートの書き出し部分です。

@charset “utf-8″;
/* CSS Document */
/*
Theme Name: StudioFix_Type006
Description: 横浜のホームページ制作Studio FIX Inc.
Author: Studio FIX Inc.
Author URI: http://www.studio-fix.com/
*/

Theme Name:テーマ名
Description: 概要
Author: 作成者
Author URI: 作成者のホームページURL

[スタイルシートを見てみる]

テンプレート用phpファイルについて

WordPressテンプレートは、このようにヘッダ、フッター、サイドバーなど
モジュール化（部品化）された構成になっています。

header.php — 共通ヘッダ用モジュール
footer.php — 共通フッター用モジュール
sidebar1.php — サイドバー用モジュール
comments.php — コメント投稿用モジュール
index.php — トップページ用
single.php — 個別記事用
page.php — 固定ページ用
archive.php — 月間アーカイブ用
category.php — カテゴリ用
search.php — 検索結果用
searchform.php — サイドバーの検索フォーム用
tag.php — タグアーカイブ用
404.php — NotFound用
style.css — テーマ用スタイルシート
screenshot.png — テーマのサムネイル画像

これらのファイルのファイル名を変えることは出来ません。
WordPress指定のファイル名ですので、
ファイル名を変えてしまうと、WordPressが正しく動作しなくなります。

トップページ用のテンプレート

テーマフォルダ内に「index.php」が無いと、WordPressは正常に動作しません。
「index.php」は必ず作成する必要があります。

WordPressのデフォルト設定では新しい記事を投稿すると、
トップページが更新され、新しい記事が一番上に表示されます。
この場合のテンプレートが「index.php」です。

WordPressでは、トップページを固定ページにすることもできます。
企業のサイトをWordPressで構築したい場合などは、
トップページを固定して利用します。

そうしないと例えば「福利厚生について」という記事を作ったとたん
会社のトップページが「福利厚生について」に書き換わってしまいます。
それも、アリといえばアリですが…（笑）

このようにトップページを固定して使う場合のテンプレートが「home.php」となります。
トップページを固定ページにしないのであれば「home.php」の作成は不要です。

テーマフォルダ内に「index.php」と「home.php」
どちらも格納されている場合は、
WordPressは「home.php」を優先します。

以上、WordPress自作テーマを作成するときに
知っておくべき基礎知識編でした。
どうぞ素敵なテーマを作ってくださいね〜。(^-^)ノ

所要時間10分、Photoshopで作る飛び出たド派手文字

admin — Fri, 29 Jan 2010 03:19:15 +0000

このような飛び出た文字をIllustratorで作る場合、
「FILTERiT」というプラグインを使えば30秒で出来ちゃうんですが、
このために2万円以上もするプラグインを購入するのはもったいない。

そこで、Photoshopを使って所要時間10分で作る
飛び出たド派手文字チュートリアルです。
ネットショップのバナー作成などに重宝する小技ですYO!（・∀・）

Photoshopで縦500×縦500ピクセルの新規ファイルを作成します。

描画色を黒にして「ポイント10倍キャンペーン」と
テキストレイヤーを作成するのですが、この時
・ポイント
・10
・倍キャンペーン
は、それぞれ別のレイヤーにします。

サンプルではメリハリ感を出すために、
「10」の書体を変えフォントサイズを大きくしています。
この時のポイントは、ウェイトの太い書体を使うこと。

ここでは、「ポイント」「倍キャンペーン」に新ゴU（35pt）、
「10」に小塚ゴシックH（80pt）を使用しています。

レイヤーパレットで「ポイント」レイヤーを選択して
レイヤー効果＞グラデーションオーバーレイ…をクリックします。

上図のようにグラデーションを設定します。
描画モード：通常
不透明度：100％
グラデーション：#edd002〜#fffe7e
スタイル：線形
角度：90度

次に境界線を上図のように設定します。
サイズ：4px
位置：外側
描画モード：通常
不透明度：100％
塗りつぶしタイプ：カラー
カラー：#e60013

「ポイント」という文字がこうなります。

「10」、「倍キャンペーン」レイヤーも同様のレイヤースタイルを適用します。
これだけで十分な気がしてきましたが、もう一手間加えます。

この3つのレイヤーをグループ化して複製し、
元の「グループ1 のコピー」を不可視にします。
（目玉マークをクリックすると不可視になります）

「グループ1」を選択してグループを結合します。
レイヤーサムネールの上で
Macなら「Commond」、Windowsなら「Ctrl」を押したままクリックして
「グループ1」の選択範囲を選択します。

選択範囲＞選択範囲を変更＞拡張…＞拡張量を「6px」にします。

文字の周りに点線が表示されています。
選択範囲が文字より一回り大きくなりました。

「グループ1」の上に新規レイヤー「レイヤー1」を作成し、
描画色「黒」で塗り潰します。
「グループ1」レイヤーは不可視にしておきましょう。

ここで「グループ 1 のコピー」を可視化してから、
黒く塗りつぶした「レイヤー1」を上に5pxずらします。
なんとなく飛び出た感が出てきました！（・∀・）

黒く塗りつぶした「レイヤー1」を選択して
編集＞変形＞ゆがみ効果で
右上と左上のポイントをそれぞれ内側にドラッグして
台形っぽく変形させます。
ますます飛び出た感が増してきました！（・∀・）

最後に光をブラシで描き足せば、
とたんにネットショップのバナーらしくなりました！（・∀・）

グラデーションや、線の色、影の色を変えると
色々なバリエーションの飛び出た文字が作成できます。

Photoshopでも所用時間10分程度で、
こんなに簡単に飛び出た文字が作成できちゃうので、
ネットショップのバナー作成などに、ぜひお試しくださーい！(^-^)ノ

まぁ…私くらいになるとやっぱり面倒くさいので、
迷わず「FILTERiT」を使いますけどね！（笑）

今どきのAmazonEC2は、電話が無いと申し込めない

admin — Thu, 28 Jan 2010 10:00:27 +0000

2009年3月に「Amazon EC2/S3を申し込んでみた」という
エントリーを書きましたが、EC2の申込み方法が変わっていたようです。
どうやら今どきのAmazon EC2は、
電話がないと申し込めないらしいのです…。(´･ω･)　

Amazon Web Service、アカウントを取得してから、「Amazon EC2」へアクセス。
ここまでは以前と同じでした。
右上の「Sign Up For Amazon EC2」の黄色いボタンをクリック。

Amazon EC2マスターの名にかけて
サクサク突き進んでいこうかと思いきや…

こんな画面が表示されまちた！
えええええええええええええ!!
「Call Me Now」って、英語なんか喋れないYO!!!! (:_:)

ここでしばしフリーズ。
が、このまま固まっていても英語が喋れるようになるわけではないので、
勇気を出して前に進んでみることに。

Country Code: Japan (+81) を選択
Phone number: アカウント取得時の電話番号が入っているのでそのまま
「Call Me Now」をクリック。

急に画面が変わりました。
画面上に大きく出現した数字。
これをあたしにどーしろと…?! (◎_◎;)
再度フリーズ。

「ハイ！　ハワユー！」と練習を始めた瞬間、
電話がなって心臓飛び出た。
ホントにかかってきちゃったYO!!!　と思ったら音声ガイダンスでした。

震える手で受話器のボタンを「3855」とプッシュ。
「最後にシャープを押してください」とは言われなかったけど
（言われててもわからないけど）ホントにこれでいいのかしら？

押し終わったけど、まだ向こうで何か喋ってる。
やっぱり違ったのかも!?

「スリー、エイト、ファイブ!! ファイブ!!」と叫ぼうとした瞬間、
突如、画面が切り替わりました。

ど・う・や・ら!! 成功したらしい!!
「Your indentity has been verified successfully.」

電話とブラウザ画面がリアルで連動してるYO!!
すごーーーーーーい!!
かっこいいーーーーーーーー!!
感動ーーーーーーーーーーーーーっ!!

ちょっと嬉しくなっちゃったので、
違うアカウントを取得して、今度は、iPhoneの電話番号を入力して
「Call Me Now」を押してみたら、
ちゃーんと、iPhoneに電話がかかってきました。

ここでまた数字をプッシュしちゃうと
この快感を再度味わえないのがもったいなくて、
数字を何も押さずに3回続けて電話を切ってみたら…

最大回数を超えたので、12時間はこの操作にトライできません。
って、怒られちゃいまちた…。(･_･ゞ

なわけで、今どきのAmazon EC2は
電話がつながらないと、申込みができないようです。
黒電話の人も、もちろんNG??

申込み画面で感動を味わえるなんて、
Amazonは、やっぱりスゴすぎる。

MacOSXローカル環境にWordPressをインストール

admin — Wed, 27 Jan 2010 06:18:10 +0000

WordPressを動かすためには、
・PHP 4.3以上
・MySQL 4.1.2以上
のサーバが必要です。すなわちこの環境があれば、
ローカルMacでも WordPressが動くということですね！（・∀・）

WordPressテーマを作る際など、
いちいちネット経由で確認しながら作るのは面倒ですよね。
そこで「MAMP」というアプリケーションを使って
MacOSXに WordPressインストールする方法をご紹介します。

MacOSXで WordPressを動かすための手順

1.　MAMPをインストールする
2.　WordPress用のデータベース(MySQL)を作成する
3.　WordPressのインストール準備
4.　WordPressをインストールする

1.　MAMPをインストールする

「MAMP」をダウンロードします。（無料）
18MBくらいありますので、ダウンロードにちょっと時間がかかります。

ダウンロードしたzipファイル解凍して、
「MAMP_MAMP_PRO_（バージョン）.dmg」というファイルを
ダブルクリックすると、インストーラーが起動します。

利用規約に同意できたら「Agree」をクリックします。

↑この画面の中にある「MAMP」フォルダを
ローカルMacのアプリケーションフォルダの中にコピーしたら、
MAMPを起動します。

ブラウザが起動して、このような画面が表示されれば
MAMPのインストールが正常に完了しています。

2. WordPress用のデータベース(MySQL)を作成する

WordPress用のデータベースを作成します。
MAMPのスタート画面上部の「phpMyAdmin」をクリックします。

このような画面が表示されるので
「新規データベースを作成する」部分に半角英数字で
WordPress用のデータベース名を入力し（例：wp01）、
「作成」をクリックします。

「データベース wp01 を作成しました。」という画面になれば、
phpMyAdminでの作業は完了です。

3. WordPressのインストール準備

WordPress | 日本語ページにアクセスして
WordPressをダウンロードします。（無料）

ダウンロードしたzipファイル解凍すると
「wordpress」というフォルダが生成されます。

この「wordpress」というフォルダを
アプリケーション＞MAMP＞htdocs 以下に移動します。

「wordpress」フォルダの中にある
「wp-config-sample.php」のファイル名を
「wp-config.php」に変更したら、
テキストエディタなどで開き、以下の3箇所を修正します。

●24行目あたり
/** WordPress のデータベース名 */
define(‘DB_NAME’, ‘putyourdbnamehere’);
↓
define(‘DB_NAME’, ‘wp01‘);

●26行目あたり
/** MySQL のユーザー名 */
define(‘DB_USER’, ‘usernamehere’);
↓
define(‘DB_USER’, ‘root‘);

●29行目あたり
/** MySQL のパスワード */
define(‘DB_PASSWORD’, ‘yourpasswordhere’);
↓
define(‘DB_PASSWORD’, ‘root‘);

※MySQLのユーザ名とパスワードについて
MAMPの初期設定では、MySQLのユーザ名とパスワードは
root /root です。

4.　WordPressをインストールする

MAMPが起動していることを確認したら、ブラウザのURL入力欄に
http://localhost:8888/wordpress/wp-admin/install.php
と入力して、エンターを押します。

このような画面が表示されたら、
いよいよWordPressのインストールに進みます。

ブログタイトルと、メールアドレスを入力したら
「WordPressをインストール」をクリックします。

成功しました！ WordPress がインストールされました。
もっと何か作業をしたかったですか ?
がっかりさせてゴメンナサイ。これだけです !

という画面が表示されます。
ホントにがっかりするくらい簡単です。
WordPressすばらしすぎます。

表示されているユーザ名とパスワードをメモしたら
「ログイン」ボタンをクリックします。

ログイン画面が表示されるので、上記でメモした
ユーザ名（admin）とパスワードを入力して
「ログイン」をクリックします。

# この画面の「パスワードをお忘れですか？」をクリックしても
# パスワードが記載されたメールを受信することはできません。
# これは、WordPressのバグではなく
# WordPressをローカルMaｃで動かしているからです。

ぱちぱち〜!!
WordPressダッシュボード画面が表示されれば、見事完了です。
画面上部の「サイトを表示」をクリックすると…

ちゃーんと WordPressが出来上がっています。

ローカルMacでのWordPressのURLは
●管理画面…http://localhost:8888/wordpress/wp-admin/
●ブログ…http://localhost:8888/wordpress/
となります。

MAMPの入手から、WordPressのインストールまで
30分程度で完了しちゃいます。
MacOSXでWordPressを動かしてみたい方は
ぜひぜひお試しくださいね。

横浜のホームページ制作 スタジオFIXの社長ブログ