チュートリアル Archive

CASTAGEのお問い合わせページにAJAX＋PHP＋MySQLのカレンダーを設置しようとしております。

その序章としてデータベースを構築で必要なphpMyadmiのインストール方を備忘録的に載せますね。

１．本家より最新版（現時点は3.2.5）をDL。

基本はzipファイルをダウンロードしれば良いと思います。

2．サーバーに「phpmyadmin」ディレクトリを作成

3．ダウンロードしたファイルを解凍して上記作成したディレクトリにUP

※PHPファイルのパーミッションを700にする必要があります。

UP前にFTPクライアントの設定をしておくことをお勧めします。

下記はFFFTPの設定方法。

4．設定ファイル保存用ディレクトリの作成

「phpmyadmin」ディレクトリの直下に「config」ディレクトリを新規作成します。

5．セットアップ画面にアクセス

https://ドメイン名/phpmyadmin/setup/ にアクセス。

例：https://castage.net/phpmyadmin/setup/

下記の画面が表示されるの、 「Force SSL connection」の「option」をクリックしてデータベースとのSSL通信の設定をしましょう。

6．セキュリティー設定

「Security」タブをクリックし、「Force SSL connection」にチェックを入れ、「保存する」をクリックします。

7．データベース設定の追加

「New Server」をクリックし、データベース設定を追加します。

8．基本設定

「Basic settings」タブメニューにてphpMyAdminで管理するデータベースの設定を入力。

Verbose name of this server→ホスト名

Server hostname→ホスト名

User for config auth→空白

9．サーバーコンフィグ

「Server configuration」タブメニューでphpMyAdminで管理するデータベースの設定を入力し「保存する」ボタンをクリック。

Show only listed databases→データベース名

10．言語設定

「Default language」を「日本語」に変更し、「保存する」をクリック。

11．コンフィグファイルの再アップロードと設定ファイルのパーミッション設定

先ほど作成した「config」フォルダの下にある「config.inc.php」ファイルを一度ダウンロードして「phpmyadmin」フォルダの下にアップロード。

設定ファイルの作成に使用した phpmyadmin/setup/index.php ファイルのパーミッション設定を「600」に変更。

12．phpMyAdminにアクセス

https://ドメイン名/phpmyadmin/ にアクセスし、 phpMyAdminの画面が表示されたらOK。

※「mcrypt 拡張をロードできません。PHP の設定を確認してください」と表示されますが、動作に問題はないのでスルー。

お疲れ様でした。

母体のページにてホームページ素材のお裾分けをしようと企てております。

お気に召しましたらお好きにお持ちください。

CASTAGEのフリー素材←クリック

このブログで紹介してるFlash待受やPHPのテクニックなど載せていこうかと思ってます。

SEO対策によいからと、以前までパーマリンクに.htmlをつけていました。

設定はこんな感じ。

/%category%/%post_id%.html

しかし上記の設定でSEO効果が得られる根拠はないと言うことと、トラブルが多いようです。

ここのブログもサーバーを引っ越した後パーマリンク構造を引き継がなかったため検索エンジンから飛んでくる場合表示されないページが多発しています（涙

検索ワードとしてFlash系やWordPressのカスタマイズ系があがってきていたので安心していたのですが、クリックしてみると

<?php

/**

* Front to the WordPress application. This file doesn’t do anything, but loads

* wp/wp-blog-header.php which does and tells WordPress to load the theme.

*

* @package WordPress

*/

/**

* Tells WordPress to load the WordPress theme and output it.

*

* @var bool

*/

define(‘WP_USE_THEMES’, true);

/** Loads the WordPress Environment and Template */

require(‘./wp/wp-blog-header.php’);

?>

こんな感じです。

PHPファイルをごり押しでhtmlとして読み込ませようとしているのが原因らしく、htaccessに

AddType application/x-httpd-php .php .html

を入れると対応できるようになるような文献もありましたがGMOサーバー（SD）では無茶五郎でした。

待受やFlashで検索してくれてる方が多いのですが残念です。

今後はプラグインのNice Trailingslashit（最初Slash ItがShitに見えた）＋パーマリンク設定（/%postname%/）で行きたいと思います。

ちなみにパーマリンク設定は最後にスラッシュ（”/”）を入れなきゃいけないとかいけなくないとか。

下記文献をお探しの方は現在のページをご紹介差し上げます。

WordPressのヘッダー部にロゴ挿入

古→http://www.castage.net/blog/headermod.html

新→http://castage.net/blog/change_header/

Flash Lite 1.1でランダムで画像が変わる待ち受け

古→http://www.castage.net/blog/idol_screen.html

新→http://castage.net/blog/idle_screen/

携帯Flash待ち受け用のアナログ時計を作ろう

古→http://www.castage.net/blog/how_to_create_analog_watch.html

新→http://castage.net/blog/how_to_create_analog_watch/

基本はFireFoxを使っているので気がつかなかったが、前回UPしたCSSにIEでは無効なものがありました。

下記詳細と対処方法を載せておきます。

■使えなかったスタイルシート

ブラウザ幅の最小値と最大値を設定するもので

・min-width

・max-width

の2点。

■回避方法

IE5から使用できる｢expression｣（IE独自のDynamic Propertyでスタイルシート内からJavaScriptを実行できるという素敵なものです。）をCSSファイル内に記述する。

■記述例

幅を700pxから1260pxに制限したい場合

前回のチュートリアルはテーブル画像に限界があるので横幅のMAX値を500pxでして満足して他のですが、IEで見たらあわわわわでした。

現在ホームページリニューアル中なんですがコンテンツに幅が可変の影付きで角丸のテーブルをつけることにしました。

■設置対象ページ

今回はホームページ制作のフロー詳細を素敵なテーブルで作っていきたいと思います。

■必要な物

1.テーブル用画像

2.CSS

3.やる気

1と2につきましてはチュートリアルを書きますが3については何とかしてください。

それではまず画像を作りましょう。

サイズは幅が可変ですので特に気にしなくてもOKですが、実際設置するページに配置するのが良いでしょう。

1.Photoshopの角丸矩形ツールで上記のように角丸矩形を描きます。

（今回は半径6pxで作成しました）

2.グラデーション・ドロップシャドーを追加

3．画像を刻む

7つに刻んで保存

・上左・・・tl.png

・上右・・・tr.png

・中左・・・ml.png

・中右・・・mr.png

・下左・・・bl.png

・下右・・・br.png

・中央・・・ms.jpg

CSSを書き込む（iG:Syntax Hiliterがうまくいかないので見にくくてすいません）

.dialog {

width:80%;

margin:0px auto;

min-width:20em;

max-width:500px; /* お好みにより編集してください */

color:#333;

width:expression(document.body.clientWidth > 502? “500px” : “auto”);

}

.dialog .hd .c,

.dialog .ft .c {

font-size:1px;

height:18px;

}

.dialog .ft .c {

height:14px;

}

.dialog .hd {

background:transparent url(images/tl.png) no-repeat 0px 0px;

margin-right:19px; /* 右角スペース */

}

.dialog .hd .c {

background:transparent url(images/tr.png) no-repeat right 0px;

margin-right:-18px; /* 上余白からの引き込み */

}

.dialog .bd {

background:transparent url(images/ml.png) repeat-y 0px 0px;

margin-right:18px;

}

.dialog .bd .c {

background:transparent url(images/mr.png) repeat-y right 0px;

margin-right:-18px;

}

.dialog .bd .c .s {

margin:0px 10px 0px 9px;

background:#ededed url(images/ms.jpg) repeat-x 0px 0px;

padding:1em;

}

.dialog .ft {

background:transparent url(images/bl.png) no-repeat 0px 0px;

margin-right:18px;

}

.dialog .ft .c {

background:transparent url(images/br.png) no-repeat right 0px;

margin-right:-18px;

}

/* テーブル内コンテンツ */

.dialog h1 {

/* ヘッダー */

font-size:2em;

margin:0px;

padding:0px;

margin-top:-0.6em;

}

p {

font-family:Arial, ‘ＭＳ Ｐゴシック’, sans-serif;

}

.dialog p {

margin:0.5em 0px 0px 0px;

padding:0px;

font:0.95em/1.5em Arial, ‘ＭＳ Ｐゴシック’, sans-serif;

}

html>body .dialog pre {

font-size:1.1em;

}

完成系はこんな感じです。

めんどくさいという人はここから全部ダウンロードしてください。

パスワードは『castage』です。

かっこいいアナログ時計の待ち受けを作りましょう。

必要なもの

1.かっこいいアナログ時計の画像

2.ちょっとしたFlashの知識

以上。

下ごしらえ編はざっくりとしたPhotoshopCS3を使用した画像の作成方法を載せます。

完成イメージはこんな感じです。

完成イメージ

1.新規ファイルをキャンバスサイズ240*320で開く。（携帯の画面サイズにより変更してください）

2.ガイドとなる円を描く

3.ガイドに沿って時計盤を作成する

4.無駄な機能の3つの円を配置

今回は無駄に月齢や生活防水機能がついているので3つの円を配置します。

12時、3時、6時、9時は短くなってます。

コツとしては12時と6時を作成しマージ、マージしたものを複製しCWに90°回転しまたマージ、またマージしたものを複製し30°ずつ回転していくときれいな円になります。

5.金属エフェクトを追加する

円達は下記のような設定でメタルさを出します。

5.無駄な円達にディテールを作成

新規ファイルを追加し、長い白線（6*15px）を均等に12個配置し、その間に短い白線（2*10px）を配置（下図04参照）

6.作成したベースを円形にする

ディテール用ベースをキャンバスの中心に配置（Ctrl+CをしてCtrl+Vをすると中央に配置されます）し、フィルター　＞　変形　＞　極座標　＞　OK

7.ディテールを追加する

最初のファイルに上記で作成したレイヤーをコピーしリサイズする。

（左の円の中身はなんとなく変えてあります。）

8.針や数字を入れる

これで3つの円達は完成。

9.センターにポイントを追加しガイドをはずして完成

お疲れ様でした。

アレンジ次第で無限の可能性を秘めています。

短針、長針、秒針についてはFlashのベクトルで作成したほうが仕上がりがきれなので次号（？）Flash作成の際に解説いたします。

異国にいたときは電車に乗っても、レストランに行っても、友達と遊んでいても通話以外に誰かが携帯電話をいじっているという光景を目にしなかった。

だって電話だからね。

今どうかは知らないが、携帯は電話をする道具として確立され、メールやWebはマイコンを使用するものだと決め事のようになっていた。

2年前にアメリカに滞在していたときはテキストメールといって日本で言うショートメールやCメールのようなものを多少使うようにはなってきてはいたが、まだまだ日本のように携帯に依存してはいない。

現在日本でベンチャー企業を立ち上げWebコンサルもやっていて感じた。

携帯はアツい。

遅いですかね？

ということで携帯用サイトを構築しました。

しかし、ユーザーに｢こっちがPC用アドレスですよ、そしてこっちが携帯用です。｣なんていうのもまどろっこしいですよね。

1つのアドレスを浸透させたいじゃないですか。

ですので、アクセスの端末によってサーバーサイドで判別することにしました。

User-Agentを取得して表示させるページを指定するするプログラムでも作ろうと思ったら.htaccessを作成するだけでいけるみたいですね。

遅いですかね？

以下がそのソース

①キャリアごとに表示するページを変えたい版

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

Options +FollowSymLinks

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} DoCoMo

RewriteRule ^$ http://hogehoge.com/i/index.html [R]

RewriteCond %{HTTP_USER_AGENT} SoftBank

RewriteRule ^$ http://hogehoge.com/s/index.html [R]

RewriteCond %{HTTP_USER_AGENT} UP.Browser

RewriteRule ^$ http://hogehoge.com/au/index.html [R]

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

*User-Agentは変わる場合がありますのでその都度変更して下さい。

②キャリアに関係ない版

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank)

RewriteRule ^$ /m/ [R]

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□作業内容

1.メモ帳などに上記ソース（①または②）を貼り付ける。

2.赤字の箇所を任意のアドレスに変更する。

3.ファイル名をhtaccess.txtで保存する。

4.FTPソフトで振り分けたいページのあるディレクトリにhtaccess.txtをアップロードする。

5.｢htaccess.txt｣を｢.htaccess｣（*頭のドット【.】を忘れずに）にリネームする。

6.携帯でアクセスしてリダイレクトされているか確認する。

参考までに我が社の環境です。

PCサイト　http://castage.net/

携帯サイト　http://castage.net/mobile/index.swf　（フラッシュインタラクティブ再生）

ルートディレクトリに下記のソースを.htaccessに記述してアップロードしました。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank)

RewriteRule ^$ /mobile/index.swf [R]

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

作業は簡単でしたが、この備忘録に時間がかかりましたっていう。

旅行に行った画像を携帯を開くたびにランダム表示したいとおねだりされたので作ってみた。

依頼された画像は次の4点。

行ってみたいな私かて。

さておき作業手順。

1. Flash Lite 1.1ファイルを新規作成（キャンバスのサイズは240ｘ400に設定）

2. action、images、BGのレイヤーを作成

3. imagesレイヤーに画像を挿入

4. actionレイヤーにActionScriptを書き込む

fscommand2(”SetQuality” , “high” );　//高画質設定

i=random(4)+2;　//変数iに画像のフレーム番号をランダムに格納

gotoAndStop(i);　//変数iのフレームに移動、再生

これだけ。

今後は文字とかカレンダーもつけてみよう。