hamashun.com

既に一ヶ月程前の話なのですが、iPhone買いました。ケースは天使のやつ。羽根が最初はジャマに感じたけど、今は逆に持ちやすいです。逆に。

裏側。

現在の壁紙。

iPhoneは小さいPCとして使うので、電話としては使ってないです。なので、連絡先はこれまで通りで大丈夫です。

最初に結論

この手の話は長くなりがちなので、チャッチャと進めようと思います。 なので最初に結論。
あ、「マークアップエンジニアって何？」と言う人はググってくださいすみません。

HTMLとCSSしかできない人は、そろそろ他の事も始めた方が良い。

コーダー今昔物語

その理由です。

1. 昔：テーブルコーディングで十分だよね
2. ちょっと昔：CSSコーディングできるんだー凄いね！
3. 最近：CSSコーディングくらいできて当たり前だよね？
4. 将来：えーHTMLとCSSしかできないのー？（未来予想）

こんな感じかなーみたいな。 僕は比較的最近になってこの業界に入ってきた人なので、昔の部分は聞いた話とかからの想像です。

言いたいのは、HTMLとCSSしかできない人の価値はこの先低くなっていくよねって事です（人材的な意味で）。

HTMLコーダー・マークアップエンジニアが進むべき道は？

ではどうしたらいいのか？

答えにならない答えですが、どの方向にも進めると考えています。

デザインには通常業務で接しているし、JavaScriptにはHTMLの知識が活かせます。 デザイナーとプログラマの間に立たされたりする人はディレクションが上手く回せるかもしれないし、CMSなどからバックエンドに進むのもアリです。

まあ要は、やりたい事やればいいんじゃないかと思います。

キャリアパスはまだできていない

ちょっと余談です。

Web業界は若い業界なので、新卒などから定年までをWeb業界で過ごした人というのはいないと思うんです。 たぶん。

であるならWeb業界のキャリアパスは決まりきっていないはずだし、むしろ僕らがこれから進む道が未来の後輩達のキャリアパスになると思うんですよね（あ、このセリフかっこいいので使っていいですよ！）。 別にこれはコーダーとか関係なく。

まあ、新しい何かを身に付けるのは結構大変ですけど、今から暫く血反吐を吐いたらそれから先は極楽が待ってたり（待ってなかったり）しますしね。
と言う訳で、暫く血反吐を吐く予定です（なぞ

ちなみに、プログラマーでは35歳定年説とかありますけど、自分の周りを見る限り、35歳でソースコードを書かなくなりそうな人はあまり思いつきません。

JavaScriptの習得のために、とりあえず今期中は、週に一つはJavaScriptで何かを作る事にしました。 これは会社で設定した個人目標でもあります。

できた物はJavaScript1000本ノックで作った物を置いていく場所に追加していきます。

自分で定めたルールは以下です。

• ネタはかぶってもよい。 書き方を変えたりライブラリの有無などで変化を付ける
• 慣れると言うか、JSに実によくなじむ事が目的
• 本業が忙しかったりしてどうしてもできなかったら翌週に二つ作る
• デザインもできるだけがんばる

ちなみに1000本という数字は言葉のアヤです。

サンプルページ

概要

11月1週目のJavaScriptです。やりたかった事は以下。

• input要素にデフォルトテキストが表示されていて、文字色は薄い
• フォーカスすると、デフォルトテキストが消えて文字色を濃く変える
• 何も入力せずにフォーカスを外すとデフォルトテキストが再び現れる
• 何か入力してあれば、再びフォーカスしても何も起こらない

ソースコード

jQueryを使用しています。

$(function () {

var searchInpt = $("#searchText");
var defaultVal = searchInpt.attr("value");
searchInpt.css("color","#999");

searchInpt.focus(function() {
  if (searchInpt.attr("value") == defaultVal) {
    $(this).css("color","#ddd").attr("value","");
  }
}).blur(function() {
  var nowVal = searchInpt.attr("value");
  if ($(searchInpt).attr("value") == "") {
    $(this).css("color","#999").attr("value",defaultVal);
  }
});

});

学んだ事

変数に代入した結果は、その時点で保存されるという事。
例えば最初の方で var defaultVal = searchInpt.attr("value"); して、その変数に格納された値は、その後のブラウザ上の操作でvalueを変えても（その変数内では）替わらない。 処理を代入してるんじゃなくて処理の結果を代入していると言うか何と言うか。

なんかでも、条件によってはそうでもなかったような事があったような気がするのでその内また解るかも。

改良したい点

「スクリプトを適用する要素」を指定する方法（コード1行目）を、ある程度汎用的にしたい。

今はidを直接指定しているので、そこを「jsファイルを読み込ませたら全てよしなにやってくれる」的にしたい。

「inputのtypeがtextで、かつデフォルトでvalueの中身に何か入ってる場合」とかでif文かなー。 JS側でclassをキメて、それをHTMLに書くのはちょっともにょるしなあ。

サンプルページ

概要

11月2週目のJavaScriptです。やりたかった事は以下。

• いわゆるタブによる、コンテンツの表示非表示の切り替え
• コンテンツは同一ページにあって、JSでCSSを操作して切り替える
• JSがオフの環境でも情報は問題なく得られるようにする

ソースコード

jQueryを使用しています。

$(function () {

  var wrapper = $('div.wrapper');
  var boxs = $('div.contents');
  var tabBtn = $('h1.title');

  $(wrapper).css({
    height: '224px'
  });
  $(boxs).css({
    position: 'absolute'
  });
  $(tabBtn).css({
    position: 'absolute',
    top: '-98px',
    cursor: 'pointer'
  });

  function zIndexReset(){
    $(boxs).css('z-index','1');
  }

  tabBtn.click(function(){
    var tabBtnVal = $(this).attr('id');
    var divId = tabBtnVal.replace('Title','');
    zIndexReset();
    $('#' + divId).css('z-index','2');
  });

});

学んだ事や雑感

関数に名前を付けて後から実行する事。

「いやそれ常識だしｗ」とか思われそうで恥ずかしいんですが、「処理を関数にして呼び出せるようにする」という感覚が、少しだけ自分になじんだと言うか。 これまでは「jQueryの仕組み上functionと書かないといけないから書く」みたいな使い方が多かった気がします。

サイ本のこと

実は以前、半年くらいかけてサイ本をある程度読んだんですけど、実際にJSのコードを書いているとふっと「あ、これサイ本に載ってた記憶がある」みたいな瞬間があって、あのツライ読書（1P読むのに数時間とか）は無駄じゃなかったのかなとか思ったり。 1000本ノックが終わったらまた再読したい。

汎用性のこと

書いたJSは「同じ機能なら複数の案件で使いまわせたほうがいい」と考えていたのですが、faultierの人が書いてくれた言及記事や、自分で実際にJSを書いている内に感じた事から、HTMLに使うJSなら、そのHTMLに合わせて（必要なら毎回）書いた方が良いんじゃないかと思えてきました。
あ、もちろん、使いまわせるライブラリを使った方が良いケースもあるんでしょうけど。

改良したい点

z-indexの操作が満足いってないです。 赤を最上段にしてから青をクリックすると重なり順がおかしくなってしまう。

これを解決するには、「クリックした時点で3つ全てのz-indexを取得して、その中の最大の値に+1して該当の要素に指定する」とか・・・かな・・・！ 難しそうorz あと、若干重箱の隅ですけど、z-indexの最大値の件も問題としてはあると言えばある。

まあ、そもそも何故z-indexでやってるのかと言うと、少しづつズラして配置しているデザインのためなので、3枚とも完全に重なっているデザインなら、displayプロパティでタブ切り替えを行ってしまえば簡単だったりはします。

サンプルページ

概要

11月3週目のJavaScriptです。やりたかった事は以下。

• IEが、labelに含むimg要素のラベル付けに対応していない件を何とかする
• できればjQuery無しで作りたい。（が、しかし…）

ソースコード

結局jQueryを使用しました。

$(function () {
  var ua = $.browser;
  if(ua.msie) {
    function inputFocus(inputId){
      $('#' + inputId).focus().click();
    }
    $('label').click(function(){
      var labelFor = $(this).attr('for');
      inputFocus(labelFor);
    });
  }
});

学んだ事や雑感

ブラウザ間の差

input要素のtype属性がtextのみなら .focus(); で問題無かったのですが、checkboxやradioがあると .click(); も必要になりました。 で、そうなるとFirefoxでは逆にうまく動かなくなってしまいます。
それでは困るので、hokacchaさんのjQueryで簡単UserAgent判別 - Webtech Walkerを参考にUAで振り分けました。 ただし、この問題の解決方法は条件付コメントでも良いと思います。

jQueryを使わない

今回は比較的、使い回しを考えたコードを書きやすいかもしれないと思ったので、jQuery無しで書いてみようと思いました。 無理でした。

document.getElementById で取得した要素は onclick(); で動くのに、document.getElementsByTagName('label') で取得した要素は onclick(); が動かなくて、それじゃあってんで散々こねくり回した末に、

var labels = document.getElementsByTagName('label');
for(var i=0; i<labels.length; i++){
  var labelFor = labels[i].getAttribute('for');
  alert(labelFor);
}

としたら、Firefoxではうまく取得できたけどIEだと nullnullnull... ってなってしまい、心が折れたと言うかヌルヌルすぎと言うか。

改良したい点

jQuery無しで同じ事ができるようになりたい。 もうちょっと色々分かってきたら、再挑戦したい。