AngularJS Eclipse 1.2.0

Posted by muchag | AngularJS,Eclipse,Library & PlugIn & AddIn | 2017-09-03 (日) 11:21:41

AngularJS 用プラグイン。

【環境】
Eclipse:Oxygen (4.7)
AngularJS Eclipse:1.2.0.201606160950
OS:Windows10 Pro 64bit
インストール

マーケットプレイスからインストール。

適用

プロジェクトのコンテキストメニュー
[構成]-[Convert to AngularJS Project…]

Term Plugin の
[モジュール] というダイアログが出るので [適用して閉じる]

設定
検証

プロジェクトのコンテキストメニュー
[プロパティー]

左ペン [検証]-[HTML 構文]
[プロジェクト固有の設定を可能にする] にチェック
[次の検証問題の重大度レベルを選択:]

要素

[不明なタグ名]-[無視]
[無効なタグ名]-[無視]

属性

[未定義の属性名]-[無視]
[未定義の属性値]-[無視]

[適用して閉じる]
[検証設定が変更されました] ダイアログがでるので [はい]

アウトライン

[ウィンドウ]-[ビューの表示]-[その他]
[JavaScript]-[Tern Outline]
で、専用アウトラインビューが開く。

参考サイト

Java Code Geeks:Eclipse IDE AngularJS Tutorial

AngularJS,Eclipse,Library & PlugIn & AddIn | 2017-09-03 (日) 11:21:41 |

EPP Marketplace Client

Posted by muchag | Eclipse,Library & PlugIn & AddIn | 2017-09-03 (日) 10:35:24

プラグイン配布所のクライアント。

【環境】
Eclipse:Oxygen (4.7)
EPP Marketplace Client:1.5.1.v20160929-1432
OS:Windows10 Pro 64bit
概要

Marketplace もプラグインなんだそうで
Oxygen インストール時には、存在しなかったので
手動で追加。

インストール

2017-09-03 現在
Oxygen 用マーケットプレイス配布ページ は、まだ存在しないようなので
Neon 用マーケットプレイス配布ページ からインストールした。

これによる不具合が起きませんように。。。

Eclipse,Library & PlugIn & AddIn | 2017-09-03 (日) 10:35:24 |

jQuery Easing Plugin

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2016-03-05 (土) 10:49:20


jQuery Easing Plugin (version 1.3)
最終更新日:2013-01-31

【環境】
jQuery: 1.11.3
jquery.easing.: 1.3
概要

アニメーション動作パターン集。

jQuery が持つアニメーション動作パターンを拡張してくれる。

DL

jQuery Easing Plugin (version 1.3) の Download より
jquery.easing.1.3.js のリンクをクリック。

一覧

Easing Function 早見表

jQuery,Library & PlugIn & AddIn | 2016-03-05 (土) 10:49:20 |

インストール 1.8.1 キャッシュ 編

Posted by muchag | Library & PlugIn & AddIn,XAMPP | 2016-01-24 (日) 16:49:20

インストール 1.8.1

キャッシュ用ライブラリの導入。

【環境】
XAMPP for Windows: 1.8.1
APC
DL

APC:Win Web Dev より DL。
いっぱいあってよくわからないので
参考サイトの説明書に従った。

表記にtsとあるのはthread safe、ntsとあるのはnon thread safeという意味。ということでApacheはtsバージョン、IISはntsバージョンを使います。

OXY NOTES:XAMPP1.8.2にAPCとmemcachedを導入する方法

2016-01-24 現在
php_apc_3114_beta_php54_win7-2008.zip

配置
解凍

DL してきた ZIP ファイルを解凍すると

php_apc_3114_beta_php54_win7-2008.dll

というファイルが出てくる。

リネーム
php_apc.dll

と、リネーム。

配置
D:\xampp\php\ext

内へ配置。

php.ini

php.ini へ下記のように追記。

  1. extension=php_apc.dll ; added 2016-01-24
  1. [APC]
  2. ; added 2016-01-24
  3. apc.enabled = 1
  4. apc.shm_size = 32M
  5. apc.ttl = 0
  6. apc.user_ttl = 0
  7. apc.gc_ttl = 3600
  8. apc.stat = 1
Memcached
参考サイト

OXY NOTES:XAMPP1.8.2にAPCとmemcachedを導入する方法

Library & PlugIn & AddIn,XAMPP | 2016-01-24 (日) 16:49:20 |

YEdit

Posted by muchag | Eclipse,Library & PlugIn & AddIn | 2016-01-06 (水) 17:38:42

テーマを「ダーク」にしているせいか
YAML ファイル内容がグレー一色で暗いので、
こちらを試してみた。
GitHub:YEdit

【環境】
Eclipse:Mars.1 (4.5.1) PHP
OS:Windows7 SP1 64bit
インストール
  1. [ヘルプ]-[Eclipse マーケットプレース]
  2. Eclipse マーケットプレース
    1. 検索窓で「YEdit」
    2. [インストール]
  3. 選択されたフィーチャーの確認
    1. [確認]
  4. ライセンスのレビュー
    1. [使用条件の条項に同意します] を選択
    2. [完了]
関連付け
  1. [ウインドウ]-[設定]
  2. 左ペイン:[一般]-[エディター]-[ファイルの関連付け]
    1. ファイルの関連付け
      1. ファイルタイプ
        1. 選択。なければ [追加]
      2. 関連付けられたエディター
        1. 選択。なければ [追加]
    2. [OK]
書式設定
  1. [ウインドウ]-[設定]
  2. 左ペイン:[YEdit Preferences]-[「色」設定]
メモ
  • コメント:RGB(98, 98, 98)
  • キー:RGB(167, 236, 33)
  • Scalars:RGB(232, 198, 163)
  • 定数:RGB(167, 236, 33)、太字
  • アンカー:未設定
  • エイリアス:未設定
  • タグ:未設定
  • 文書:未設定
  • デフォルト:未設定
Eclipse,Library & PlugIn & AddIn | 2016-01-06 (水) 17:38:42 |

EGit -> ブランチ

Posted by muchag | Eclipse,Library & PlugIn & AddIn | 2015-12-08 (火) 19:04:16


Eclipse:EGit/User Guide Branching

【環境】
Eclipse:Mars.1 (4.5.1) PHP
EGit:4.1.1.201511131810-r
OS:Windows7 SP1 64bit
切り替え(checkout)

Eclipse:EGit/User Guide Checking out an existing Branch
→スタート地点が3通り載っている。

プロジェクトコンテキストメニュー

  1. [チーム]-[切り替え]-[(当該ブランチ)]
新規作成

Eclipse:EGit/User Guide Creating a New Local Branch
→スタート地点が3通り載っている。

プロジェクトコンテキストメニュー

  1. [チーム]-[切り替え]-[新規ブランチ]
  2. 新規ブランチの作成(Branch Creation Dialog
    1. ソース:変更したいときは [選択] *1
    2. ブランチ名:任意
    3. プッシュおよびプルのアップストリームを構成する
      1. プルを行う場合
        1. 現在、詳細不明。大体の意味を理解した上で、ひとまず下記の通り
        2. ◎アップストリームのコミットをローカル・ブランチにマージする
        3. ◯アップストリームにローカル・ブランチのコミットをリベースする
    4. 完了

*1:ソースの選択
ローカル、リモートから任意に選択できる

プッシュ

プロジェクトコンテキストメニュー

  1. [チーム]-[リモート]-[プッシュ]
  2. 宛先 Git リポジトリー
    1. ◎構成済みリモート・リポジトリー
      1. 当該リモート先を選択
    2. ◯カスタム URI
      1. 一時的なリポジトリを利用する際に用いる(Pushing to other Repositories
    3. [次へ] ※1
  3. プッシュ仕様指定
    1. 作成/更新仕様の追加
      1. ソース参照:選択(ソースを選択すると、宛先に同名ブランチが自動選択される)
      2. 宛先参照:選択
      3. [仕様の追加] これで、プッシュの仕様という欄に追加される
    2. 事前定義仕様の追加
      1. ここの欄は、プッシュ仕様をまとめて追加したいときに利用するみたい
      2. [構成済みプッシュ仕様の追加]
      3. [すべてのブランチ仕様を追加]
        1. 読んだまんま。全てのブランチをプッシュするプッシュ構成となる
      4. [すべてのタグ仕様の追加]
    3. [‘origin 構成に仕様を保管] にチェックをすると、次回以降、プッシュ仕様の設定をスキップできる?/li>
    4. [次へ] or [完了]
  4. プッシュ確認
    1. プッシュ内容を表示してくれる
    2. 完了
  5. プッシュ結果
    1. プッシュ結果を表示してくれる
    2. [OK]

※1:次のダイアログのプッシュ仕様を設定しない状態で、ここで [完了] とすると
Can’t connect to any repository:
というエラーになる。

マージ&リベース
マージ リベース
概略 各ブランチの履歴がそのまま残る 履歴が統合される
メリット コミットの改変が起こらない
操作が容易
履歴が一本化される
デメリット 履歴が複雑化する コミットの改変が起こる
操作が多少煩雑
適性 リモートをローカルへ統合するとき ローカルをリモートへ統合するとき
参考サイト

The Powerful Code:使い分けできていますか?マージ(merge)&リベース(rebase)再入門
→メリット&デメリットおよび適性が記述されており、大変わかりやすい説明でした。感謝!

マージ

branchA で開発していた新機能を master へマージするという前提。
マージ元:branchA
マージ先:master
とする。

  1. ブランチを master へ切り替える
  2. [チーム]-[マージ](プロジェクトコンテキストメニュー)
  3. Merge ‘master’
    1. ツリーからマージ元ブランチを選択(今回は [ローカル]-[branchA])
    2. マージ・オプション
      1. 現状意味不明なので、デフォルトのまま
      2. ◎コミット
      3. ◯コミットなし
      4. ◯スカッシュ
    3. 高速フォワード・オプション
      1. 現状意味不明なので、デフォルトのまま
      2. ◎高速フォワードの場合はブランチ位置のみ更新する
      3. ◯高速フォワードの場合はマージ・コミットを作成する
      4. ◯高速フォワードでない場合は失敗
    4. [マージ]
  4. マージ結果
    1. マージ結果を表示してくれる
    2. [OK]
コンフリクト解消

マージした結果、コンフリクト(競合)を起こすことがある。

コンフリクトを起こしているファイルを開く
コンフリクト内容を、両方残すなり、片方を残すなり、対処
ファイルを保存
[チーム]-[索引に追加(Add to index)] とすることで、コンフリクトマークが消える
コンフリクトを全て解消したらコミット
プッシュ

コンフリクト箇所

プロジェクトエクスプローラ
コンフリクトを起こしているファイルにマーク(赤い左右矢印?)が付く
当該ファイル

  1. <<<<<<< HEAD
  2.     // 元々あったコード
  3.     $hoge = 0;
  4. =======
  5.     // マージしたコード
  6.     $hoge = 1;
  7. >>>>>>> refs/heads/3.8.17.1
リセット

プロジェクトコンテキストメニュー

  1. プロジェクトコンテキストメニューから [チーム]-[切り替え] で、リセットしたいブランチをアクティブにする
  2. プロジェクトコンテキストメニューから [チーム]-[リセット]
  3. リセット: project_name
    1. ツリーから、上書きしたいブランチを選択
    2. リセット先:ツリーでブランチを選択することで自動入力
      1. 「リセット先」と書かれると、「リセットしたいブランチ」のように受け取れるけど、
        実際は「当該ブランチをリセットするために元とするブランチ」をセットする
    3. リセット・タイプ
      1. ◯ソフト(HEAD 更新)
      2. ◯混合(HEAD およびインデックス更新)
      3. ◎ハード(HEAD, index, and working tree updated)
        1. 何かも全て更地にしてコピー
    4. リセット
  4. 確認ダイアログ [はい]
直前のコミット状態まで戻す

ファイルのコンテキストメニュー
[置換]-[HEAD 改訂]

参考サイト
河西 高明 BLOG:Eclipse EGit で作業ファイルの変更を個別に元に戻す方法

Eclipse,Library & PlugIn & AddIn | 2015-12-08 (火) 19:04:16 |

Can’t connect to any repository:

Posted by muchag | Eclipse,Library & PlugIn & AddIn | 2015-12-03 (木) 12:37:39

EGit + Bitbucket でプッシュしようとしたときのエラー。

【環境】
[Eclipse] 4.4.1(LUNA SP1)
[EGit] 3.7.1.201504261725-r
[OS] Windows7 SP1 64bit
状況

EGit プラグインを入れてローカルリポジトリを作成し
後から Bitbucket へ登録してリモートリポジトリを設定した。

  1. プロジェクトのコンテキストメニュー
  2. [チーム]-[リモート]-[プッシュ]
  3. [宛先 Git リポジトリー]
  4. [完了]

初回設定時も [構成済みのリモート・リポジトリー] 利用時も同様のエラーが出た。

Can’t connect to any repository: ssh://git@bitbucket.org/username/projectname.git (Nothing to Push。)
原因

プッシュ仕様設定を行っていなかった。

解決策
  1. プロジェクトのコンテキストメニュー
  2. [チーム]-[リモート]-[プッシュ]
  3. [宛先 Git リポジトリー]
  4. [次へ]
  5. [プッシュ仕様設定]
    1. [作成/更新仕様の追加]
      1. [ソース参照]-[refs/heads/master(当該ブランチ?)
      2. [宛先参照] は、ソース参照を設定することで自動的に設定される
      3. [仕様の追加] をクリックすると、[プッシュの仕様に追加される
    2. [‘origin’ 構成に仕様を保管] にチェックを入れると、次からは [宛先 Git リポジトリー] で [完了] するだけでプッシュできる
  6. [次へ]
  7. [プッシュ確認]
  8. [完了]
参考サイト

メモ:ubuntu14.10でGit

別ルート対処法

プロジェクトコンテキストメニューではなく、Git リポジトリービューからプッシュする。

  1. Git リポジトリービュー内の当該プロジェクトを開く
  2. [リモート] を開く
  3. 当該リモート名(リモートリポジトリ設定時に入力した名称。デフォルトは origin)を開く
  4. 同じ URI が2行並んでいるので、プッシュ用(赤い↑)を右クリック
  5. [プッシュの構成]
  6. [保管およびプッシュ]
参考サイト

じっとしてないEGit:プッシュしたい内容があるのに、Can’t connect to any repository: XXXXXXX (Nothing to push.) と出た時の対応

Eclipse,Library & PlugIn & AddIn | 2015-12-03 (木) 12:37:39 |

jsTree

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-10-28 (水) 14:21:48

ひさびさにツリーメニューを実装しようと思って
Treeview を設置してみたけど、動かない。。。
更新も止まっているようだし、他のプラグインを探してみたら良さそうなのがあった。 😯
採用するかどうかはわからないけど、使い方をメモ。

コード中に出てくる vakata って何かと思ってたけど
作者の HN でした。
GitHub:vakata

【環境】
jsTree:3.2.1
jQuery:1.11.3
DL

公式 の Download ボタンより DL。
2015-10-28 現在
vakata-jstree-3.2.1-0-g8ea6ce7.zip

ファイル配置
  1. DL したファイルを解凍
  2. 中身の dist ディレクトリを js ディレクトリへ配置
  3. 配置した dist ディレクトリを jstree にリネーム

中には CSS ファイルや画像ファイルもあるので、本来なら分けるべきかもしれないけど、ここで完結させる。
なぜなら、テーマ名を設定するだけで、テーマの変更をできるようになっているから。
でも、その割には CSS ファイルへの参照はちゃんと記述しないとダメ。。。

利用
前提
  1. <link rel="stylesheet" type="text/css" href="./css/jstree.min.css">
  2. <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
  3. <script type="text/javascript" src="./js/jstree.min.js"></script>
リストタグ
  1. <script>
  2. $(document).ready(function(){
  3.       $('#tree').jstree();
  4. });
  5. </script>
  6.  
  7. <div id="tree">
  8. <ul>
  9.     <li>階層1
  10.     <ul>
  11.         <li>階層2</li>
  12.     </ul>
  13.     </li>
  14. </ul>
  15. </div>

注意
階層リストの場合、書式に注意。
下記タイプA、タイプB、どちらでもリスト表示をできるけど
jsTree は、タイプB で記述しないと認識しない。

  1. // タイプA
  2. <ul>
  3.     <li>階層1</li>
  4.     <ul>
  5.         <li>階層2</li>
  6.     </ul>
  7. </ul>
  8.  
  9. // タイプB
  10. <ul>
  11.     <li>階層1
  12.     <ul>
  13.         <li>階層2</li>
  14.     </ul>
  15.     </li>
  16. </ul>

私は今までタイプAで書くのが普通だったんだけど
もしかして、正式はタイプBなのかしら。。。汗

XML データ
JSON データ
注意

ツリー項目に a タグを付けてリンクを貼ろうとしたけど
どうも表示が変になる。

  1. <li>Content <a href="#">Edit</a></li>

としても、Edit だけが表示される。

dnd の研究にノードオブジェクトの中身を覗いてみたけど
jsTree が表示用に a タグを利用しているようで
リンクを貼りたければ、click イベントで制御するしかなさそう。

設定書式

プラグインも含めた設定の例。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         // 基本設定
  4.         'core' : {
  5.             'themes' : {
  6.                 'variant' : 'large'
  7.             }
  8.         },
  9.         // プラグイン毎の設定
  10.         'checkbox' : {
  11.             'keep_selected_style' : false
  12.         },
  13.         // 利用するプラグインを列挙?
  14.         'plugins' : [ 'wholerow', 'checkbox' ]
  15.     });
  16. });
  17. </script>

こんな感じ。
他のプラグインと同じ~。 😯

‘plugins’ で、On にしたいプラグインを列挙し
プラグイン毎の設定で、各プラグインの設定変更をする。

設定変更がなければ、プラグイン各個の設定は記述しなくて良い。

core(基本設定)
themes
  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'themes' : {
  5.                 // 独自テーマを利用したい場合は、当該ディレクトリ名文字列を指定?
  6.                 'name' : false,
  7.                 // 独自テーマを利用したくて、.js ファイルと別階層に置きたい場合に true を指定?
  8.                 'url' : false,
  9.                 // url を true にしたときだけ有効。テーマの場所を記述?
  10.                 'dir' : false,
  11.                 // ツリー罫線を表示するか否か
  12.                 'dots' : true,
  13.                 // ノード(フォルダ)アイコンを表示するか否か
  14.                 'icons' : true,
  15.                 // 1行おきに背景色を付けて縞々にするか否か
  16.                 'stripes' : false,
  17.                 // CSS クラス('large', 'small', 'responsive')があるっぽい
  18.                 // false でデフォルトなんだろうけど、どれかわからない
  19.                 'variant' : false,
  20.                 // 小さい画面の時は ture って書いてある気がするけど、true にしてみても、違いがわからない
  21.                 'responsive' : false,
  22.             }
  23.         }
  24.     });
  25. });
check_callback

ユーザーによるツリーの変更を許可するか否か。
デフォルトは false。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'check_callback' : false,
  5.         }
  6.     });
  7. });
関数指定

true か false か、状況によって変化させるために
関数を指定することができる。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'check_callback' : function (operation, node, node_parent, node_position, more) {
  5.                 if ((operation === 'move_node' || operation === 'copy_node') && (node_parent.id === '#')) return false;
  6.             },
  7.         }
  8.     });
  9. });
jstree.js
  1. * __Examples__
  2. *
  3. *   $('#tree').jstree({
  4. *       'core' : {
  5. *           'check_callback' : function (operation, node, node_parent, node_position, more) {
  6. *               // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
  7. *               // in case of 'rename_node' node_position is filled with the new node name
  8. *               return operation === 'rename_node' ? true : false;
  9. *           }
  10. *       }
  11. *   });
引数
jstree.js
  1. * @name check(chk, obj, par, pos)
  2. * @param  {String} chk the operation to check, can be "create_node", "rename_node", "delete_node", "copy_node" or "move_node"
  3. * @param  {mixed} obj the node
  4. * @param  {mixed} par the parent
  5. * @param  {mixed} pos the position to insert at, or if "rename_node" - the new name
  6. * @param  {mixed} more some various additional information, for example if a "move_node" operations is triggered by DND this will be the hovered node
  7. * @return {Boolean}
  • 引数
    • operation(String)
      • ソース説明の通り。5種
    • node(Object)
      • オブジェクト
    • node_parent(Object)
      • 移動先の親オブジェクト
    • node_position(integer)
    • more(Object)
      • core
      • is_foreign
      • is_multi
      • origin(Object)
        • 恐らく移動前のツリー全体の情報が格納されている
        • 参考記事の more.ref.data.type の使い方不明
よくわからないオブジェクト連鎖

stackoverflow:JsTree v3.0 drag and drop plugin. Reference target node upon dropping
こちらに書かれている下記コードにおける
more.ref.data.type
が、何をどう辿っているのか不明。

  1. if (more.ref.data.type === "folder") {
  2.     return true;
  3. }
  1. console.log(more.ref.data.type);
TypeError: more.ref is undefined
タイミング

チェックは常に行っているらしく
上記のように指定することで、ドラッグ中に
root 直下へは、移動先候補 ▶ のマークが出なくなった。

data(Ajax)

こちらを設定しておくことで、ページ読み込み時に
そちらを読みにいく。

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         "core" : {
  4.             'data' : {
  5.                 'url' : function (node){
  6.                             if (node.id === '#') {
  7.                         return "http://localhost:9000/getCourses/" ;
  8.                             }
  9.                             else
  10.                         return "http://localhost:9000/getCourses/" + node.id;
  11.                             }
  12.                         },
  13.                 'data' : function (node) {
  14.                             return { 'id' : node.id };
  15.                         }
  16.             }
  17.         }
  18.     });
  19. });

こちらは下記サイトのコードをいただいてきたが
あちこちでこのような書き方がされている。
answer uxu:jstree html and json

どうもデフォルトでは、node.id がルートの # になっていて
ルートの情報を取得して表示。
後はノードを選択する度に、そのノードの ID を送り、その配下の情報を取得し表示。
という仕様になっているっぽい。

変更の通信ではない?

プラグイン

jsTree という名前の jQuery プラグインに実装されている
プラグイン(追加機能)。

一覧

公式:Plugins?

  1. 'plugins' : [
  2.     'checkbox',
  3.     'contextmenu',
  4.     'dnd',
  5.     'massload',
  6.     'search',
  7.     'sort',
  8.     'state',
  9.     'types',
  10.     'unique',
  11.     'wholerow',
  12.     'changed',
  13.     'conditionalselect'
  14. ]
checkbox
設定
  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         'checkbox' : {
  4.             // 選択された行に背景色をつけるか否か
  5.             'keep_selected_style' : true
  6.         }
  7.         'plugins' : [ 'checkbox' ]
  8.     });
  9. });
contextmenu

contextmenu

dnd(Drag and Drop)

dnd(Drag and Drop)

search
設定

JSFIDDLE:http://jsfiddle.net/53cvtbv9/1/

  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         'plugins' : [ 'search' ]
  4.     });
  5. });
  1. <div><?php echo __('Search : '); ?><input type="text" class="search-input" /></div>
  2.  
  3. <script>
  4. $(document).ready(function() {
  5.     $(".search-input").keyup(function() {
  6.         var searchString = $(this).val();
  7.         $(selectorTree).jstree('search', searchString);
  8.     });
  9. });
  10. <script>
unique

単一ノード直下の重複チェック。

設定
  1. $(document).ready(function(){
  2.     $('#jstree').jstree({
  3.         'unique' : {
  4.             // 大文字小文字の区別をするか否か
  5.             'case_sensitive' : false,
  6.             // 重複した場合の名称を hoge -> hoge (2) のように変更する
  7.             'duplicate' : false,
  8.         }
  9.         'plugins' : [ 'unique' ]
  10.     });
  11. });
イベントリスナー

イベントリスナー

メソッド
書式

複数あるっぽい。

  1. $('#jstree').jstree('select_all'); // うまくいった
  2. $('#jstree').select_all(true); // 未試行
一覧
  1. // 選択系
  2. $('#jstree').jstree('select_all'); // 全選択
  3. $('#jstree').jstree('check_all'); // 全選択
  4. $('#jstree').jstree('deselect_all'); // 全選択解除
  5.  
  6. $('#jstree').jstree('select_node', node.id); // 個別選択
  7. $('#jstree').jstree('deselect_node', node.id); // 個別選択解除
  8.  
  9. // オープン系
  10. $('#jstree').jstree('open_all'); // 全開く
  11. $('#jstree').jstree('close_all'); // 全閉じる
  12. // 後はパターンで考えてましょう。。。
本体解析
this

全部でないかもしれないけど、本体コード中に現れる this は
カスタマイズの際には $(selectorTree).jstree(true) に読みかえればよいかも?

Loading

本体の Ajax 通信を利用せずに、独自の通信ロジックにしたら
Loading 表示のやり方がわからなかった。

独自にした理由

どこの例を見ても、’data’ : のところが、{ “id” : node.id } となっていて、それ以外のデータの渡し方がわからなかったから
当該ノードだけを更新するわけでなくて、ツリー全体を更新しているから

本体解析

うまい例を見つけられなかったので、本体を見てみた。

jstree.js
  1. refresh : function (skip_loading, forget_state) {
  2.  
  3.     __snip__
  4.  
  5.     if(!skip_loading) {
  6.         this.element.html("<"+"ul class='"+c+"' role='group'><"+"li class='jstree-initial-node jstree-loading jstree-leaf jstree-last' role='treeitem' id='j"+this._id+"_loading'><i class='jstree-icon jstree-ocl'></i><"+"a class='jstree-anchor' href='#'><i class='jstree-icon jstree-themeicon-hidden'></i>" + this.get_string("Loading ...") + "</a></li></ul>");
  7.         this.element.attr('aria-activedescendant','j'+this._id+'_loading');
  8.     }
  9.  
  10.     __snip__
  11. }

どうやら、ここで表示しているらしい。

本体の HTML を一旦 Loading 用に書き換えちゃってるのね~。

refresh

それで、いくつか refresh メソッドを試してみたけど表示されなかった。

  1. $(selectorTree).jstree(true).trigger('refresh');
  2.  
  3. // create で試したけど、当該ノードが消えただけ
  4. // refresh をかけたわけだから、create に前に戻るので当たり前
  5. $(selectorTree).jstree(true).refresh();
Loading 表示

上記の HTML の内、わからないところとか、不必要と思われる箇所を少しだけ除いて
無理くり下記のようにしてみたら、ツリー全体を Loading 画像で置き換えることができた。

  1. var htmlLoading = '<ul class="jstree-container-ul jstree-children" role="group">'
  2. + '<li class="jstree-initial-node jstree-loading jstree-leaf jstree-last" role="tree-item">'
  3. + '<i class="jstree-icon jstree-ocl"></i>'
  4. + '<a class="jstree-anchor" href="#">'
  5. + '<i class="jstree-icon jstree-themeicon-hidden"></i>Loading ...'
  6. + '</a>'
  7. + '</li>'
  8. + '</ul>';
  9.  
  10. $('#jstree').jstree(true).element.html(htmlLoading);
refresh

そのまんま。
読み込んだときの状態に戻す。

  1. $(selectorTree).jstree(true).refresh();
  2.  
  3. $(selectorTree).jstree(true).refresh(false, false);

第1引数:skip_loading。Loading 表示をスキップするか否か
第2引数:forget_state。現状を記憶するか否か

参考サイト

株式会社アンフィニ 技術ブログ:【javascript】jQueryプラグイン jsTreeの紹介
海外製ライブラリ・Web API ドキュメントの翻訳ページ:jsTreeドキュメント日本語訳

jQuery,Library & PlugIn & AddIn | 2015-10-28 (水) 14:21:48 |

plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2015-09-01 (火) 16:52:52

iG:Syntax Hiliter をカスタマイズ その3。
数日前、WordPress 本体のヴァージョンアップのお知らせがきており、それに合わせて更新したら
iG:Syntax Hiliter も更新のお知らせがきたので、更新してみた。
そうしたら、表示が大分変わってしまった・・・ので、再挑戦~。

前回記事

【環境】
WordPress:4.3
iG:Syntax Hiliter:5.0
GeSHi:1.0.8.11
独自タグの追加
ハイライト設定ファイルへの紐付け

独自に設定したショートタグをプラグインに認識させる方法。

plugins/igsyntax-hiliter/classes/frontend.php
  1. /**
  2.  * @var Array Contains file names for GeSHi language files associated with expected tag names
  3.  */
  4. protected $__geshi_language = array(
  5.     'as' => 'actionscript',
  6.     'html' => 'html4strict',
  7.     'js' => 'javascript',
  8.     'evba' => 'vbnet',        ← 追加した独自タグ
  9. );

このように記述してやることで、独自に設定したショートタグから

plugins/igsyntax-hiliter/geshi

にある、各言語ハイライト設定ファイルへと紐付けることができる。

言語表示文字列への紐付け

独自に設定したショートタグを任意の文字列にて表示させる方法。

plugins/igsyntax-hiliter/classes/frontend.php
  1. /**
  2.  * @var Array Contains display names for some languages, like C# for csharp, VB.NET for vbnet
  3.  */
  4. protected $__geshi_language_display = array(
  5.     'cpp'         => 'C++',
  6.     'cfm'         => 'Cold Fusion',
  7.     'csharp'      => 'C#',
  8.     'vbnet'       => 'VB.NET',
  9.     'as'          => 'ActionScript',
  10.     'c_mac'       => 'CMac',
  11.     'html'        => 'HTML',
  12.     'html4strict' => 'HTML4',
  13.     'evba'        => 'Excel VBA',
  14. );
外観

今回の CSS ファイルは圧縮してあるので
行番号はなし。

全体
幅とマージン
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite {
  2. background:#FFFFFF;
  3. width:98%;
  4. margin:10px 0px 20px 0px;
  5. border:1px solid #CCCCCC;
  6. border-left:none;
  7. border-right:none
  8. }
コード部
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite ol,.syntax_hilite .pre {
  2. width:90%;
  3. line-height:1.5em;
  4. margin-bottom:0px;
  5. padding-top:5px;
  6. font-size:1.25em
  7. }

全体幅を調節したせいか、こちらの幅を狭めておかないと
ハイライト行がはみ出す。

plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite ol,.syntax_hilite .pre {
  2. width:90%;
  3. line-height:1.5em;
  4. margin-bottom:0px;
  5. padding-top:5px;
  6. font-size:1.25em
  7. }
ツールバー
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite .toolbar {
  2. width:97.5%;
  3. margin:0px 0px 10px 0px;
  4. padding:5px 10px 5px 4px;
  5. background:#EEEEEE;
  6. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  7. font-size:1em;
  8. color:#555555
  9. }
Library & PlugIn & AddIn,WordPress | 2015-09-01 (火) 16:52:52 |

Add-on -> FireQuery

Posted by muchag | Firefox,Library & PlugIn & AddIn | 2015-04-04 (土) 13:38:49

Firefoxデバッグツール。
Firebug の拡張みたい。
Firebug がないと動作しないとのこと。

【環境】
Firebug:2.0.8
Firefox:36.0.4
インストール

Firefox Add-ons:FireQuery

参考サイト

THE HAM MEDIA BLOG:Firebugを活用しよう!jQueryの動作チェックに最適な『FireQuery』

Firefox,Library & PlugIn & AddIn | 2015-04-04 (土) 13:38:49 |
次ページへ »