いまさらですがRuby on Railsはじめました。

コメントを残す

PHPがなんとなく肌に合わないと感じていました。コードの美しさやオブジェクト指向具合という部分がなんとなくイマイチ。これは主観なので「まったく逆」という意見の人もいるかと思います。私の場合はPHPよりもよっぽどJavascriptのほうがオブジェクト指向に感じてしまうのです。

自社開発のアプリケーションをサーバー側の言語としてPHPを使用すること想定していたのですが、アプリケーションが複雑なだけに仕様をつくることに長い時間をかけており、なかなかはじめられない状態です。アジャイル的にやらないといつまでたってもはじめられないぞ。ということでアジャイルの考えがあらかじめ入っているような言語に思い切って変えてみようということに。

で、Ruby on Railsを選択しました。

言語やフレームワークとして癖のようなものは感じません。Railsの「設定よりも規約」という言葉の意味がようやくわかりました。規約にのっとってやれば設定する手間が省けますよね。というようなことです。なれればスイスイ実装できそうな気配。一方ブラックボックスがその分おおいということなので、トラブルの解決は時間がかかるかもしれませんけどね。

Cassandraにも興味があったのでFacebookで使われているらしいPythonも考えました。でもデータがそれほど大きくなる予定がないのでとりあえずRDBで問題ないということや、Rubyを考えた人が日本人という親近感もあったのでPythonは後回しに。コレが終わったらPythonもかじってみようかと思っています。

ちょっと腰をすえて勉強しないととおもっていたのですが、思った以上に肌が合います。すでに好きになってしまいました。

HTML,Javascript,CSSが本業で、サーバーサイドのプログラムも勉強していきたいという人はだいたいPHPにいくと思うのですが、Rubyにしてみてもよいかもしれません。

 

サイト制作のテスト環境をwindowsからlinuxへうつしたのでメモ

コメントを残す

サイト制作のためにwindows＆xamppからlinux＆lampにしました。

方針
１：なるべく本番環境に近い状況を作り出すため、仮想Linuxサーバーを使う。
２：なるべく本番環境への操作に近い状態を作り出すため仮想サーバーへはSSHかFTPを使用する。
３：マルチドメイン的に使用する。
４：実際のドメインで見られるように。
５：個人的なテスト環境にするため仮想サーバーは自身のコンピューターにインストールし、外部からは接続しないようにする。

ということで選択した方法が下記になります。

１：仮想化にはVirtualBoxを使用。
２：linux はUbuntuを使用（デスクトップ版。特に意味はないが使いやすそうだったから）
３：webサーバーはLAMP。
４： FTPサーバーにvsftp。
５：ウィンドウズからブラウザで見るときはhostsファイルを操作。

以下参考にさせていただいたサイトです。
■VirtualBoxの構築からウェブサーバーの設定まで
考えてる途中[テスト環境作り]
途中、VirtualBoxとUbuntuのファイル共有のやり方も載っています。
■さらにマルチドメイン的に動作させたかったので、
この辺りを参考に。
■Windowsからテストサイトを実際のドメインで見たかったかったので
ココを参考（CentOSでしたがほぼ同じ）にVirtualBoxのネットワークを設定し、UbuntuのIPを固定しました。
ブリッジ接続を使う方法も考えましたがプライベート具合という部分と、LANによってIPが変化せざるを得ない面倒くささからNAT+ホストオンリーという方法を選択しました。
■テストサイトと本番環境をすばやく切り替えたかったので Hosts Managerをインストールして使用します。
■どうせプライベート環境なので使いやすいFTPでの接続にすべく、こちらを参考にvsftpを設定

ひとまずOKですが、もう少しやりたいことが

■phpmyadminをインストール→shinodogg.com[Ubuntuにphpmyadminのインストール]
■.htaccessを有効にする。→UbuntuのApacheで.htaccessを有効にする方法・コマンド

これでやっと大体レンタルサーバーと同じようなことができる環境が整いました。初めてのことは何でも時間がかかりますね。

wordpress + chromeで編集時に文字化けが起こる現象について。

コメントを残す

ちょっと前から気がついていたのですが、Wordpressをchromeで編集するときに「＆」とかが「.」になっちゃったりする現象がありました。

ググるとちょこちょこと情報が。ただ、現象が起こりうる条件が結構厳しいらしく、症状はまれなケースらしいです。

どうやらfont-familyが原因みたいで、chromeの「要素を検証」で一部のfont-familyを消してみるときちんと表示されました。
つまりそのフォントが入っているPCというのもひとつの条件ということです。
じゃあスタイルを適応しなおせばいいですね。ということで犯人のCSSを調べたところ、

/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

に記述されているbodyに指定されたfont
font: 13px/19px Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif;
の下にあらためて
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
と指定してアップしたら直りました。日本語で見やすくなるというおまけつき。

wordpressのアップデート時に再び元に戻る可能性はありますが、とりあえず直った。よかった。

jQueryの$.css(‘width’)や$.css(‘height’)取得はcssを設定していなくても実際の値が返ってくる

コメントを残す

jQueryので幅や高さを取得する場合はwidth()メソッドやheight()メソッドが便利だが、
css()メソッドを使用して$.css(‘width’)や$.css(‘height’)でも取得できる。
でも単純にcssで設定されている値を取得したい場合には邪魔になる機能だったりする。
css()メソッドはCSSとして設定していないのに数値pxが返ってくるらしい。(jquery1.7.1で検証）

この場合はget()メソッドを使用して一度DOMを取得してからDOM.style.widthやDOM.style.heightを参照するとよい。

[HTML]
<div id=”test”>TEST</div>
<script>
console.log($(‘#test’).css(‘width’));//出力：’1345px’　（実際の大きさ）
console.log($(‘#test’).get(0).style.width);//出力：”　（空）
</script>

[/HTML]

Flasherの衰退と今後の人材と教育について

コメントを残す

以前勤めていた会社ではFlasher（Flashコンテンツを作成する人）として働いていました。
当時はFlashがリッチコンテンツを作るうえでとても手軽なことがあり、
ブラウザ上だけでなく、SONYのVAIOに標準搭載されるアプリケーションのUI部分の作成など、
Flashを作成する技術が世の中で重要なスキルだったとおもいます。

「Flashが今後なくなることはないけれども、モバイル機器用のは開発しない」というアドビの発表。

さて、それに代わるのがHTML5だというのですが、これは話を少々単純にしすぎです。
「一部ではそう」ですが、ほんの一部です。もっというとHTML5で新しくできることって厳密に言うとそんなにないのではないかと思います。

ビデオが見れる。絵が描ける。などの実現はFlashではなくてもQuickTimeやJavaアプレットなどでできました。HTML5の厳密な見方はこのような「プラグインに任せていた部分をブラウザがやりますということになった」ということだと思います。
実際HTML5として紹介されている多くの部分をAjaxが担っています。
Ajaxが登場したときも同じでした。Ajaxは通信する方法の名前でしかなく、開発はほぼjavascriptです。

カートにドラッグできるショッピングサイトなんかをFlashで作るようなことは
ずいぶん前からなくなっていて、Ajaxで作ります。
その時点でFlashの役割のかなりの部分はAjaxに取って代わっていました。

CSS3もそうですね。

このように、Flashは急に役割を取られたのではなく、徐々にそうなっていったのです。

それなのに突然な印象を与えたのは、Apple社のモバイル製品がフラッシュを非対応にしたときです。
正直「えぇ?」と思いました。それは二つの理由からです。
ひとつはまだまだFlashで作られたサイトやサービスがたくさんある状況でお客さんがどのように反応するだろうという不安。
二つ目はFlashが（Flasherという職が）なくなってしまうのではないかという危惧。

一つ目の理由については、本当に驚きました。一流の先導者の凄み、出てました。
二つ目の理由についてはそれほど意外なことではなかったです。

さて、HTML5の時代にこれから入ります。
今後Flasherは普通にやっていたら食べれないと思います。

進路のパターンとしては、
１：他の技術も習得してポリバレントな技術者になる。
２：さらに進化していくだろうFlashの最先端をひたすら追い続け、職人として生きる。

どちらかというと私は１のパターンです。デザインやアニメーションが強い人は２のパターンになるのかな。

媒体で言うと、１のほうが圧倒的に舞台が多い。

そういうわけで就職も1の人材のほうが就職しやすいでしょうね。
２は会社を選びます。故に狭き門。職人の淘汰がされるでしょうね。

HTMLコーダーと呼ばれている職業の人がHTML５という名前だけを理由に、それをやらされているとも聞きます。
FlashでActionScript書いてた人のほうが簡単に習得できる技術だと思うので、
HTML5の表面の部分（マークアップとCSS）と動作部分（Javascript）で職種名を分けて、
Javascript側をやる人として再就職とかお勧めです。Javascripterとか、Ajaxianとか。

現在の教育の現場でもいまだにHTMLとかFlashとか分けて教えられていますが、
それらの境目を作るのは早くやめてほしいと思います。
まずウェブサービスが動いている全体を感じられる指導をしてほしい。

１：ネットワークを組む。（プラモデル方式に）
２：サーバーを立ち上げる。（ざっと）
３：データベースを作成（いわれたとおりに）
４：サーバー側の簡単なプログラム（一応内容を把握）
５：クライアント側の簡単なプログラム（アレンジしてみる）
６：それらを動かす。

これを一度体験しておくことで、その後どんな専門を持ったとしても、
技術革新が早いこの業界においても自分を変えながら生きていける絶滅しない人材になれると思います。

DeAGOSTINIさんあたりで出ないかな。ニッチすぎるか。。

BEAUJOLAIS-VILLAGES NOUVEAU GOLD

コメントを残す


さっぱりしたボジョレー。すごくおいしかったです。
パッケージが金。近所のエノテカさんで買いました。

銀もあって、セットで買いました。そっちはまだ飲んでないですケド。

日本初上陸なんだそうですが、このボジョレーは和食によくあうと思います。鍋とか。

金と銀とどう違うんですか？との問いに店員さん「赤と白です」とのこと。

もっかい金買ってクリスマスにでも飲もう。

EC-CUBE2.11　入力フォームの内容チェック項目メモ

1件のフィードバック

ユーザー入力のフォーム関連のクラスによく

$objFormParam->addParam(“お電話番号1”, ‘tel01’, TEL_ITEM_LEN, ‘n’, array(“EXIST_CHECK”, “SPTAB_CHECK”, “NUM_CHECK”, “MAX_LENGTH_CHECK”));

などと書かれているが、この”EXIST_CHECK”とか”SPTAB_CHECK”とか、実際何をチェックしているのかあいまいだったので調べてみました。

実際のチェックは
/data/class/SC_CheckError.php
に書かれています。

“HTML_TAG_CHECK”: HTMLのタグをチェックする

“EXIST_CHECK”: 必須入力の判定

“EXIST_CHECK_REVERSE”: 必須入力の判定(逆順)

“SPTAB_CHECK”: スペース、タブの判定（スペース、タブ、改行のみの入力はできません。）

“NO_SPTAB”: スペース、タブの判定（スペース、タブ、改行は含めないで下さい。）

“ZERO_START”: ゼロで開始されている数値の判定（0で始まる数値が入力されています。）

“SELECT_CHECK”: 必須選択の判定（選択されていません。）

“EQUAL_CHECK”: 同一性の判定（～と～が一致しません。）

“DIFFERENT_CHECK”: 値が異なることの判定（～と～は、同じ値を使用できません。）

“GREATER_CHECK”: 値の大きさを比較する （～は～より大きい値を入力できません。）

“MAX_LENGTH_CHECK”: 最大文字数制限の判定（○字以下で入力してください。）

“MIN_LENGTH_CHECK”: 最小文字数制限の判定（○字以上で入力してください。）

“MAX_CHECK”: 最大数値制限の判定 （n以下で入力してください。）←コメントでは「最大文字数制限の判定」と書かれているがたぶん間違い。

“MIN_CHECK”: 最小数値制限の判定（n以上で入力してください。）

“NUM_CHECK”: 数字の判定（は数字で入力してください。）

“NUM_POINT_CHECK”: 小数点を含む数字の判定（は数字で入力してください。）

“ALPHA_CHECK”: 半角の判定（は半角英字で入力してください。）

“TEL_CHECK”: 電話番号の判定（数字チェックと文字数チェック）

“FULL_EXIST_CHECK”:　関連項目が完全に満たされているか判定（ が入力されていません。）←全部入力されているかのチェック？使われていない？

“ALL_EXIST_CHECK”: 関連項目がすべて満たされているか判定（はすべての項目を入力して下さい。）←たとえば郵便番号など二つのテキストフィールドが入力されているかどうか

“ONE_EXIST_CHECK”: 関連項目がどれか一つ満たされているか判定（どちらか一方が入力されていればOK）

“TOP_EXIST_CHECK”: 上位の項目が満たされているか判定（は先頭の項目から順番に入力して下さい。）←規格の選択などで使用している。

“KANA_CHECK”: カタカナの判定

“KANABLANK_CHECK”: カタカナの判定２(タブ、スペースは許可する)

“ALNUM_CHECK”: 英数字の判定

“GRAPH_CHECK”: 英数記号の判定

“ZERO_CHECK”: 必須選択の判定（ひとつは選択してね）

“NUM_RANGE_CHECK”: 桁数の判定 (○○はｎ桁～ｎ桁で入力して下さい。)

“NUM_COUNT_CHECK”: 桁数の判定（○○はｎ桁で入力して下さい。）

“EMAIL_CHECK”: メールアドレス形式の判定

“EMAIL_CHAR_CHECK”: メールアドレスに使用できる文字の判定

“URL_CHECK”: URL”: URL形式の判定

“IP_CHECK”:  IPアドレスの判定

“FILE_EXT_CHECK”: 拡張子の判定

“FIND_FILE”: ファイルが存在するかチェックする

“FILE_EXIST_CHECK”: ファイルが上げられたか確認

“FILE_SIZE_CHECK”: ファイルサイズの判定（制限）

“FILE_NAME_CHECK”: ファイル名の判定（ファイル名に日本語やスペースは使用しないで下さい）

“FILE_NAME_CHECK_BY_NOUPLOAD”: ファイル名の判定(アップロード以外の時)

“CHECK_DATE”: 日付チェック[項目名,YYYY,MM,DD]

“CHECK_DATE2”: 日付チェック[項目名,YYYY,MM,DD,mm]

“CHECK_DATE3”: 日付チェック[項目名,YYYY,MM]

“CHECK_BIRTHDAY”: 誕生日チェック[項目名,YYYY,MM,DD]年の最大・最小数値のチェックがついている

“CHECK_SET_TERM”: 年月日に別れた2つの期間（YYYYMMDD）の妥当性をチェックし、整合性と期間を返す←要するに期間が正しいかどうか

“CHECK_SET_TERM2”: “CHECK_SET_TERM”のもっと細かい期間（YYYYMMDDHHmmss）のバージョン

“CHECK_SET_TERM3”: “CHECK_SET_TERM”の期間が年と月(YYYYMM)だけのバージョン

“DIR_CHECK”: ディレクトリがあるかどうか

“DOMAIN_CHECK”: ドメインの形式チェック

“MOBILE_EMAIL_CHECK”:  携帯メールアドレスのチェック

“CHECK_REGIST_CUSTOMER_EMAIL”: メールアドレスが会員登録されているか調べる

“PROHIBITED_STR_CHECK”: 禁止文字列のチェック

“EVAL_CHECK”: PHPコードとして評価可能かチェックする

FILE_EXIST_CHECK

Javascript: あるオブジェクトのメソッドをほかのオブジェクトに呼んでもらうとthisはwindowになる

コメントを残す

[javascript]
A = function(){
this.myName = “A”;
}
A.prototype = {
trace:function(){
alert(this.myName);
}
}
B = function(){
this.myName = “B”;
}
B.prototype = {
callme:function(callme){
callme();
}
}
$a = new A();
$b = new B();
$b.callme($a.trace);
[/javascript]

AとBにはそれぞれmyNameを設定

BのインスタンスにAのインスタンスのメソッドtraceを渡し、Bのインスタンスに呼んでもらう。

結果はAでもBでもなく、undefined.

traceメソッド内のthisはwindowになる。traceが匿名関数になる。

なんどもなんどもつまずくところ。