Flotr2

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-28 (土) 18:58:13 | 最終更新:2015-03-31 (火) 11:55:45

歩み値からチャート推移を再現しようとして
このプラグインに当たった。

【環境】
Flotr2:バージョン不明

別に Flot というグラフプラグインも存在するので
Flotr2 は、Flot revision 2 なのかしらね。

Flotr2
GitHub:HumbleSoftware/Flotr2

インストール

GItHub:flotr2.min.js
からコピペ。

グラフの種類

いっぱいw
ローソク足(CandleStick)

Flotr2 参照。

基本設定

GitHub:flotr2.js

1600行目辺りから基本設定。

  1. Flotr.defaultOptions = {
  2.     colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
  3.     ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
  4.     title: null, // => The graph's title
  5.     subtitle: null, // => The graph's subtitle
  6.     shadowSize: 4, // => size of the 'fake' shadow
  7.     defaultType: null, // => default series type
  8.     HtmlText: true, // => wether to draw the text using HTML or on the canvas
  9.     fontColor: '#545454', // => default font color
  10.     fontSize: 7.5, // => canvas' text font size
  11.     resolution: 1, // => resolution of the graph, to have printer-friendly graphs !
  12.     parseFloat: true, // => whether to preprocess data for floats (ie. if input is string)
  13.     preventDefault: true, // => preventDefault by default for mobile events. Turn off to enable scroll.
  14.     xaxis: {
  15.         ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  16.         minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  17.         showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
  18.         showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
  19.         labelsAngle: 0, // => labels' angle, in degrees
  20.         title: null, // => axis title
  21.         titleAngle: 0, // => axis title's angle, in degrees
  22.         noTicks: 5, // => number of ticks for automagically generated ticks
  23.         minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
  24.         tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
  25.         tickDecimals: null, // => no. of decimals, null means auto
  26.         min: null, // => min. value to show, null means set automatically
  27.         max: null, // => max. value to show, null means set automatically
  28.         autoscale: false, // => Turns autoscaling on with true
  29.         autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
  30.         color: null, // => color of the ticks
  31.         mode: 'normal', // => can be 'time' or 'normal'
  32.         timeFormat: null,
  33.         timeMode:'UTC', // => For UTC time ('local' for local time).
  34.         timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
  35.         scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
  36.         base: Math.E,
  37.         titleAlign: 'center',
  38.         margin: true // => Turn off margins with false
  39.     },
  40.     x2axis: {},
  41.     yaxis: {
  42.         ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  43.         minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
  44.         showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
  45.         showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
  46.         labelsAngle: 0, // => labels' angle, in degrees
  47.         title: null, // => axis title
  48.         titleAngle: 90, // => axis title's angle, in degrees
  49.         noTicks: 5, // => number of ticks for automagically generated ticks
  50.         minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
  51.         tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
  52.         tickDecimals: null, // => no. of decimals, null means auto
  53.         min: null, // => min. value to show, null means set automatically
  54.         max: null, // => max. value to show, null means set automatically
  55.         autoscale: false, // => Turns autoscaling on with true
  56.         autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
  57.         color: null, // => The color of the ticks
  58.         scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
  59.         base: Math.E,
  60.         titleAlign: 'center',
  61.         margin: true // => Turn off margins with false
  62.     },
  63.     y2axis: {
  64.         titleAngle: 270
  65.     },
  66.     grid: {
  67.         color: '#545454', // => primary color used for outline and labels
  68.         backgroundColor: null, // => null for transparent, else color
  69.         backgroundImage: null, // => background image. String or object with src, left and top
  70.         watermarkAlpha: 0.4, // =>
  71.         tickColor: '#DDDDDD', // => color used for the ticks
  72.         labelMargin: 3, // => margin in pixels
  73.         verticalLines: true, // => whether to show gridlines in vertical direction
  74.         minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
  75.         horizontalLines: true, // => whether to show gridlines in horizontal direction
  76.         minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
  77.         outlineWidth: 1, // => width of the grid outline/border in pixels
  78.         outline : 'nsew', // => walls of the outline to display
  79.         circular: false // => if set to true, the grid will be circular, must be used when radars are drawn
  80.     },
  81.     mouse: {
  82.         track: false, // => true to track the mouse, no tracking otherwise
  83.         trackAll: false,
  84.         position: 'se', // => position of the value box (default south-east). False disables.
  85.         relative: false, // => next to the mouse cursor
  86.         trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
  87.         margin: 5, // => margin in pixels of the valuebox
  88.         lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series
  89.         trackDecimals: 1, // => decimals for the track values
  90.         sensibility: 2, // => the lower this number, the more precise you have to aim to show a value
  91.         trackY: true, // => whether or not to track the mouse in the y axis
  92.         radius: 3, // => radius of the track point
  93.         fillColor: null, // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
  94.         fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
  95.     }
  96. };
ieBackgroundColor(チャート背景色)

だと思うんだけど、変更しても変わらない。

xaxis(X軸)
mode

‘normal’ か ‘time’。

‘time’ を設定することで、日付や時刻をX軸値に設定できる。
ただし、X軸値はタイムスタンプで設定。
それも、文字列ではなく、数値として設定。
正:[ 1427241960000, 始値, 高値, 安値, 終値 ]
誤:[ ‘1427241960000’, 始値, 高値, 安値, 終値 ]

値自動変換機能がある割には、これは変換してくれない。

noTicks

どうも横幅に対して値が少ない時に、補助の軸線を何分割で引くか
という設定みたい。
1 にすると、どんなに項目間が広くても、補助線なしになる。

tickFormatter

項目値のフォーマット。
関数でも指定できるみたい。
でも、まだ使い方がよくわからない。

  1. tickFormatter: function(x){
  2.     var x = parseInt(x);
  3.     var myDate = new Date(x*1000);
  4.     var string = myDate.getFullYear();
  5.     string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
  6.     result = string;
  7.     return string;
  8. }

stackoverflow:Putting timestamp onto x axis in Flotr2 line graph

tickDecimals

小数点以下の桁数。
0 で整数表示。

timeFormat

日付のフォーマット。

  1. %h: hours
  2. %H: hours (left-padded with a zero)
  3. %M: minutes (left-padded with a zero)
  4. %S: seconds (left-padded with a zero)
  5. %d: day of month (1-31), use %0d for zero-padding
  6. %m: month (1-12), use %0m for zero-padding
  7. %y: year (four digits)
  8. %b: month name (customizable)
  9. %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
  10. %P: AM/PM (uppercase version of %p)

stackoverflow:Putting timestamp onto x axis in Flotr2 line graph

timeformat “%y/<br>%m” 日時ラベルの書式。htmlタグ使える。

k16’s note:時系列データのグラフをjQueryとFlotで描く

timeMode

‘UTC’ か ‘local’。

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-03-28 (土) 18:58:13 | 最終更新:2015-03-31 (火) 11:55:45

Moment の isValid() が機能しない

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-03-28 (土) 18:29:11 | 最終更新:2015-03-28 (土) 18:30:02

【環境】
moment:2.9.0

Moment.js
Moment.js Documentation

現象

公式ドキュメント:Moment.js Documentation

  1. moment("2010 13",           "YYYY MM").isValid();     // false (not a real month)

こう書いてあるけど、月を3ケタにすると通っちゃう。

しかも挙動がマチマチ。

  1. // 根本的にフォーマットが違っているパターン
  2. moment( '2010 12', 'YYYY-MM' ).isValid() // true
  3. var date = moment( $( '#month' ).val() );
  4. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  5.  
  6. moment( '2010 99', 'YYYY-MM' ).isValid() // false
  7.  
  8. moment( '2010 100', 'YYYY-MM' ).isValid() // true
  9. var date = moment( $( '#month' ).val() );
  10. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  11.  
  12. moment( '2010 129', 'YYYY-MM' ).isValid() // true
  13. var date = moment( $( '#month' ).val() );
  14. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
  15.  
  16. moment( '2010 130', 'YYYY-MM' ).isValid() // false
  17.  
  18. // フォーマットは正しいパターン
  19. moment( '2010-100', 'YYYY-MM' ).isValid() // true
  20. var date = moment( $( '#month' ).val() );
  21. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
  22. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-10
  23.  
  24. moment( '2010-101', 'YYYY-MM' ).isValid() // true
  25. var date = moment( $( '#month' ).val() );
  26. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
  27. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-11
  28.  
  29. moment( '2010-129', 'YYYY-MM' ).isValid() // true
  30. var date = moment( $( '#month' ).val() );
  31. var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-05
  32. var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-05-09
  33.  
  34. moment( '2010-130', 'YYYY-MM' ).isValid() // false

上記実験結果をまとめると

  • 2ケタ月は 13~99 について false
  • 3ケタ月は 100~129 について true、130~ false
  • フォーマットが異なっているときは、moment オブジェクトとしては認めても、Invalid Date
  • フォーマットが合っているときは、YYYY-DDD として、元日からの総合日数で年月日を算出している模様
    ただし、130日以降は NG

面白くていくつか実験してみたけど、解決策があるので、この辺で。
 

解決策

というか正しい書式。

  1. moment('It is 2012-05-25', 'YYYY-MM-DD').isValid();       // true
  2. moment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // false
  3. moment('2012-05-25',       'YYYY-MM-DD', true).isValid(); // true

第3引数に true を入れると「真面目に」チェックしてくれるみたい。 😎
今のところは正常にバリデーションしてくれてます。

と思ったら嘘だった

と、思ったら、次の日、鯖に上げてみたら true が機能しない。
そして、あれ?っと思ってローカルで再び試したら機能していない。
???
むぅ。。。

困った
Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-03-28 (土) 18:29:11 | 最終更新:2015-03-28 (土) 18:30:02

pjax(defunkt) -> フォームの値の受け渡し

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-18 (水) 12:44:50 | 最終更新:2015-02-18 (水) 13:33:45

フォームの値の受け渡しについて。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
GET

GET 渡しはすんなりできた。

  1. var url = 'index.php';
  2. var data = {
  3.     name : $( 'input[name = "name"]' ).val(),
  4.     value : $( 'input[name = "value"]' ).val()
  5. };
  6. $.pjax({
  7.     url: url,
  8.     type: 'GET',
  9.     data: data,
  10.     container: '#container',
  11. });
  1. // print_r( $_GET ); 結果
  2. Array
  3. (
  4.     [name] => hoge
  5.     [value] => 1
  6. )

 

JSON

dataType を json にしても、結果は同じ。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'json',
  6.     container: '#container',
  7. });

 

JSONP

dataType を jsonp にすると、2つばかり $_GET の値が増えた。。。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'jsonp',
  6.     container: '#container',
  7. });
  1. // print_r( $_GET ); 結果
  2. Array
  3. (
  4.     [callback] => jQuery21309920695357463317_1424227516871
  5.     [name] => hoge
  6.     [value] => 1
  7.     [_] => 1424227516872
  8. )

まぁ、JSON と JSONP のお勉強は今度ということで。 🙄
 

POST
  1. var url = 'index.php';
  2. var data = {
  3.     name : $( 'input[name = "name"]' ).val(),
  4.     value : $( 'input[name = "value"]' ).val()
  5. };
  6. $.pjax({
  7.     url: url,
  8.     type: 'POST',
  9.     data: data,
  10.     container: '#container',
  11. });
  1. // print_r( $_POST ); 結果
  2. Array
  3. (
  4. )

$_POST を取得できていない。
そして通信時間が長くなった。

dataType を text にしても、結果は同じ。
 

serialize()

data を serialize() にしても結果は同じ。

  1. var url = 'index.php';
  2. $.pjax({
  3.     url: url,
  4.     type: 'POST',
  5.     data: $( 'form' ).serialize(),
  6.     container: '#container',
  7. });

 

JSON, JSONP

dataType を json にしたら、通信すら行われなくなった。
JSONP にしても、通信は行われない。

  1. $.pjax({
  2.     url: url,
  3.     type: 'GET',
  4.     data: data,
  5.     dataType: 'json',
  6.     container: '#container',
  7. });

 
困った
仕方ないので、今回は GET で対応。

Posted by muchag | jQuery,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-18 (水) 12:44:50 | 最終更新:2015-02-18 (水) 13:33:45

jquery.pjax.js (defunkt 版)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-11 (水) 15:20:23 | 最終更新:2015-02-18 (水) 15:29:09

AjaxpushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
 

URL 変更機能

別ページの URL へ切り替える。
 

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
 

インストール

GitHub:defunkt/jquery-pjax から DL して配置。

falsandtru 版 と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
 

使い方
ライブラリの読込
  1. <script src="jquery.min.js"></script>
  2. <script src="jquery.pjax.defunkt.js"></script>

 

ファイルの配置
index.html
  1. <body>
  2.     <div>pjax before.</div>
  3.  
  4.     <div id="container">
  5.         <div><button>pjax before.</button></div>
  6.     </div>
  7.  
  8.     <script type="text/javascript">
  9.     $( document ).ready( function() {
  10.  
  11.         $( 'button' ).click( function() {
  12.  
  13.             $.pjax({
  14.                 url: 'pjax_test.php';
  15.                 container: '#container',
  16.                 fragment:  '#container_new'
  17.             });
  18.         });
  19.     });
  20.     </script>
  21. </body>

 

pjax_test.html
  1. <body>
  2.     <div>pjax after.</div>
  3.  
  4.     <div id="container_new">
  5.  
  6.         <div>pjax after. Good Job!</div>
  7.  
  8.     </div>
  9. </body>

 

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
 

連続

ところが、1度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
 
そこで1枚のページで差し替えるタイプにしたら、連続して動作した。

index.php
  1. <body>
  2.     <div id="container">
  3.         <div id="test">
  4.             <button id="hoge_1">pjax</button>
  5.             <button id="hoge_2"><?php echo ( empty( $_GET&#91;'value'&#93; ) ) ? 1 : $_GET&#91;'value'&#93; + 1; ?></button>
  6.         </div>
  7.     </div>
  8.  
  9.     <script type="text/javascript">
  10.     $( document ).ready( function() {
  11.         $( 'button' ).click( function() {
  12.             $.pjax({
  13.                 url: 'index.php?value=' + $( '#hoge_2' ).text(),
  14.                 container: '#container',
  15.                 fragment:  '#container_new'
  16.             });
  17.         });
  18.     });
  19.     </script>
  20. </body>

ただし、

  1. container: '#container',
  2. fragment: '#container'

ここを同じ名前にすると1回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな~。。。
 
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決?

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

  1. container: '#container',

これでちゃんと動く。
 

オプション、イベント

オプションイベント を見てやってみましょう。
 

開始時処理
  1.  
  2. $(document).on('pjax:send', function(e) {
  3.     $('body').append("<div id='loading'>処理中</div>");
  4. });

 

終了時処理
  1. $(document).on('pjax:complete', function(e,data) {
  2.     $("#loading").remove();
  3. });

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に!
 

フォームの値の受け渡し

フォームの値の受け渡し 参照。
 

注意

ブラウザバックとかの挙動への対処が必要ね~。
 

参考サイト

RakSul:はじめての「pjax」
Qiita:pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix:defunkt版pjaxの説明

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-11 (水) 15:20:23 | 最終更新:2015-02-18 (水) 15:29:09

Crayon Syntax Highlighter

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-02-10 (火) 12:32:38 | 最終更新:2015-02-10 (火) 20:35:18

長年愛用してきた iG:Syntax Hiliter とおさらばする日がやってきた。寂しい><

Crayon 導入中止

せっかく記事を書いたけど、Crayon の導入を中止した。

な~ぜか!
as, vb のショートタグに無反応 😯

さよなら Crayon 短い付き合いだったね。。。

ここまで

 

【環境】
WordPress:4.1
Crayon Syntax Highlighter:2.6.9
iG:Syntax Hiliter:4.3
お別れの理由

iG:Syntax Hiliter では、知らないうちに、php や javascript など、お作法のある言語では、
その記述が必須になっていた。
 
このように記述しなければならず

  1. <?php
  2. echo 'Hello World!';
  3. ?>

これでは、ハイライトされない。

  1. echo 'Hello World!';

 
これはこれで大切なことなのかもしれないけれど、JavaScript のときは、特に鬱陶しくなってしまう。

  1. jQuery()
  2.  
  3. $()
  1. <script type="text/javascript">
  2. jQuery()
  3.  
  4. $()
  5. </script>

 
ね!

jQuery の書式 こちらの記事を書いていて、どうにも我慢できなくなり、
iG:Syntax Hiliter とお別れする決心をしました。
 

選んだ理由
選択肢

そもそも選択肢が少ないね~。
前に iG:Syntax Hiliter を導入したとき も選択肢が少なかったけど
今でもあまりないみたい。
需要は高そうなのにね~。
 

決め手

乗り換えるにあたって、最大の決め手はもちろん!
今までの記事を書き直さなくて良いこと。
 
その点、Crayon Syntax Highlighter は、iG:Syntax Hiliter で利用していたショートタグ
[php]hogehoge[/php]
を解釈してくれるので、いいね! 🙂

言語混在

後、嬉しい機能として言語の混在でもOK。
 

必要とする仕様・機能

その他、私が必要とする機能が一通り揃っていたのでOK。

  • 仕様
    • 1行毎に背景色を変える
    • 行番号を表示できる
    • QuickTag から使える(入力が楽)
  • 機能
    • 強調行を設定できる
    • 開始行番号を設定できる

 

設定

下記は私が変更した設定。
 

一般設定
テーマ

リストからお好みのを探して [Duplicate] とすると、
テーマがコピーされ編集できる状態になるので [Edit]
 
すると編集画面が起動するので、画面右側でカスタマイズ。
 

ツールバー

[ツールバーの表示]-[常に表示]
[ソース言語を表示]-[常に表示]
 

コード

常にスクロールバーを表示する
チェックを入れる。
 

タグ

Crayonsとして[php][/php]のようなミニタグをキャプチャします。
チェックを入れる。

これで、古い記事のショートタグを認識してくれる。
 
但し、[php num=”3″ highlint=”5″] のように属性つきのものは、このままだと無効になってしまうので
Crayon Syntax Highlighter に拾ってもらえる文言に変更。

  1. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " num=", " start-line=");
  2. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " firstline=", " start-line=");
  3. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " highlight=", " mark=");

これで無事に Crayon に拾ってもらえた。

また、逆に [php] という文字列を表示したいときは、$[php] のように前に $ を付けてやることで、
Crayon をエスケープできる。
 

その他

アニメーションを無効にする
プログラム実行時の統計を無効にする
重くなりそうなので、チェックをつけた。
 

デバッグ
エラー

個々設置(Crayon)のエラーを記録
システム全体のエラーを記録
カスタムエラーメッセージを表示する
重くなりそうなので、ひとまず全てのチェックを外した。

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-02-10 (火) 12:32:38 | 最終更新:2015-02-10 (火) 20:35:18

Numeral.js (数値フォーマット)

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 22:26:14 | 最終更新:2015-02-08 (日) 22:26:14

数値フォーマットライブラリ。

Qiita:JavaScriptでカンマ区切りなどによる数値のフォーマットができるNumeral.jsが便利
こちらで紹介されていた。
 
Numeral.js

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 22:26:14 | 最終更新:2015-02-08 (日) 22:26:14

jquery.shapeshift.js (要素を DnD で並べ替える)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 19:18:53 | 最終更新:2015-02-12 (木) 12:34:33

前回の jquery.tile.js (タイル状に配置)で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js

またもや、下記サイトにお導きをいただきました。
啓文社:[jQuery] タイルをドラッグ&ドロップで並べ替え

【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS

GitHub:jquery.shapeshift
ここから DL して、入手。

すごい数のオプションw

  1. <script type="text/javascript">
  2. defaults = {
  3.     selector: "*",
  4.     enableDrag: true,
  5.     enableCrossDrop: true,
  6.     enableResize: true,
  7.     enableTrash: false,
  8.     align: "center",
  9.     colWidth: null,
  10.     columns: null,
  11.     minColumns: 1,
  12.     autoHeight: true,
  13.     maxHeight: null,
  14.     minHeight: 100,
  15.     gutterX: 10,
  16.     gutterY: 10,
  17.     paddingX: 10,
  18.     paddingY: 10,
  19.     animated: true,
  20.     animateOnInit: false,
  21.     animationSpeed: 225,
  22.     animationThreshold: 100,
  23.     dragClone: false,
  24.     deleteClone: true,
  25.     dragRate: 100,
  26.     dragWhitelist: "*",
  27.     crossDropWhitelist: "*",
  28.     cutoffStart: null,
  29.     cutoffEnd: null,
  30.     handle: false,
  31.     cloneClass: "ss-cloned-child",
  32.     activeClass: "ss-active-child",
  33.     draggedClass: "ss-dragged-child",
  34.     placeholderClass: "ss-placeholder-child",
  35.     originalContainerClass: "ss-original-container",
  36.     currentContainerClass: "ss-current-container",
  37.     previousContainerClass: "ss-previous-container"
  38. };
  39. </script>

 

HTML
JavaScript 部分

上記オプションの必要部分を、下記で上書きする。

  1. <script type="text/javascript">
  2. $(".container").shapeshift({
  3.     minColumns: 3
  4. });
  5. </script>

 

フック

参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね~。

  1. <script type="text/javascript">
  2. $(".container").on('ss-drop-complete', function(e){
  3.     $('.tile').tile(4);
  4. });
  5. </script>

 

要素部分
  1. <div class="container">
  2.     <div class="tile">要素</div>
  3.     <div class="tile">要素</div>
  4.     <div data-ss-colspan='2'>要素</div>
  5.     <div class="tile">要素</div>
  6. </div>

 

CSS
  1. .container {
  2.     border: 1px dashed #ccc;
  3.     position: relative;
  4. }
  5.  
  6. .container > div {
  7.     background: #CCC;
  8.     height: 100px;
  9.     position: absolute;
  10.     width: 80px;
  11. }
  12.  
  13. .container > div[data-ss-colspan='2'] { width: 170px; }
  14.  
  15. .container .ss-placeholder-child {
  16.     background: transparent;
  17.     border: 1px dashed red;
  18. }

 

タイルが全て重なってしまう現象

2度起きた。
 
1度目の原因と解決法は忘れてしまった。。。残念。
 

原因

JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯

  1. $('[id = "hoge"') // 誤
  2.  
  3. $('[id = "hoge"]') // 誤

閉じカッコ(])が抜けていた。
 
タイル要素内のテキストボックスの値チェックを入れたときに起きた。

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 19:18:53 | 最終更新:2015-02-12 (木) 12:34:33

jquery.tile.js (タイル状に配置)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

jquery.tile.js
要素をタイル状に並べてくれるプラグイン。

説明サイト
URIN HACK:要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js

【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS

jquery.tile.js
こちらからソースをコピペして

jquery.tile.js

を作成して配置。
 

HTML
JavaScript 部分
  1. <script src="jquery.tile.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4.   $('.tile').tile();
  5. });
  6. </script>

4行目、titl メソッドの引数に数値を入れると、列数を指定できる。

というわけではなく、x列毎に同じ高さに揃える という指定らしく

  1. $('.tile').tile(4);

このように設定して、表示エリアを5列分取ったら、高さがずれたw

つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある
 

要素部分
  1. <div class="tile">1</div>
  2. <div class="tile">2</div>
  3. <div class="tile">3</div>
  4. <div class="tile">4</div>
  5. <div class="tile">5</div>

綺麗に並んだ~♪
 

CSS

お好みに応じて設定。

  1. .tile {
  2.     border:1px solid #999;
  3.     background:#f0f0f0;
  4.     float:left;
  5.     width:130px;
  6.     margin:0 10px 10px 0;
  7. }

啓文社:[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました~

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

ナビゲーションメニューバー -> CSS MenuMaker

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 12:46:37 | 最終更新:2015-02-08 (日) 12:50:18

CSS MenuMaker は、シンプルでよかった~♪

同サイト内にカスタマイズ機能も付いていて
非常に便利♪

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 12:46:37 | 最終更新:2015-02-08 (日) 12:50:18

EGit -> インストール -> 2015-02-06

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿:2015-02-06 (金) 14:16:06 | 最終更新:2019-03-25 (月) 14:54:52

EclipseGit を使えるとのことなので、利用してみる。

最近の手抜き記事の流れに合わせて、詳細は参考サイト参照。
hiromasa.another :o):Eclipse EGit の使い方(1/2)

【環境】
Eclipse: 4.4
EGit: 3.6.2.201501210735-r
OS: Windows7 SP1 64bit
プラグインの更新

Eclipse 4.4 には、EGit が同梱されているとのこと。
 

現状確認

[ヘルプ]-[インストール詳細]
[プラグイン] から確認してみると、確かに
「Eclipse EGit」を確認できた。
3.4.1.201406201815-r とある。

更新

[ヘルプ]-[新規ソフトウェアのインストール]
[作業対象]-[追加]
名前とロケーションを入力。

名前:EGit
ロケーション:http://download.eclipse.org/egit/updates

 
すると戻ったダイアログのリストに
・Eclipse Git チーム・プロバイダー
・JGit
と出てくるので、両方チェックして [次へ]

元の要求は変更されました。
“Eclipse Git チーム・プロバイダー – Task focused interface” はすでにインストールされているため、代わりに更新が実行されます。
“Git Java 実装” はすでにインストールされているため、代わりに更新が実行されます。

と出てくるので、[次へ]

ライセンスに同意して [完了]
 

インストール

画面右下に
「ソフトウェアのインストール中: (?%)」と表示され
更新が完了すると、再起動を促されるので再起動。
 

完了確認

改めてバージョンを確認してみると
3.6.2.201501210735-r
となっている。
更新完了。
 

ビューの表示

[ウィンドウ]-[ビューの表示]-[その他]
[Git]-[Git リポジトリー]-[OK]
これで下ペインに「Git リポジトリー」ビューが表示される。
 

ローカルリポジトリの作成

[プロジェクト右クリック]-[チーム]-[プロジェクトの共有]
[Git]-[次へ]
 
[プロジェクトの親フォルダー内のリポジトリーを使用または作成] にチェックを入れる。
と、すぐ下の表示が切り替わって、プロジェクトディレクトリが表示される。
プロジェクトをクリックしてアクティブに。(チェックボックスはチェックできないw)
[リポジトリーの作成]
しばらく Eclipse が作業。
プロジェクトディレクトリにチェックがつく。
[完了]
 

フィルタの設定

デフォルトだと隠しファイルが見えないため、設定を変える。

参考サイトの SS だとわかりにくかったため、一応画像を。
 
2015-02-06_Eclipse_View_Customize①プロジェクトツリーのツールバーにある▼(下三角)をクリック。

②[フィルター] を選択。
※参考サイトとメニューが異なっている

[.* リソース] のチェックを外す。
[OK]
 
確かに .setting とか見えるようになった。
 

コミット除外項目の設定

コミット不要であるフォルダやファイル を右クリックして
[チーム]-[無視]

今回無視設定をしたディレクトリ
  • .settings
  • .buildpath
  • .project

 

※Unable to ignore resources

このとき、プロジェクトを右クリックして無視を選ぶと
「Unable to ignore resources」というエラーになる。
プロジェクトを無視するわけにはいかないので、当たり前なんだけど
それまでずっとプロジェクトを右クリックしていたせいで
うっかりやってしまい、???になった。
気を付けましょう。。。
 

コミット
  1. [プロジェクト右クリック]-[チーム]-[コミット]
  2. コミットメッセージを入力
  3. 該当ファイルにチェックをつける
  4. [コミット]

※チェックをつける際、全て選択はないのかな~と思って見回していたら、
ファイル (0/?) と書かれているところの右端にあった。
ちょっと見にくいね。
 

ショートカットキー
有効化
  1. [ウィンドウ]-[パースペクティブのカスタマイズ]
  2. [コマンド・グループ可用性](タブ)
  3. [Git](チェック)
  4. [OK]

これで「Cntl + #」=「Cntl +Shift + 3」でコミットダイアログが出る。

2015-12-08 追記 ここから

Eclipse を Mars.1 (4.5.1) に変更したら、メニュー内容が変わっていた。

  1. [ウィンドウ]-[パースペクティブ]-[パースペクティブのカスタマイズ]
  2. [ショートカット](タブ)
    1. [Git](チェック)
    2. [OK]

ただ、こちらのチェックは入っていなかったけど
「Cntl + #」=「Cntl +Shift + 3」でコミットダイアログが出た。

ツールバーの表示
  1. [ウィンドウ]-[パースペクティブ]-[パースペクティブのカスタマイズ]
  2. [Action Set Availablity](タブ)
    1. [Git](チェック)
    2. [OK]
2015-12-08 追記 ここまで

 

変更

ショートカット
 

履歴の確認

下ペインの [ヒストリー] ビューで確認。

※[ヒストリー] ビューが表示されていない場合
[ウィンドウ]-[ビューの表示]-[その他]
[チーム]-[ヒストリー]-[OK]
 

おまけ

作業途中に気が付いた。
この作業をしていたら、いつのまにかプロジェクトエクスプローラ内の文字が黒に。。。
テーマ で、背景を暗くしたので、ほぼ読めない。。。

困った~ XD
 
と思っていたら、最初のコミットを完了した時点で
無視ファイルのみ黒文字となり、他のファイルは白文字に戻った。

無視ファイルとは別に、コミット前の変更ファイルとそのファイルを含むディレクトリの文字が反転する仕掛けになってるみたい。

それにしても、これじゃ見えないにゃ。。。
 

2015-05-26 追記 ここから
エラー内容
エラー・ログ ビュー
プラグイン “platform:/plugin/org.eclipse.egit.ui/icons/eview16/repo_rep.gif” を解決できません。

EGit を 3.7.1 へアップデートしたら、上記のようなエラーが、エラー・ログ ビューへ出るようになった。

正確には、ERMaster の導入、PDT のアップデートをやりながらだったので
EGit のアップデートが直接の原因かどうかは不明。

Git リポジトリー ビュー

そして、Git リポジトリー ビューでは、下記のエラーが。

ビューを作成できませんでした: org.eclipse.egit.ui.RepositoriesView
コミット不能

ショートカットキーはおろか、[プロジェクト右クリック]-[チーム] からもコミットできず。

というか、コンテクストメニューがいつもと違う。

EGit の設定自体がクリアされた感じ。

あるプロジェクトは、[プロジェクトの共有] がグレーアウト。
またあるプロジェクトは、[プロジェクトの共有] 自体が表示されていない。

解決
Eclipse 本体のアップデート

Google 先生に質問したところ、下記ページがひっかかってきた。
Eclipse:Bug 460981 – Update to 201502260915-r today, Repository View fails

ここを読む限りでは、Eclipse 本体を 4.4.2(LUNA SP2) へアップデートすれば直るよ~、と書いてあるっぽい。

というわけで、本体をアップデートしてみた。

手順

メニュー
[ヘルプ]-[新規ソフトウェアのインストール]

使用可能なソフトウェア
[作業対象]:http://download.eclipse.org/eclipse/updates/4.4
[追加]

リポジトリーの追加
[名前]:Eclipse LUNA(任意)
[OK]

使用可能なソフトウェア
[すべてを選択]-[次へ]

ここで下記メッセージ。

要求されたインストールを完了できませんでした。

修復インストール・ページ
次の代替解決策のいずれかを選択します:
◯同じインストールはそのまま保持し、互換性を持たせるためにインストールされている項目を変更(デフォルト選択)
◯項目をインストールして互換性を持たせるためにインストールを更新
◯オリジナル・エラーを表示し、ユーザー独自の解決策を構築:

デフォルト選択のまま、[次へ]

インストールの詳細
[完了]

結果
【環境】
Eclipse:4.4.1(LUNA SP1)→4.4.1(LUNA SP1)

アップデートされてない~!!!

けど直った。。。っぽい。。。

2015-05-26 追記 ここまで

 

参考サイト

hiromasa.another :o):Eclipse EGit の使い方(1/2)
DQNEO起業日記:EclipseでGitコミットのショートカットキ―を有効にする方法
Qiita:逆引き EGit

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿:2015-02-06 (金) 14:16:06 | 最終更新:2019-03-25 (月) 14:54:52
« 前ページへ次ページへ »