WordPressとPHP関係の仕事上の覚え書き

アウトブレイク！[outbreak]

年末年始休暇中にウェブサービスをひとつ作る！

sho

と、言うことで、本日からちょっと頑張ってます。

でも、ブログを書きながら作業はできない（そんなに器用じゃない）ので、ブログは参考にしたサイトのメモをとりあえず書きながら、あとでまとめようと思います。

まずドメイン取得しました。もともとムームードメインを使っているので、そこでさくっと。でも.comなどで取るべきか、安い.usとかで名前を工夫して取ろうかとか、色々考えましたけど、XOOPSの酒井さんやWordPressの星野さんなどの助言をFacebookで得て決めました。

ムームードメインだと.comで年間950円ですね。サーバーはとりあえず現状のものを使うとして、動くかどうかも分からないウェブサービス作るのに多大なお金はかけられないので、1000円弱ならまあスタートとしてはいいでしょう。

登録型のウェブサービスを作ろうとすると、ユーザーが使うURLが気になるところ。個人的にはexample.com/hoge/とかはなんか好きになれないので、hoge.example.comなどのようにユーザー名のサブドメインが使えるといーなーと思います。

と、言うことで、DNSはムームーじゃ駄目だということがわかります。（ワイルドカードが使えないって意味で）なので、子育て家族のための会員制ブログ-ころぐ（ http://colog.jp/ ）を作っている西川さんがお勧めしていたDozens（ http://dozens.jp ）を使うことにしました。

まずDozensの設定方法は、
・DNSサービス”Dozens”でのドメイン運用開始の流れ | DocumentaryONE（ http://do-one.jp/blog/web-service/dozens/ ）で基本的なことを学習し、

Dozensのワイルドカードの設定方法は、
・ムームーDNSでワイルドカードを使う | mutter（ http://nplll.com/archives/2011/04/dns.php ）で設定しました。

ワイルドカードの設定については、設定後nslookupもうまくいかなかったので、
・無料のネームサーバ「Dozens.jp」を使ってみる | 某氏のたわごと NEXT（ http://blog2.k05.biz/2011/06/dozensjp.html ）の追記で解決しました。

が、しかし、肝心のロリポップ側でDozensのDNSを認識してくれません。新規ドメインの設定でDNSをlolipopに設定しろと言われてしまいます。nslookupをしてもIPアドレスが返ってくるし、pingも通るのでDNSの設定は問題なさそう…

そこで、一旦ムームードメインのDNS設定をDozensからロリポップに変更。しばらく待ったらロリポップ側でドメインの設定ができました。すかさずムームードメインのDNS設定をDozensに変更。少し時間を置いてもアクセスできるので問題なさそうです。

WordPressのマルチサイト化は、以前にもやったことがありましたが、まったく覚えていなかったので（ヲイ
・[058] ロリポップでWordPress <2>マルチサイト化 | WordPress Experiment（ http://experiment.street-square.com/2010/12/06/lolipop-multisite-subdomain/ ）で設定しました。

とりあえず、マルチインストールでのWordPressの表示は完了。ネットワーク管理者でユーザーの作成などができる状況に。テスト用のユーザーを作成するも、テスト用ユーザーの管理画面からはサイトが作れない…

ここでめげていてもしょうがないので、管理者でサイトを作成。sample.example.comのアドレスが生成されたところまで確認できましたが、やはりロリポップの管理画面で設定をしないとサイトが表示されません…

ロリポップだとDNSがワイルドカード設定されていてもサブドメインを一つずつ設定しないといけないからだめだなぁ…サブドメインが自動で設定できる安価なレンサバなんてあるんかな？
2011/12/28 02:14:26 via web
shokun0803
しょうくん
shokun0803
@shokun0803 ねいんじゃねいかねー
2011/12/28 02:15:19 via web
jim0912
hitoshi omagari
jim0912

ってことで、どうっすっかなｗ

いちおう、WordPress日本語Codex-レンタルサーバ情報/マルチサイト対応（ http://wpdocs.sourceforge.jp/レンタルサーバ情報/マルチサイト対応 ）ではCORESERVERにWEB サーバのワイルドカードサブドメイン（ServerAlias）の設定方法ってのがあるので、もしかしたらできるっぽい？

と、ここまでで夜も更けてきたのでお休みなさい…

カテゴリー: wordpress | 4件のコメント

IE7でbackground-color:inheritの問題

sho

ん～、またバグなのかどうなのか、いまいち分からない問題を発見ヽ(´ー｀)ノ

文字の色を<em class="font_red">赤</em>にする。

このようなコードの場合で、cssを以下のように

.font_red { /* 赤色 */
	color: red;
	background-color:inherit;
}

記述した場合文字が赤色にならない。
これを以下のように

.font_red { /* 赤色 */
	background-color:inherit;
	color: red;
}

入れ替えるだけで反映されるようになる。
background-color:inherit指定がだめなのか、順番が問題なのかは不明。

ちなみに、以下のように

.font_red { /* 赤色 */
	color: red;
	background-color:blue;
}

などと色を指定した場合はどちらも反映されます。

カテゴリー: 未分類 | 1件のコメント

CSS3でdisplay:boxを使う

sho

えっと、HTML5＋CSS3で新規ページを作り始めたわけですが、いろいろはまった上に後で忘れそうなので【メモ】残します。

まず、(X)HTML5+CSS3での3カラムデザインを行うためにdisplay:box;を使おうとしているわけですが、以下コード。

<div id="container">
  <section data-role="content" id="contents">
    <h2>main_content</h2>
    <article>
      <p>main</p>
    </article>
  </section>
  <nav id="sidebar_left">
    <h3>sidebar_left</h3>
    <ul>
      <li>menu_1</li>
      <li>menu_2</li>
      <li>menu_3</li>
    </ul>
  </nav>
  <nav id="sidebar_right">
    <h3>sidebar_right</h3>
    <ul>
      <li>menu_1</li>
      <li>menu_2</li>
      <li>menu_3</li>
    </ul>
  </nav>
</div><!-- END div#container -->

このコードでCSSを記述して3カラムを作ります。次にCSSコード。

#container {
　　width:100%;
　　display:box;
　　display:-moz-box;
　　display:-webkit-box;
　　display:-ms-box;
}

#sidebar_left {
　　width:18%;
　　box-ordinal-group:1;
　　-moz-box-ordinal-group:1;
　　-webkit-box-ordinal-group:1;
　　-ms-box-ordinal-group:1;
　　background-color:#CF6;
}

#contents {
　　width:64%;
　　box-ordinal-group:2;
　　-moz-box-ordinal-group:2;
　　-webkit-box-ordinal-group:2;
　　-ms-box-ordinal-group:2;
　　-webkit-box-sizing:border-box;
　　background-color:#FFF;
　　padding:5px;
}

#sidebar_right {
　　width:18%;
　　box-ordinal-group:3;
　　-moz-box-ordinal-group:3;
　　-webkit-box-ordinal-group:3;
　　-ms-box-ordinal-group:3;
　　background-color:#9999FF;
}

これはCSS3のdisplay:boxを使って、ソース上ではコンテンツが先でサイドバーがあとに記述されているような状況でも、box-ordinal-groupで順番を変更して表示してしまいましょうという方法です。

Chromeでは普通に表示できるんですけどね。Firefoxでdisplay:boxを使用し、かつ子要素の幅を％（パーセント）で指定すると幅がなくなっちゃいます。
なぜ％（パーセント）指定したいかというと、@media screen and (max-width: 1000px)  なんてやってリキッドデザインを目指すとどうしても必要になっちゃうんですね。

そこで、Firefox用にCSSを少し足します。

#sidebar_left {
　　-moz-box-flex:1;
}

#contents {
　　-moz-box-flex:1;
　　max-width:640px;
}

#sidebar_right {
　　-moz-box-flex:1;
}

-moz-box-flexで幅を均等にした上でmax-width:640pxで想定している最大の幅を指定しました。（当方の場合、最大幅1000pxでサイドバーの最大幅を180pxとしているため）

最初はFirefoxでcontentsに入力していたダミーの文字が折り返されずに表示されてしまったためにデザインが崩れてしまっていました。上記-moz-box-flexで相対幅をしていするとなぜか直ったのでこれを利用しています。％（パーセント）指定が効かないのはなぜなのかわかりません。。。

カテゴリー: CSS | コメントをどうぞ

Codeigniterでフレームワーク初挑戦してみるよ

sho

えっと・・・

WordPress入ってるサイトはそれでいいんですけど、PHPでがっつりフルスクラッチしているサイトもありまして・・・もうめんどくさいからフレームワークでも使ってみるべ、ってなことで。

また覚書残しますよ。

でも、インストールと設定は同僚にまかせちゃったから省きます（ぉ

※　2011/06/06現在、はじめたばっかなのでこのエントリー自体が未完成です。

１．はじめてみる、てすと。
でもね、既存のシステムを置き換えたいわけだから、チュートリアルにあるblog作ってみますとかどーでもいいわけ。なのでいきなりなんか作ってみます。

【2011/06/06　変更記録】
当初CakePHPと言っていましたが、Codeigniterに変更しました。ので、タイトルも変更しました。だって拡張子が.phpとかなので何もしなくてもDreamweaverで作業ができるんだもん。

CodeigniterはCakePHPなどを踏襲しているので、MVC（model、view、controller）が採用されています。しかし、CakePHPなどと違うのはゆるいこと。最悪controllerだけあれば動いちゃいます。

でも、とりあえずのルールはあって、ファイル名とclass名は同一にすることが基本ルールのようです。まずはcontrollerのclassから作ってみます。

【application/controllers/test.php】

class Test extends CI_Controller {
  public function index()
  {
    echo "Halo World!!";
  }
}

※　作業中のまま公開しちゃう。

カテゴリー: Codeigniter, PHP | コメントをどうぞ

WordBench写真部に向けて色々と…

sho

デジタル一眼を買いました。EOS 60Dです。

そしてその週のWordBench写真部＋八王子 in 高尾は残念ながら中止です。もちろん地震の影響です。

なので、とりあえずニューカメラの練習とRAW現像のお勉強などいろいろ…

試し撮り：flickr

場所はお台場と自宅

RAW現像のお勉強：DPP（Digital Photo Professional）という付属ソフトにて。PhotoshopEL7.0はカメラRAWが60DのRAW形式に対応していないため読めませんでした。PhotoshopEL9.0から読めるらしい。

一応アドバイス：

@shokun0803 RAW現像はどうしても感性に頼りがちですよね
2011/03/27 17:25:10 via Echofon
kurosquare
kurosquare
kurosquare
@shokun0803 色飽和させないようにするなどの注意点はありますが、基本的には撮ったときに自分が感じた色に近づけたり、主張したいことに応じて調整していくのが現像という作業なので、好みで、という言葉は的を得てるとも言えますね（笑）
2011/03/27 17:33:13 via Echofon
odyssey
Odyssey / おで
odyssey

まあつまり、勝手にやれとｗ

JPEG同時保存で60Dが自動生成した画像

こちらはRAW+JPEGで撮影し、60Dが生成したJPEG画像です。クリエイティブ全自動で表現セレクトをふんわりやわらかく「強め」で撮影しました。

DPPを使用し補正した画像

そしてこちらがDPPを使用して画像補正したものです。色々撮影モードを試していると被写体のぶっちゃんを撮るときには表現セレクトで暖かくやさしくにすると色合いもよく見えましたので、他に撮影していた暖かくやさしくの設定情報を参考に設定してみました。

色の濃さ　元-3　→　参考画像では1だったけど2に
アンシャープマスク
強さ　元1　→　2
しきい値　元7　→　6

気になっていたのは色合いだけなので、色の濃さの修正だけでもよかったかも。ふんわりやわらかくの表現を残すならアンシャープマスクの修正はしない方がいいかもしれませんね。

実際にはプログラムAEで撮影することが多くなるだろうと思えますので、さまざまな表現セレクトの設定値を調べておけば現像するときに役に立つかもしれませんね。

次回写真部は花見かな？それまでに色々と勉強できればいいなぁ。

カテゴリー: 写真部 | 2件のコメント

WordCamp Fukuoka 2011 行ってきたよ～

sho

WordCamp Fukuoka 2011に行ってきました！関東からの参戦組も多く、とてもにぎやかな感じでWordCampらしいお祭りを楽しんできました。

行きの飛行機は羽田発６：４０で、早朝自宅をでなくてはいけないちょっと辛い行程でしたが、なんと同じ便にKtay Styleでも有名なゆりこさんが乗っていたため荷物受け取りから大学まで同行させていただきました。

福岡周辺には土地勘がないため、旅行家としても名を馳せるゆりこさんに同行していただけたのは心強かったです。

途中、地下鉄の料金が安くなる裏技を教えてもらいながら、無事九産大前に着きました。

駅からは結構近いのですが、広いと聞いていたのでちょっとおどおど。

と思ったら、ちゃんとところどころに看板が立っていました。さすがです。

そして無事12号館に到着。構内に川が流れていたりと本当に広いです。

美人ぞろいだったと噂の受付です。午前中の到着だったのでマグカップも無事にゲット。

教室に入るなりゆりこさんは壇上に立ちます。もちろん予定外で「調度よかった」とお願いされるという。でもすぐにプレゼンを始められるゆりこさんもすごいｗ

大教室最初はなおさん。どうやらここではなおっぺと呼ばれているらしい・・・

オープニングのあとは中教室の三好さんのプレゼンを聞きにいきました。こんなにイケメンで真面目そうな方が後にあんなことになるなんて・・・（謎）

ネッドのプレゼンはちょっと難しかったです。ただわかったことはネットに繋がらないとさすがのネッドでも何もできない・・・と言う事ｗ

今回は電子書籍関係のプレゼンが多数ありました。WordPressとは直接関係ないかもしれませんが、新しいアイデアに繋がればよいなと言うことのようです。個人的にはとても参考になりました。

evianさんのプレゼンは大教室にいたため後半5分くらいしか見れませんでした。でも大教室のスクリーンでハッシュタグが流れていて、それを見る限り出だしから飛ばしていたようで、途中参加でしたがとても面白かったです。ちなみに、Twitterではよくお世話になっていたのですが、お会いしたのはこれが初でした。

スペイン語のポッドキャストを行っているクレマデスさん。実はこの後のWordPantsプレゼンを見るために同じ教室に居座っただけだったのですが、とても面白かったです。ポッドキャストは比較的簡単だということも勉強になりました。

そして禁断のLT（！）
僅かな時間で発表するというだけでも大変なのに、だれも手を抜きません。スピーディーかつ分かりやすい内容のプレゼンが続きます。

WordBench香川。なぜかうどんです。

プラグインAPIに関する真面目なプレゼン・・・の、はずが？？？

気がついたら壇上でカレーうどんが出来上がっていましたｗ
ライトニングトークをフックしてうどんにカレーをコールバックするそうです。ヾ(ﾟДﾟ )ｫｨｫｨ

そして今回のプレゼンで最も実践可能だったKaiさんのプレゼン。今回このブログもカイさん方式で書いています！スライドがちょっと危険だったのはナイショ。( ￣ノ∇￣)￣ー￣)

毎回恒例のケーキもちゃんとありました。右にいるキャラクターは今回初披露の日本公式キャラクターです。ぴ○ちゅうじゃありま（ｒｙ
今後名前を募集するそうなので、みなさま是非「まがりん」と付けて（ｒｙ

料理もふんだんにありました。撮影に夢中になっているゆりこさんを撮っているのではなくて料理を撮っているのですよ。

だからまがりんのお尻を撮っているのではなくて（ｒｙ

え、～素晴らしいクラウチングスタートですね！ちなみにまだ乾杯前です。

これまた恒例のケーキ入刀なのですが・・・なおさんの命令でyukiさんが入刀することに。人生初の共同作業だったそうで、抵抗むなしく数百人の注目の的となりましたｗ

ここでもまた禁断のLTが始まりました。マイクとかないので周辺に集まらないと声も聞こえません。
そんな中で名古屋のイケメンが発表したライブ情報。WordCamp Fukuoka 2011の翌週にやるそうですよ。

福岡のイケメンもお酒に溺れると酔っぱらいのサラリーマンみたいになりますｗ　決定的瞬間が撮れなかった、残念！

と、いうわけで、とても充実した1日となりました。次回はどこで開催するのでしょうね！登録400人は伊達じゃない！

カテゴリー: wordpress | 1件のコメント

WordCamp Fukuoka 2011が登録開始！

sho

いや～、待ちました:D

前回の名古屋にスケジュールの関係で参加できなかったので、横浜以来の参加となります。ずっと期待して待っていただけに素敵なサイトがアップされたときには心躍りました。

WordCamp Fukuoka 2011

いよいよですね～楽しみです！皆さんも参加登録は済ませましたか？

PR:

カテゴリー: wordpress | コメントをどうぞ

WordBench関東クリスマスパーティー用ワイン

sho

2010年12月25日にWordBench関東クリスマスパーティーが行われます。
そのイベント用にワインを調達しまして、ラベルを張り替えてみました(￣ー￣)

そりゃあ、1本数万円もするようなラベルも有名な高級ワインなら見てすぐ分かるのかもしれませんが…1本3000円たらずのワインなので、まあ、見た目重視と言うことでロゴなどが使いやすそうなワインを選んできました。

左がオリジナル。右が上からラベルを貼りなおしたものです。違いが分かりますかね？

そして、2本目。

2本目は分かりやすっ！キャラクターに色ついてるしｗ　しかもWordPressほとんど関係なくなってるしｗ

だたの一発ギャグなので深い突っ込みとかはなしの方向でお願いします(´・ω・｀)
それでもね、一応こだわって、AUTOMATIC社のあるカルフォルニア州のカルフォルニアワインを選んでいます。シュワちゃんよろしく！（なにを？）

※当日の記事アップロードはパーティーに参加していてできない予定なので、パーティーの開始時間に合わせて予約投稿しています。あがらなかったりして…orz

カテゴリー: wordpress | 4件のコメント

OSC2010 Tokyo/Fall

sho

今日は東京/日野にある明星大学にてOSC2010 Tokyo/Fallに来ています。
実はOSC参加ははじめてなのですが、2日前に依頼されましてWordPress 地域コミュニティーWordBench 東京・埼玉・川崎・横浜の出展としてブースに居ます。

ブースは作りましたが、少々さみしい感じですね。なにをすればいいのでしょうｗ

カテゴリー: 未分類 | 1件のコメント

IE7のcssでの画像置換がおかしい

sho

まあ、いまさらIE7？とか言われそうですが、アクセスログを取得している限りまだまだ捨て切れません。（さすがにIE6は切り捨てましたが･･･）

で、よくあるcssでの画像置換に関してなのですが、IE7で妙な挙動をします。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>inline-block test</title>
<style type="text/css">
	div#design ul {
		display:block;
		width:550px;
	}

	div#design ul.ie7out li {
		display:inline-block;
		width:146px;
		height:80px;
		/display:inline;
		/zoom:1;
		text-indent:-9999px;
	}

	div#design ul.ie7ok li {
		display:inline-block;
		width:146px;
		height:80px;
		/display:inline;
		/zoom:1;
	}

	div#design ul.ie7ok li span {
		display:none;
	}

	div#design ul li.a {
		background:url(circle_banner_01.gif) no-repeat;
	}

	div#design ul li.b {
		background:url(circle_banner_02.gif) no-repeat;
	}

	div#design ul li.c {
		background:url(circle_banner_03.gif) no-repeat;
	}
</style>
</head>
<body>
<div id="design">
<p>IE7で消える？</p>
<ul class="ie7out">
	<li class="a">Ａ</li>
	<li class="b">Ｂ</li>
	<li class="c">Ｃ</li>
</ul>

<p>IE7でも消えない？</p>
<ul class="ie7ok">
	<li class="a"><span>Ａ</span></li>
	<li class="b"><span>Ｂ</span></li>
	<li class="c"><span>Ｃ</span></li>
</ul>

</div><!-- END div#design -->
</body>
</html>

こんなコードで試してみました。

display:inline-block;を利用して横に画像を並べるコードですが、IE7では対応していないため良くあるハックを使用しています。

/display:inline;
/zoom:1;

この状態でtext-indent:-9999px;として文字を飛ばすとIE7の場合だけ画像ごと飛んでいってしまいます。display:inline-block;を利用していますので、display:none;と言うわけにもいきません。

そこで面倒ですがliタグの中にさらにspanタグを入れて、そのspanタグを文字ごと飛ばす方法で対応してみました。環境のある方は上記コードでIE7とFirefoxなどのメジャーブラウザで確認してみてください。メジャーブラウザでは両方とも画像が表示されます。

カテゴリー: CSS | タグ: , | 3件のコメント
Copyright © 2012 All rights reserved.