Library & PlugIn & AddIn « 夢茶爺＆空茶爺のPC奮戦備忘録

jQuery Easing Plugin

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2016-03-05 (土) 10:49:20 | 最終更新：2016-03-05 (土) 10:49:20

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

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

概要

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

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

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

一覧

Easing Function 早見表

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2016-03-05 (土) 10:49:20 | 最終更新：2016-03-05 (土) 10:49:20

Comments (0)

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

Posted by muchag | Library & PlugIn & AddIn,XAMPP |
初回投稿：2016-01-24 (日) 16:49:20 | 最終更新：2016-01-24 (日) 17:14:42

インストール 1.8.1。

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

【環境】
XAMPP for Windows: 1.8.1

APC

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 へ下記のように追記。

extension=php_apc.dll ; added 2016-01-24

[APC]
; added 2016-01-24
apc.enabled = 1
apc.shm_size = 32M
apc.ttl = 0
apc.user_ttl = 0
apc.gc_ttl = 3600
apc.stat = 1

Memcached

参考サイト

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

Posted by muchag | Library & PlugIn & AddIn,XAMPP |
初回投稿：2016-01-24 (日) 16:49:20 | 最終更新：2016-01-24 (日) 17:14:42

Comments (0)

YEdit

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿：2016-01-06 (水) 17:38:42 | 最終更新：2016-05-28 (土) 14:06:28

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

【環境】
Eclipse:Mars.1 (4.5.1) PHP
OS:Windows7 SP1 64bit

インストール

[ヘルプ]-[Eclipse マーケットプレース]
Eclipse マーケットプレース

検索窓で「YEdit」
[インストール]

選択されたフィーチャーの確認

[確認]

ライセンスのレビュー

[使用条件の条項に同意します] を選択
[完了]

EGit -> ブランチ

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿：2015-12-08 (火) 19:04:16 | 最終更新：2015-12-12 (土) 11:05:29

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
→スタート地点が３通り載っている。

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

[チーム]-[切り替え]-[（当該ブランチ）]

新規作成

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

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

[チーム]-[切り替え]-[新規ブランチ]
新規ブランチの作成（Branch Creation Dialog）

ソース：変更したいときは [選択] *1
ブランチ名：任意
プッシュおよびプルのアップストリームを構成する

プルを行う場合

現在、詳細不明。大体の意味を理解した上で、ひとまず下記の通り
◎アップストリームのコミットをローカル・ブランチにマージする
◯アップストリームにローカル・ブランチのコミットをリベースする

完了

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

プッシュ

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

[チーム]-[リモート]-[プッシュ]
宛先 Git リポジトリー

◎構成済みリモート・リポジトリー

当該リモート先を選択

◯カスタム URI

一時的なリポジトリを利用する際に用いる（Pushing to other Repositories）

[次へ]　※１

プッシュ仕様指定

作成/更新仕様の追加

ソース参照：選択（ソースを選択すると、宛先に同名ブランチが自動選択される）
宛先参照：選択
[仕様の追加] これで、プッシュの仕様という欄に追加される

事前定義仕様の追加

ここの欄は、プッシュ仕様をまとめて追加したいときに利用するみたい
[構成済みプッシュ仕様の追加]
[すべてのブランチ仕様を追加]

読んだまんま。全てのブランチをプッシュするプッシュ構成となる

[すべてのタグ仕様の追加]

[‘origin 構成に仕様を保管] にチェックをすると、次回以降、プッシュ仕様の設定をスキップできる？/li>
[次へ] or [完了]

プッシュ確認

プッシュ内容を表示してくれる
完了

プッシュ結果

プッシュ結果を表示してくれる
[OK]

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

マージ＆リベース

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

参考サイト

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

マージ

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

ブランチを master へ切り替える
[チーム]-[マージ]（プロジェクトコンテキストメニュー）
Merge ‘master’

ツリーからマージ元ブランチを選択（今回は [ローカル]-[branchA]）
マージ・オプション

現状意味不明なので、デフォルトのまま
◎コミット
◯コミットなし
◯スカッシュ

高速フォワード・オプション

現状意味不明なので、デフォルトのまま
◎高速フォワードの場合はブランチ位置のみ更新する
◯高速フォワードの場合はマージ・コミットを作成する
◯高速フォワードでない場合は失敗

[マージ]

マージ結果

マージ結果を表示してくれる
[OK]

コンフリクト解消

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

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

コンフリクト箇所

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

<<<<<<< HEAD
// 元々あったコード
$hoge = 0;
=======
// マージしたコード
$hoge = 1;
>>>>>>> refs/heads/3.8.17.1

リセット

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

プロジェクトコンテキストメニューから [チーム]-[切り替え] で、リセットしたいブランチをアクティブにする
プロジェクトコンテキストメニューから [チーム]-[リセット]
リセット: project_name

ツリーから、上書きしたいブランチを選択
リセット先：ツリーでブランチを選択することで自動入力

「リセット先」と書かれると、「リセットしたいブランチ」のように受け取れるけど、
実際は「当該ブランチをリセットするために元とするブランチ」をセットする

リセット・タイプ

◯ソフト（HEAD 更新）
◯混合（HEAD およびインデックス更新）
◎ハード（HEAD, index, and working tree updated）

何かも全て更地にしてコピー

リセット

確認ダイアログ [はい]

直前のコミット状態まで戻す

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

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

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿：2015-12-08 (火) 19:04:16 | 最終更新：2015-12-12 (土) 11:05:29

Comments (0)

Can’t connect to any repository:

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿：2015-12-03 (木) 12:37:39 | 最終更新：2015-12-03 (木) 13:33:19

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

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

状況

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

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

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

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

原因

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

解決策

プロジェクトのコンテキストメニュー
[チーム]-[リモート]-[プッシュ]
[宛先 Git リポジトリー]
[次へ]
[プッシュ仕様設定]

[作成/更新仕様の追加]

[ソース参照]-[refs/heads/master（当該ブランチ？）
[宛先参照] は、ソース参照を設定することで自動的に設定される
[仕様の追加] をクリックすると、[プッシュの仕様に追加される

[‘origin’ 構成に仕様を保管] にチェックを入れると、次からは [宛先 Git リポジトリー] で [完了] するだけでプッシュできる

[次へ]
[プッシュ確認]
[完了]

参考サイト

メモ：ubuntu14.10でGit

別ルート対処法

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

Git リポジトリービュー内の当該プロジェクトを開く
[リモート] を開く
当該リモート名（リモートリポジトリ設定時に入力した名称。デフォルトは origin）を開く
同じ URI が２行並んでいるので、プッシュ用（赤い↑）を右クリック
[プッシュの構成]
[保管およびプッシュ]

参考サイト

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

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿：2015-12-03 (木) 12:37:39 | 最終更新：2015-12-03 (木) 13:33:19

Comments (2)

jsTree

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-10-28 (水) 14:21:48 | 最終更新：2015-11-19 (木) 15:42:09

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

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

【環境】
jsTree:3.2.1
jQuery:1.11.3

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

ファイル配置

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

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

利用

前提

<link rel="stylesheet" type="text/css" href="./css/jstree.min.css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jstree.min.js"></script>

リストタグ

<script>
$(document).ready(function(){
$('#tree').jstree();
});
</script>
<div id="tree">
<ul>
<li>階層１
<ul>
<li>階層２</li>
</ul>
</li>
</ul>
</div>

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

// タイプA
<ul>
<li>階層１</li>
<ul>
<li>階層２</li>
</ul>
</ul>
// タイプB
<ul>
<li>階層１
<ul>
<li>階層２</li>
</ul>
</li>
</ul>

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

XML データ

JSON データ

注意

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

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

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

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

設定書式

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

$(document).ready(function(){
$('#jstree').jstree({
// 基本設定
'core' : {
'themes' : {
'variant' : 'large'
}
},
// プラグイン毎の設定
'checkbox' : {
'keep_selected_style' : false
},
// 利用するプラグインを列挙？
'plugins' : [ 'wholerow', 'checkbox' ]
});
});
</script>

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

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

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

core（基本設定）

themes

$(document).ready(function(){
$('#jstree').jstree({
"core" : {
'themes' : {
// 独自テーマを利用したい場合は、当該ディレクトリ名文字列を指定？
'name' : false,
// 独自テーマを利用したくて、.js ファイルと別階層に置きたい場合に true を指定？
'url' : false,
// url を true にしたときだけ有効。テーマの場所を記述？
'dir' : false,
// ツリー罫線を表示するか否か
'dots' : true,
// ノード（フォルダ）アイコンを表示するか否か
'icons' : true,
// １行おきに背景色を付けて縞々にするか否か
'stripes' : false,
// CSS クラス（'large', 'small', 'responsive'）があるっぽい
// false でデフォルトなんだろうけど、どれかわからない
'variant' : false,
// 小さい画面の時は ture って書いてある気がするけど、true にしてみても、違いがわからない
'responsive' : false,
}
}
});
});

check_callback

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

$(document).ready(function(){
$('#jstree').jstree({
"core" : {
'check_callback' : false,
}
});
});

関数指定

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

$(document).ready(function(){
$('#jstree').jstree({
"core" : {
'check_callback' : function (operation, node, node_parent, node_position, more) {
if ((operation === 'move_node' || operation === 'copy_node') && (node_parent.id === '#')) return false;
},
}
});
});

jstree.js

* __Examples__
*
* $('#tree').jstree({
* 'core' : {
* 'check_callback' : function (operation, node, node_parent, node_position, more) {
* // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
* // in case of 'rename_node' node_position is filled with the new node name
* return operation === 'rename_node' ? true : false;
* }
* }
* });

引数

jstree.js

* @name check(chk, obj, par, pos)
* @param {String} chk the operation to check, can be "create_node", "rename_node", "delete_node", "copy_node" or "move_node"
* @param {mixed} obj the node
* @param {mixed} par the parent
* @param {mixed} pos the position to insert at, or if "rename_node" - the new name
* @param {mixed} more some various additional information, for example if a "move_node" operations is triggered by DND this will be the hovered node
* @return {Boolean}

引数

operation（String）

ソース説明の通り。５種

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
が、何をどう辿っているのか不明。

if (more.ref.data.type === "folder") {
return true;
}

console.log(more.ref.data.type);

TypeError: more.ref is undefined

タイミング

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

data（Ajax）

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

$(document).ready(function(){
$('#jstree').jstree({
"core" : {
'data' : {
'url' : function (node){
if (node.id === '#') {
return "http://localhost:9000/getCourses/" ;
}
else
return "http://localhost:9000/getCourses/" + node.id;
}
},
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
});

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

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

変更の通信ではない？

プラグイン

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

一覧

公式：Plugins?

'plugins' : [
'checkbox',
'contextmenu',
'dnd',
'massload',
'search',
'sort',
'state',
'types',
'unique',
'wholerow',
'changed',
'conditionalselect'
]

checkbox

設定

$(document).ready(function(){
$('#jstree').jstree({
'checkbox' : {
// 選択された行に背景色をつけるか否か
'keep_selected_style' : true
}
'plugins' : [ 'checkbox' ]
});
});

contextmenu

dnd（Drag and Drop）

設定

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

$(document).ready(function(){
$('#jstree').jstree({
'plugins' : [ 'search' ]
});
});

<div><?php echo __('Search : '); ?><input type="text" class="search-input" /></div>
<script>
$(document).ready(function() {
$(".search-input").keyup(function() {
var searchString = $(this).val();
$(selectorTree).jstree('search', searchString);
});
});
<script>

unique

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

設定

$(document).ready(function(){
$('#jstree').jstree({
'unique' : {
// 大文字小文字の区別をするか否か
'case_sensitive' : false,
// 重複した場合の名称を hoge -> hoge (2) のように変更する
'duplicate' : false,
}
'plugins' : [ 'unique' ]
});
});

イベントリスナー

メソッド

書式

複数あるっぽい。

$('#jstree').jstree('select_all'); // うまくいった
$('#jstree').select_all(true); // 未試行

一覧

// 選択系
$('#jstree').jstree('select_all'); // 全選択
$('#jstree').jstree('check_all'); // 全選択
$('#jstree').jstree('deselect_all'); // 全選択解除
$('#jstree').jstree('select_node', node.id); // 個別選択
$('#jstree').jstree('deselect_node', node.id); // 個別選択解除
// オープン系
$('#jstree').jstree('open_all'); // 全開く
$('#jstree').jstree('close_all'); // 全閉じる
// 後はパターンで考えてましょう。。。

本体解析

this

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

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

独自にした理由

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

本体解析

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

jstree.js

refresh : function (skip_loading, forget_state) {
__snip__
if(!skip_loading) {
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>");
this.element.attr('aria-activedescendant','j'+this._id+'_loading');
}
__snip__
}

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

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

refresh

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

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

Loading 表示

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

var htmlLoading = '<ul class="jstree-container-ul jstree-children" role="group">'
+ '<li class="jstree-initial-node jstree-loading jstree-leaf jstree-last" role="tree-item">'
+ '<i class="jstree-icon jstree-ocl"></i>'
+ '<a class="jstree-anchor" href="#">'
+ '<i class="jstree-icon jstree-themeicon-hidden"></i>Loading ...'
+ '</a>'
+ '</li>'
+ '</ul>';
$('#jstree').jstree(true).element.html(htmlLoading);

refresh

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

$(selectorTree).jstree(true).refresh();
$(selectorTree).jstree(true).refresh(false, false);

第１引数：skip_loading。Loading 表示をスキップするか否か
第２引数：forget_state。現状を記憶するか否か

参考サイト

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

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-10-28 (水) 14:21:48 | 最終更新：2015-11-19 (木) 15:42:09

Comments (0)

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

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿：2015-09-01 (火) 16:52:52 | 最終更新：2015-09-04 (金) 17:01:01

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

前回記事

【環境】
WordPress:4.3
iG:Syntax Hiliter:5.0
GeSHi:1.0.8.11

独自タグの追加

ハイライト設定ファイルへの紐付け

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

plugins/igsyntax-hiliter/classes/frontend.php

/**
* @var Array Contains file names for GeSHi language files associated with expected tag names
*/
protected $__geshi_language = array(
'as' => 'actionscript',
'html' => 'html4strict',
'js' => 'javascript',
'evba' => 'vbnet',　 ←　追加した独自タグ
);

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

plugins/igsyntax-hiliter/geshi

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

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

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

plugins/igsyntax-hiliter/classes/frontend.php

/**
* @var Array Contains display names for some languages, like C# for csharp, VB.NET for vbnet
*/
protected $__geshi_language_display = array(
'cpp' => 'C++',
'cfm' => 'Cold Fusion',
'csharp' => 'C#',
'vbnet' => 'VB.NET',
'as' => 'ActionScript',
'c_mac' => 'CMac',
'html' => 'HTML',
'html4strict' => 'HTML4',
'evba' => 'Excel VBA',
);

外観

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

全体

幅とマージン

plugins\igsyntax-hiliter\assets\css\front-end.css

.syntax_hilite {
background:#FFFFFF;
width:98%;
margin:10px 0px 20px 0px;
border:1px solid #CCCCCC;
border-left:none;
border-right:none
}

コード部

文字サイズ

plugins\igsyntax-hiliter\assets\css\front-end.css

.syntax_hilite ol,.syntax_hilite .pre {
width:90%;
line-height:1.5em;
margin-bottom:0px;
padding-top:5px;
font-size:1.25em
}

幅

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

plugins\igsyntax-hiliter\assets\css\front-end.css

.syntax_hilite ol,.syntax_hilite .pre {
width:90%;
line-height:1.5em;
margin-bottom:0px;
padding-top:5px;
font-size:1.25em
}

ツールバー

文字サイズ

plugins\igsyntax-hiliter\assets\css\front-end.css

.syntax_hilite .toolbar {
width:97.5%;
margin:0px 0px 10px 0px;
padding:5px 10px 5px 4px;
background:#EEEEEE;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
color:#555555
}

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿：2015-09-01 (火) 16:52:52 | 最終更新：2015-09-04 (金) 17:01:01

Comments (0)

Add-on -> FireQuery

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿：2015-04-04 (土) 13:38:49 | 最終更新：2016-05-15 (日) 16:14:28

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

【環境】
Firebug:2.0.8
Firefox:36.0.4

インストール

Firefox Add-ons：FireQuery

参考サイト

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

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿：2015-04-04 (土) 13:38:49 | 最終更新：2016-05-15 (日) 16:14:28

Comments (0)

Add-on -> Firebug

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿：2015-04-04 (土) 13:25:30 | 最終更新：2016-05-15 (日) 16:14:12

デバッグツール。

【環境】
Firebug:2.0.8
Firefox:36.0.4

インストール

Firefox Add-ons：Firebug

設定

オプション

ツールボタンバーのバグボタンから、オプションを設定できる。

レジストリ？

Windows のレジストリキー操作のイメージ。
実際、「これを触ると危ないじょ！気をつけてね！」メッセージが表示される。

フォントサイズ

extensions.firebug.textSize
デフォルトが 1。
試してないけど、あちこち見た感じでは整数値。
小さくする場合は、小数ではなくて負の数っぽい。
　
Firefox のアドレスバーに about:config と入力。
extensions.firebug で始まるキーが Firebug 関連。

ショートカットキー

Ctrl

Ctrl + +：文字拡大（但し、全体を拡大するのでメニューバーなどまで拡大される）
Ctrl + -：文字縮小（但し、全体を縮小するのでメニューバーなどまで縮小される）
Ctrl + 0：文字標準

Function

F12：Firebug の起動、表示、非表示トグル

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿：2015-04-04 (土) 13:25:30 | 最終更新：2016-05-15 (日) 16:14:12

Comments (0)

jquery.combobox.js

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-04-03 (金) 10:15:30 | 最終更新：2015-04-03 (金) 10:15:30

選択、入力ともにできるコンポーネントが欲しくて
コンボボックスのやり方を調べてみた。

HTML5 になって、テキストボックスに候補を表示することができるようになったみたいだけど、オートコンプリート機能のためらしく、１文字入れるだけで候補が絞られちゃう。
仕方ないので、JavaScript で実現。
作者の方、ありがとうございます！

SQL の窓：使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
のリンクから
jquery.combobox.js
style.css
をいただいてきた。

導入

上記プラグインファイルと CSS ファイルを読み込む。

<input type="text" id="hoge" />

$( '#hoge' ).combobox([
'1',
'2',
'3',
]);

これで終わり！
かんた～ん♪

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-04-03 (金) 10:15:30 | 最終更新：2015-04-03 (金) 10:15:30

Comments (0)

« 前ページへ — 次ページへ »

ブログ内検索

Main Menu

カテゴリー

最近のコメント

アーカイブ

メタ情報

jQuery Easing Plugin

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

YEdit

EGit -> ブランチ

Can’t connect to any repository:

jsTree

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

Add-on -> FireQuery

Add-on -> Firebug

jquery.combobox.js