2015/01/30

[jQuery]複数classを指定したselector(セレクタ)

jQueryを使って複数のclassを持つ要素を選択したい場合

<div class="hoge foo"></div>
上のような場合は、半角スペースを挟まずに連結して指定すればいいようだ。
var $fooHoge = $('.foo.hoge');
試したら確かに取得できた。これは便利だー。

参考
指定した複数のclassを持つ要素だけ取得する

2015/01/29

[JavaScript]wysihtmlプラグインの改行をbr以外にする

デフォルトではwysihtmlプラグインを使った時の改行はbrタグが挿入される仕様になっているが、これをやめたい場合は、どうすればいいのだろうか?

wysihtml5で確認するとuseLineBreaksパラメータを使えばよさげ。

var editor = new wysihtml5.Editor('wysihtml5-textarea', {
  toolbar:'wysihtml5-toolbar',
  parserRules:wysihtml5ParserRules,
  useLineBreaks:false
});
useLineBreaksキーをfalseにすると各文章をpタグで囲ってくれるようになります。

brタグを使いたくない場合は便利ですね。

2015/01/28

[node.js][grunt]gruntのエラー

昨日、wysihtmlプラグインを試した記事を書きましたが、ちょっとカスタマイズしたいと思ってgruntを使ってコンパイルしようとしたら、下のようなエラーが発生。

grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started
で、これなんだろーっと思って調べたらQiitaに同じ記事があってどうやらgruntがgruntがインストールされていなかったからのようです。
npm install grunt
を実行したら確かに解決した。

2015/01/27

[JavaScript]wysihtmlプラグインを試す

前回、HTMLとjavascriptだけでWYSIWYGエディタを作る「wysihtml5」を試してみましたが、実は、もうメンテナンスされておらず、代わりにVoogというところがメンテナンスしているwysihtmlを試してみました。

githubからプログラムをzip形式でダウンロードして下のようにJavaScriptを設置する。

<script src="../dist/wysihtml-toolbar.min.js"></script>
<script src="../parser_rules/advanced_and_extended.js"></script>
エディタの部分を下記のように実装する。
<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">太字</a>
  <a data-wysihtml5-command="italic">斜体</a>
</div>
<div id="wysihtml5-textarea" data-placeholder="テスト"></div>
呼び出しは下のようにする。
var editor = new wysihtml5.Editor('wysihtml5-textarea', {
  toolbar:'wysihtml5-toolbar',
  parserRules:wysihtml5ParserRules
});
簡単に設定することができた。

2015/01/26

[jQuery]カラーピッカープラグイン Spectrum

PHPSPOTで紹介されていた

高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」

を試してみた。

ソースコードはgithubにあって、まずはダウンロード。

前回試したcolorjoeとは違って導入がめちゃ簡単。

<link rel='stylesheet' href='../spectrum-master/spectrum.css' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../spectrum-master/spectrum.js"></script>
<input type='text' id="custom" >
<script>
jQuery(function($){
    $("#custom").spectrum({
      preferredFormat: "rgb",
      color: "#f00",
      showInput: true,
      chooseText: "決定",
      cancelText: "キャンセル"
    });
});
</script>
「spectrum.css」と「spectrum.js」をインクルードして、init。

色をテキストで選択する場合の色のフォーマットを「preferredFormat」パラメータで設定することができる。

その代わりその時はshowInputパラメータをtrueにしないといけないけど。

決定ボタンはchooseText、キャンセルボタンはcancelTextパラメータでそれぞれ設定することができる。

他にも色々なパラメータがあるので、時間があるときにもっと試したい。

2015/01/25

[HTML][JavaScript]input type属性がcolorの値を受け取る

前回、HTML5から新規に追加されたinputタグのtype属性がcolorを試しましたが、その時に変更したカラーを取得するにはどうすればいいのだろうか?

stackoverflowを読みながら下のように組む。

<input type="color" >
<script>
jQuery(function($){
  $('input').on('change',function(e){
    console.log($(this).val())
  });

});
</script>
windows7のchromeで試したところ#付きで16進数表記でゲットできた。

時間があったらOSによって#がつくのかどうか調査したいなーっと。

2015/01/24

[JavaScript]カラーピッカープラグインcolorjoe

カラーピッカーのプラグインを使う必要性に迫られたので、ちょっと調査。

githubで検索をかけたらcolorjoeというプラグインを発見したのでこれの使い方を勉強する。

まず使うに当たってone-colorというプログラムが必要なのでダウンロードして下のようにインクルードを行う。

<script src='one-color.js'></script>
次にcolorjoeからダウンロードしたstyleシートを下のようにインクルードする。
<link href="../colorjoe-master/css/iehacks.css" media="all" rel="stylesheet" type="text/css" />
<link href="../colorjoe-master/css/colorjoe.css" media="all" rel="stylesheet" type="text/css" />
最後にJavaScriptをインクルードする。
<script src='../colorjoe-master/dist/colorjoe.min.js'></script>
ここまでの段階で下のようになる。
<link href="../colorjoe-master/css/iehacks.css" media="all" rel="stylesheet" type="text/css" />
<link href="../colorjoe-master/css/colorjoe.css" media="all" rel="stylesheet" type="text/css" />
<script src='one-color.js'></script>
<script src='../colorjoe-master/dist/colorjoe.min.js'></script>
呼び出しは下のようにする。
<div><input type="button" value="発射"></div>
<div id="hoge"></div>
<script>
jQuery(function($){
  $('input').on('click',function(e){
    colorjoe.rgb('hoge', '#113c38', [
        ['close',{label:'あいうえお'}],
        'currentColor',
        ['fields', {space: 'RGB', limit: 255, fix: 2}],
        'hex',
    ]);
  });
});
</script>
ちなみに、closeボタンのカスタマイズは上に書いてあるように
['close',{label:'あいうえお'}]
という形でcloseの後にjson形式で設定すればおk。

IE9以上で動くのでいいですね。

2015/01/23

[IE][JavaScript]IE9判定

昨日のエントリーでIE8の判定方法について書きました。

今日は、IE9の判定方法について。

var isIE = (window.attachEvent)? true : false;
var isIE8;
var isIE9;
if(isIE){
  if(window.addEventListener){
    isIE8 = false;
    if(!window.applicationCache){
      isIE9 = true;
    }else{
      isIE9 = false;
    }
  }else{
    isIE8 = true;
    isIE9 = false;
  }
}
Internet Explorer デベロッパー センターに記載されていたIE10からサポートされているapplicationCache propertyのサポート状況で判断する方法。

今回は簡単に書くことはできないかなーっと思っていたら、意外と単純化できたかも。
var isIE9 = (window.attachEvent && window.addEventListener && !window.applicationCache)? true : false;

2015/01/22

[JavaScript]IE8判定

前回、ネイティブのJavaScriptだけを使ってIEを判定する方法を書いたが、今回は、それをベースにIE8かどうかを確認する方法について書く。

var isIE = (window.attachEvent)? true : false;
var isIE8;
if(isIE){
  if(window.addEventListener){
    isIE8 = false;
  }else{
    isIE8 = true;
  }
}
これだけである。

window.addEventListenerはIE9以降でサポートされているので、その特性で判断するという手法です。

このエントリーを書いて思ったのだがひょっとしたら1行で終わってしまうかもしれない。
var isIE8 = (window.attachEvent && !window.addEventListener)? true : false;

2015/01/21

[本]私、社長ではなくなりました。 ― ワイキューブとの7435日

読了。

私、社長ではなくなりました。 ― ワイキューブとの7435日
安田 佳生(やすだ よしお)
プレジデント社
売り上げランキング: 22,906

1章 満員電車からの脱出
2章 営業カバンからの脱出
3章 劣等感からの脱出
4章 アポ取りからの脱出
5章 資金繰りからの脱出
6章 引け目からの脱出
7章 社長からの脱落

via:目次
ワイキューブの誕生から活動終了までの奇跡が描かれている作品なのだが、売り上げの割りには派手な金の使い方しているなーっと思った。

確かに、googleやDena(だった気がする)は、ランチ無料(だった気がする)だし、ピクサーでは焼きたてのピザが食べられたりするんだけど、その背景には高収益だからこそ実現しているのであって、純利益率が10%ぐらいだと厳しかったのかなーっと。

給料を高くしたら社員のパフォーマンスをあがるのではないかという仮定で施策を実施したみたいだけど、心理実験でそんなことはないと立証されているようだ。
これは、覚えておきたい。

女性社員に対してネイルができるようにマシーンを導入したという記述があったが、先進的だなーっと思った。
最近だと似た事例で、ドワンゴが社内に美容院を導入したらしいけどそれに近い印象を受けた。

売り上げを立てることと利益を立てることは違うとあったが確かにそうだなーっと思った。

失敗学としては素敵な本ですね。