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

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

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

まずドメイン取得しました。もともとムームードメインを使っているので、そこでさくっと。でも.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のアドレスが生成されたところまで確認できましたが、やはりロリポップの管理画面で設定をしないとサイトが表示されません…

http://twitter.com/#!/shokun0803/status/151712553658089474
http://twitter.com/#!/jim0912/status/151712778724454400

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

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

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

IE7でbackground-color:inheritの問題

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

文字の色を<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;
}

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

CSS3でdisplay:boxを使う

えっと、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で相対幅をしていするとなぜか直ったのでこれを利用しています。%(パーセント)指定が効かないのはなぜなのかわかりません。。。

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

えっと・・・

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

また覚書残しますよ。

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

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

1.はじめてみる、てすと。
でもね、既存のシステムを置き換えたいわけだから、チュートリアルにある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!!";
  }
}

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

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

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

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

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

試し撮り:flickr

場所はお台場と自宅

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

一応アドバイス:
http://twitter.com/#!/kurosquare/status/51922698980438016
http://twitter.com/#!/odyssey/status/51924722786639872
まあつまり、勝手にやれとw

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

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

DPPを使用し補正した画像

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

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

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

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

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