2014/05/22

カラーミーキットを使ってみた！



仕事でカラーミーさんを利用させてもらってまして、

以前は「プレーン」というテンプレートを少しカスタマイズして使用していたのですが、

時代も変わってきたというこで、ここはモデルチェンジでもしてみっか！ってことで重い腰を上げてみました。

カラーミーキット(2カラム)


まずはテンプレート選び。

久々にひらくとなんとも素敵なテンプレートが増えてるではないですか、、、

Panoramaとかワンプレートホワイトとか、

と、思ったらどーやらこれらは有料版。素敵だけど少し金額に怖気づく、残念。

改めて無料版を拝見。

すると目立つ部分にどんっ



なんでしょう、これ。

いったんスルーして下のテンプレに目を向けるとBitこれとかも

ぜんぜん素敵じゃないですか！さっきの有料版とどんだけ違うの？？

とか思いながら、先ほどのカラーミーキットをクリック。

すると素敵なテンプレたちはどーやらこのテンプレを元に作られているらしい。

詳細→テンプレートフレームワーク カラーミーキット

そして無料。

これは気になるってことでとりあえず軽く調べてみました。

Bootstrap？見たいな感じ？？


ドキュメントを見てみるとどーやら

流行？？のBootstrap風のClassでぐりぐりカラムを分けるような仕組みのようです。

って、Bootsrapいじったことはありませんが、、、。

これもいい機会だし流行（ってますよね？）のレスポンシブとやらを経験してみようと、

カスタムテンプレのカラーミーキット（2カラム）をポチる。

いざカスタム。

col-lg-(n) col-sm-(n)


ほんと、これの意味すら良くわからなくて、、、

良くカスタムできたと自分でも思います。はい。

（12 / n） カラムって感じでしょうか。

ちょっとドキュメントが素人にはもの足りない感じですが

ただ、なんでもそうですがいじってるうちに以外と慣れるもんで、、、。

しかしマージンとかパディングとかこーゆー指定の仕方が今主流なんでしょうか？

わかり易いような、面倒くさいような。

つまづいたところ


あくまでBootstrap、レスポンシブ未経験の体験談なので、

そのコードが指し示す真意を理解できていない気がしますが、

結構悩んでしまったところをいくつか。

■icon-b, icon-w, icon-lg-b, icon-lg-w

<i class="icon-b icon-twitter"></i>

的な感じでiconが用意されていて、サイズも大、小あるのですが、

なぜか768px以下のデバイスは小アイコンを選んでも大アイコンにCSSが設定されています。

768以下でアイコンがズレます。

共通CSSに入っているんですが、この真意をいろいろ考えたのですが解明できず。

■viewportを書き出すところ

最初ある程度カスタムしてから、スマホで確認してみたんですが、

ページを遷移する度にチラつくんです。

困った困った。原因を考えたところ、

スマホ用のmeta viewportをスクリプトで書き出しているんですが、

これが共通HTMLのfooter下のDOM readyイベント内に書かれています。

なのでスマホでアクセスするとbodyが一瞬PC用にレンダリングされた後スマホ用のCSS

が読み込まれるようで画面がちらつきます。

サイドにカラムなどなければ気にならない程度かもしれませんが、、。

とりあえず共通HTMLのスクリプトをbody直下へ移動。

そんでviewport書き出しはDOM readyから出しました。

とりあえず問題なさそうだし、自分的にはちらつきがなくなったのでなにより。

■btnクラスのinline-block

がinlineにアスタリスクがついてるんでIE用のハックだと思うんですが

zoom:1;がはいった方がしっくりくるような。

ま、正直この辺良くわかりませんが！

結論


これは慣れれば量産できそうな予感。

今度Bootstrapもいじってみたいな。
投稿者 時刻: 0 件のコメント :
ラベル: ,

2014/04/25

websocketを使ってみて感動した件


なぜにwebsocket


ふと、サーバー側からクライアントへどーにかデータ送信ってできないか？？

と思うことがり、そんなような内容をググってみたところ。

ポーリングということばに出会いました。

そこが今回の始まりです。

知りませんでしたぽーりんぐという言葉。

そんでちゃちゃっと自分で調べた感じ、

javascriptにおけるポーリングとはF5又はXHR連打。

ロングポーリングとはXHRでデータ送信、

サーバ側でぐるぐる待つ。

変更があればクライアントに戻す。

かなり斜め読みのざっくり把握です。

コメットなる言葉も出てきましたがロングポーリングと

似たようなもの、ということみたい。

CometとAjaxを利用したチャットサーバの実装

こちらのサイトがわかりやすかったです。

まぁ結局のところ当たり前かも知れませんが、

クライアントからサーバへ問い合わせないと始まらんよ、と。

しかし、まぁ見てのとおりサーバーの負担が気になるところです。

よくチャット禁止とか書かれているレンタルサーバーはこういうことっだのでしょうか？

そしてwebsocketなる技術はそんなサーバーの負担を和らげてくれる技術らしい。

まぁ難しいんでしょうね～と、思いながらもちょっとググってみる。

websocketはnode.jsというもので実装されている方が多いようでした。

聞いたことはあるがイマイチなぞなnode.js。

唯一かろうじて雰囲気はわかるPHPでどーにかできないもんか。

ありました、完璧に教えてくださるサイト様が。

PHPでWebSocket

同時にお絵かき。魅力的です。

早速試してみることに。

簡単！


といってもPHPでWebSocketこちらのブログのおかげですが、、、

今回とりあえず動かす！！という目標なのでXAMPP環境でチャレンジです。

サーバサイドはphp-websocketこちらのライブラリを

ダウンロードしてまんま使わせいただきました。

ドメイン部分だけ書き換えをしたらあっさりとdemo起動。

PC、iPhoneで問題なくつながりました！

そしてこのながながとひっぱていながら全くアクセスのない

お絵かきアプリPaint!をカスタムです。

大抵この手の未知なことをはじめるとどつぼにはまるのですが、

以外にもスムーズに。

クライアント側


は、とりあえずpaintとというオブジェクトを作成して、そのオブジェクトに

カラー情報やらタッチの位置やら様々な描く情報を入れているのですが、

今回はタッチ系のイベントごとにこのpaintオブジェクトのプロパティの一部をJSONして

データを送信するという感じにしました。

そんでこのオブジェクトを通常のタッチによるcanvasへの書込み用と

websocketから来るプロパティをコピーして同じくcanvasに書き込むようの

2つのオブジェクトを作成して使用してみました。

マルチタッチとかになるとさすがに重いのかなぁとか思ったんですが意外にも

軽快に動いてこれまた感動。

そんで参加時に任意の文字で参加グループを選べるように設定。

ただ新たに端末が加わった際は同じグループ内の任意の端末からcanvasデータをbase64して送信、

その他の端末はそれを読み込み、ということをしたんですが、

写真だと重くて結構な遅延が生じてしまいました。

試してませんがbase64でやりとりよりWebSocket の導入: ウェブにソケットを実装する

みたいにバイナリデータの方が早そう気が、、、わかりませんが。

そんで今回iPhone5c2台とHTCAndroidで通信してみました↓



予想以上な軽快な動きです。感動です。

ここでひとつ思ったなのですが、Androidは今までcanvasの性能が（iPhoneに比べて）イマイチなんかなぁ

と思ってたんですが、意外と位置情報から書き込むと結構スムーズな気がしました。

なんでこのはがゆさはタッチの反応の問題？

いつかサーバサイドの理解が深まったらこんな技術も入れてみたいもんです。

少しでもきになった方、よかったらこの

ウェブアプリをホーム画面への追加よろしくお願いします。

Paint!

サーバーが不安定気味でチョイチョイアクセス出来ないことがありますが、

それとwebsocketは試せませんが、、、

ちなみにあんまり関係ないのですが、new Image()した要素を入れたプロパティを

一生懸命JSON.stringifyしようとして

TypeError: Converting circular structure to JSON

と怒られまくってしまいました。循環参照？？？って思ったんですが、

確かにDOMをそのままJSONっておかしいよなと原因わかって納得。

まとめ


すごい技術があるもんだ。
投稿者 時刻: 1 件のコメント :
ラベル:

2014/02/12

動的に追加される要素にイベントを登録する



なぜこんな記事を書いたのか。

前回のhandleEventってなんかよさそうこの記事書いてて

思い出したついでです。

<html>
<head>
<body>
<button id="add">追加</button>
<ul id="listUL">
<li>list1<button class="remove">削除</button></li>
</ul>
このリストは動的に追加され、削除ボタンでそのリストを削除したい場合。

add.addEventListener('click', function() {
  var listLength = document.getElementsByClassName('remove').length;
  var list = '

  • list' + (listLength + 1) + '
    • 
';
  listUL.innerHTML += list;
});
listUL.addEventListener('click', function(e) {
//親がイベントを監視し、伝播するイベントをキャッチし発生元の親listを削除する
//親が上の要素にいけば行くほど（広く監視するほど）無駄なイベント捕捉が増える？？と思われる
  if(e.target.className === 'remove') {
    this.removeChild(e.target.parentNode);
    //ここのthisはリスナが登録されたlistULを指す
    //thisは e.currentTarget、e.targetはクリックされた要素
  }
});
    ちなみに動的な要素もそうだけど、大量のリストにイベント設定するときとかもforで回すして

    全ての要素に登録するより、親に1つ登録してe.taｒgetを監視した方がよいのかしら？？

    以前、ふとどーやってあとから追加された要素にイベント登録するんだろーって思って、

    ググったところjQueryのliveとかonとか出てくるんですよね。

    まぁみなさんその情報を求めているんでしょう。

    がしかしここ最近なぜかjQueryをあまり使わなくって。

    そんで調べてなるほど！

    うーん、

    参考

    jQueryのliveやdelegateは実際何をやってるのか
    投稿者 時刻: 0 件のコメント :
    ラベル: ,

    handleEventってなんか良さそう



    知りませんでしたhandleEventという存在。

    すごい的を得ていないポストなのでhandleEventで検索してきてしまった方すいません。

    そんで久しぶりに恥かしながらコードを載せてみよう！

    と思ったのでSyntax Highlighter導入してみました！

    handleEventでググるとまず

    handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。

    そんな説明に出会います。

    いまいちピンとこないのでいろいろサンプルを拾って試してみる。

    まずはどこかで見たhandleEventサンプルです。

    これがthisで呼べるのはおそらくhandleEventを持った(設定した)

    windowオブジェクトを渡してるってことですよね？

    そんで次

    var handler = {
 handleEvent: function(e) {
  //イベントの共通処理
  e.preventDefault();
  switch(e.type) {
   case 'mousedown':
    this.x = e.clientX;
    this.y = e.clientY;
   break;
   case 'mouseup':
    console.log(this.x, this.y);
   break;
  }
  console.log(this);//thisはhandlerオブジェクト
 },
 x: null,
 y: null
};
window.addEventListener('mousedown', handler);
window.addEventListener('mouseup', handler);

    これはhandleEvent関数を持ったオブジェクトを作ってそのオブジェクトを渡すと。

    用は第二引数は関数ではなくオブジェクトを渡す。

    こんなサンプルをまぁいじりながら考える。

    なんか昔コンストラクタ内でのaddEventListenerって調子よくないなぁ。

    普通はコンストラクタ内には書かんのかなぁみたいなことを思った気が、、、。

    そんでなんかこれ使えば汎用的な部品が書けるのでは？

    そんで次、とりあえずなんかマウスやタッチの位置を取得して

    ごにょごにょするようなサンプルです。

    少し長いんで気をつけて下さい！！

    var Point = function(elem) {
 this.elem = elem;
 this.isTouch = 'ontouchstart' in window;
 this.start = this.isTouch ? 'touchstart' : 'mousedown';
 this.move = this.isTouch ? 'touchmove' : 'mousemove';
 this.end = this.isTouch ? 'touchend' : 'mouseup';
 this.flag = false;
 this.x = null;
 this.y = null;
 this.elem.addEventListener(this.start, this);
 this.elem.addEventListener(this.move, this);
 this.elem.addEventListener(this.end, this);
};
Point.prototype.handleEvent = function(e) {
 //イベントの共通処理
 e.preventDefault();
 this.x = this.isTouch ? e.touches[0].clientX : e.clientX;
 this.y = this.isTouch ? e.touches[0].clientY : e.clientY;
 switch(e.type) {
  case this.start:
   this.flag = true;
   //console.log(this.start);
  break;
  case this.move:
   //console.log(this.move);
  break;
  case this.end:
   this.flag = false;
   //console.log(this.end);
  break;
 }
 //console.log(e, this);
};
Point.prototype.addEvent = function(type, listener, useCapture) {
 this.elem.addEventListener(type, listener, !!useCapture);
};
Point.prototype.removeEvent = function(type, listener, useCapture) {
 this.elem.removeEventListener(type, listener, !!useCapture);
};

var img = new Image();
img.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmbRH59pMVYYu_tAfyZnhzs8MB3cFUVnE1dUbcC8xhPDVanWeRoJvtZLjOLeqTv8KOuOhMsbJH_jvagdNV3y5keMDd5Z908xKsk5Fuhe0MluWgKAVy4v9zhq2AFPwjsUwFraeK9xuCuQ/s144/cursol_img.png';
img.setAttribute('style', 'position:absolute;display:none;');
img.onload = function() {
 img.centerX = img.width / 2;
 img.centerY = img.height / 2;
};
var canvasElem = document.body;
var point = new Point(canvasElem);
canvasElem.appendChild(img);
point.addEvent(point.start, function() {
 img.style.left = (point.x - img.centerX) + 'px';
 img.style.top = (point.y - img.centerY) + 'px';
 img.style.display = 'block';
});
point.addEvent(point.move, function(e) {
 if(!point.flag) return;
 img.style.left = (point.x - img.centerX) + 'px';
 img.style.top = (point.y - img.centerY) + 'px';
 if(point.y > 500) point.removeEvent(e.type, point);//handleEventを削除
 if(point.x > 500) point.removeEvent(e.type, arguments.callee);//実行中の追加イベントを削除
});
point.addEvent(point.end, function() {
 img.style.display = 'none';
});

    なんかこんなようなことを以前書きたいと思ったような、思わなかったような、、、。

    でもなんか違うような。はい、曖昧な意味不明な記事です。

    いつかこれを読み返して、これこうじゃなくて、こうじゃない？

    みたいな思いつきを期待したいです。

    なんかhandleEventのうまい書き方。誰か教えて。
    投稿者 時刻: 0 件のコメント :
    ラベル: ,

    2014/02/05

    setubun

    投稿者 時刻: 0 件のコメント :
    ラベル:

    2014/02/03

    おかえりなさいinspiron



    1月のwindows updateにより？？？愛用のマシーンが力尽きてしまった。

    どーやら原因はハードディスクの故障。

    一か八かで交換を試みることに。

    前回の記事

    そして結論ですが、この記事今inspironで書いています！！

    復活です！！

    前回の書き忘れ


    前回DELLのサポセンの方に

    「ハードディスクの物理障害」

    との診断を下された後、

    HDDについてちょこっと調べてみました。

    そして物理障害のデータ復旧は難しそう

    そんな結論に達し、データ救出はあきらめ、

    以前奇跡的にリカバリディスクを作成していましたので

    なんの根拠もありませんが、

    ためしにwindowsのクリーンインストールを試みてみました。

    起動時にF12 ＞ BootMenu ＞ DVDドライブ？より起動

    なんとハードディスクのフォーマットが始まったではないですか！

    これはひょっとして、、？

    そしてフォーマットが完了し、インストールへと移ります！

    が、しかし、、当然な結果な気もしますがいくら待っても1％も進まず。

    ただHDDをフォーマットして終了という結果に、、、。


    そこで意を決し東芝のHDDをポチる。


    一か八かとかいいながら実はしっかり事前調査。

    【ノートPC分解】DELL INSPIRON N5010【HDD取り出し】

    こちらの記事大変参考というか、この記事なければ絶対無理！

    ホンとに助かりました、感謝です。

    HDD到着




    箱デカ。

    タイミングよく仕事が休みの日の午前中に到着。

    娘が幼稚園から戻る14時までが勝負です。

    終らなければ何か部品はなくなるでしょう。

    早速HDD開封



    これがバルクというやつでしょうか。

    ダンボールでかすぎです。

    まぁそれだけ繊細なものなのでしょう。

    気が引き締まります。

    まずは裏のビスを外します



    そしてDVDドライブを外す。

    問題なし。順調です。

    そしてキーボードを取り外す。

    お、簡単って引っ張ろうとしたら変なコードが繋がってるじゃないですか、、、。

    このきしめんケーブルというんですか？これが素人には恐ろしかったです、はい。

    それも前日きれいに爪を切っていたので黒いプラの部分を持ち上げるのにドキドキ。



    とりあえず無事外せました。こんな感じ。



    そしてまた苦手なきしめん外しです。



    そしてカバーを外していよいよHDDとのご対面。

    なんかこのあたりでもはやこのPCが再起するとはとても思えない、、、。

    でもやるしかないし。



    慎重に取り外します。



    そして早速新しいHDDを取り付けます。

    無事装着完了



    かなり慎重にすすめた為ここまでで40、50分くらいかかってしまいました、、、。

    ここから先はきた道をを戻るだけ！

    さくさく進めます。

    そして13時過ぎ無事部品も欠けることなく元の形に戻りました。



    まぁ戻りましたよ形はね。

    緊張の瞬間です


    こんなに電源を入れるのに緊張したことはありません。

    もしHDDを認識せずにまた分解とか絶対嫌だし、、。

    そもそも認識してるとかしてないとかわかんないし。

    てかHDD交換してそもそも直るかわかんないし、、。

    不安だらけです。

    意を決してポチっと。

    はい、見たことのない画面＆エラーの登場です。

    軽く方針状態。

    エラー内容は確か

    NTDLR is missing
    please press CNTRL+ALT+DEL to restart

    こんな感じでした。

    まっさきにGoogle先生に助けを求めると、

    OKWAVEにて回答発見。

    これは、「OS のブートローダが見付からない」という意味のエラーです。

    なるほど。

    一通り読んでみると、おそらく自分の場合HDDからOSが起動できないから

    このエラーが起きてるのではないかと解釈。

    そりゃサラのHDDですから。

    てことはDVDドライブにリカバリディスク入れて立ち上げればいいのでは？

    とりあえず再起動してBootMenuから起動をDVDドライブへ変更。

    神様仏様、、、。



    そしてなんとフォーマットが始まりました！！

    だがまだ安心できない。前HDDはフォーマットは完了したがインストールができませんでした。

    そして待つこと30,40分、、



    再起動



    感動です。

    かなり行き当たりばったり。

    ガンプラもろくに作れない俺が、、。

    運が良かったとしかいいようがありませんが、

    5千円で無事愛用マシーンが復活しました！

    ちなみにこの後windowsアップデート2、3時間かかりました、、、。

    最後に


    バックアップて大事なんだなぁ。

    そしてこれからも大事に使いますinspiron。

    ついでに次回悲しいデータ喪失の事実とPCのセットアップも書いてみたいと思います。
    投稿者 時刻: 2 件のコメント :
    ラベル:

    2014/02/02

    さらばinspiron n5010


    確か1/15日らへん。

    PC起動しっぱなしでその日は寝てしまいました、、、。

    翌日「いけねっ！」っと思ってPCをスリープから覚ましたところ、

    なんか再起動されてる。

    そーいえば職場のPC落としたときwindowsアップデートあったなぁ、、、

    とか思ってこれもアップデートされて勝手に再起動したか。

    くらいに思ってました。が、、その後に悲劇が起こりました。

    異常に重い


    何するにも超スローなんです。

    まぁよくあること。

    再起動すればなおるっしょ！

    ってことでおっそいけどなんとか再起動。

    う～ん、見たことないエラー


    再起動後ポップアップで見たことないエラー。

    まぁまぁPCにエラーはつきもの！

    恐れず進め。いざとなれば復元すればいいんでしょ？！

    激重い、というか動かない


    もっかい再起動でもしてみるか。

    てか進まないじゃん、、、。

    しょうがないんで強制終了。

    確かこんなときはセーフモードで立ち上げてどーにかこーにか。

    スタートアップ修復


    この辺あいまいなんですが、なんか操作してスタートアップ修復になったような、

    勝手にスタートアップ修復になったような、、、。

    まぁまぁまぁ、勝手に直ってくれるのはありがたい！

    すげーなパソコンわ。

    が、これがどんだけ待っても終わらない、、、。

    そしてこの後、素人が故に最悪と思われる選択をしてしまいました、、。

    スタートアップ修復を強制終了


    1時間くらいで終わらないからなんかイラッときてやってしまいました

    強制終了、、、。

    そろそろ仕事に出なければいけない焦りと、

    イライラが罪悪感なく強制終了へと導いてくれました。

    そこで再度PCを立ち上げたところ画面真っ暗

    DELLのマークが出た後真っ暗で先に進めず。

    まぁまぁまぁ、画面真っ暗っていってもなんか一応電源入るし、、、

    少し冷静になって、スタートアップ修復とか、こんな症状とかググる！

    ここでスタートアップ修復の強制終了はやはりまずかったか、、、と反省。

    時間もなくなってきたのでとりあえず電源落として、こんな時はセーフモード！

    ということでF8連打。

    ここもちょっと曖昧なのですが、ブートオプションのところで

    前回正常起動時の構成を選んだ気がするのですが、

    その後なんかの流れで再度スタートアップ修復へ辿り着きました。

    ここはしゃーないのでこのまま放置でとりあえず仕事へ行くことに。

    スタートアップ修復が12時間以上経っても終わらない、、、


    以外と直ってたりして、みたいなあま～い期待をしつつ帰ってきたら、あらびっくり。

    まだ終わってない、スタートアップ修復。

    最初はめんどくせー、復元とかすんの！くらいに考えていたんですが、

    さすがにこの辺で焦り始めました。

    せめてデータだけでもと、、、。

    どちらにしてもこりゃもぉ自力ではどーにもならん！ってことで

    その日はあきらめて、翌日DELLに電話してみることに。

    ソレワハードディスクノブツリショウガイデス


    すげーなぁ、みんな日本語上手だなぁ、と関心しながら

    いわれるがままPCを操作していくと、

    なんか安っぽいビープ音と共にエラーナンバーが表示。

    メモっときゃ良かったんですが、うっかり。

    以下その後のやり取りです。


    DELL 「ハイ、エラーナンバーワ？」

    僕 「****です」

    DELL 「アー、ハードディスクガコワレテルノデコウカンデスネ」

    僕 「え～、いくらぐらいかかりますか？」

    DELL 「サンマンエンホドデスネ」

    僕 「お～、結構しますね、、、。」

    DELL 「ソーデスネー、カイカエテモイイカモシレナイデスネ」

    僕 「データは取り出せますか？」

    DELL 「ウチデワヤッテマセン」

    僕 「....。」

    DELL 「ドーナサイマスカ？」

    僕 「ちょっとデータも諦めきれないので修理屋さんに聞いてみます、なんて伝えるのが早いですかね？」

    DELL 「ソレワハードディスクノブツリショウガイデス」

    僕 「そーですか、ありがとうござました」


    さらばinspiron

    考える


    早まる前に考える。

    3万でハードディスク交換するなら、もう少し足して買換えてもいい気がする。

    そこで2件ほどPC修理屋さんに聞いてみることに。

    DELLのPCのハードディスク交換で大体2万半ばの返答が、、、。

    微妙に踏み切れない値段。

    そしてデータの取り出しはハードディスクを確認してみないとわからないが、

    数千円で取り出せることもあれば、数十万かかあることも、、、。

    そもそもハードディスクっていくらすんのよ？

    そんなレベルです、はい。

    とりあえずハードディスクの種類を調べる。

    以外とそんなに多種類って感じではなさそう。

    まぁ2.5インチでインターフェースが同じなら問題なさそう。

    肝心な値段を価格COMで検索、

    東芝MQ01ABD050 [500GB 9.5mm] ￥4670円

    安い！

    どーせデータ取り出しにはすげー金かかりそうだし、

    PC買い換えても4万前後しちゃうし、

    こーなったら一か八かこれ買って自分で替えてやる！！

    でもそもそもハードディスク交換しただけでホントに直るのか？？

    もし動かなかったらどーにか外付けにでもして使ってやる！！！

    やけくそ。

    次回一か八かの分解です。
    投稿者 時刻: 0 件のコメント :
    ラベル:
    登録: 投稿 ( Atom )