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

文字列 -> 検索(部分一致)

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 20:12:02 | 最終更新:2015-02-11 (水) 18:01:35

部分的に一致する名前を持つ要素を一括で操作する方法。

jQuery の場合、ページ内の要素をいっぺんに操作することがあるけど、id などを利用して名前をつけている場合、微妙に名前が違うことがある。
これを一括で操作する方法を見つけた。

Qiita:jQueryで指定した文字列を含むidの要素を非表示にする

  1. <tr id="row_1"></tr>
  2. <tr id="row_2"></tr>
  3. <tr id="row_3"></tr>
  1. $( '#row_1' ).hide();
  2. $( '#row_2' ).hide();
  3. $( '#row_3' ).hide();
  4. $( '[id *= "row_"]' ).hide();

1行毎に隠したいときは上を。
全て隠したいときは下を。
便利~♪

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 20:12:02 | 最終更新:2015-02-11 (水) 18:01:35

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

Don’t Use jquery-latest.js

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:57:12 | 最終更新:2015-02-08 (日) 12:58:14

jquery-latest.js へのリンクは止めましょ~、とのこと。

ちゃんとバージョンが記載されている .js ファイルにリンクしてね。

  1. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- だめよ~!だめだめ! -->
  2.  
  3. <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <!-- こうしましょ! -->

jQuery:Don’t Use jquery-latest.js

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:57:12 | 最終更新:2015-02-08 (日) 12:58:14

ナビゲーションメニューバー -> 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

文字列 -> 検索

Posted by muchag | JavaScript |
初回投稿:2015-02-08 (日) 12:35:00 | 最終更新:2015-02-08 (日) 12:43:46

文字列検索。

indexOf

呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。fromIndex から検索を始め、値が見つからない場合は -1 を返します。

indexOf(searchValue[,fromIndex])

MDN:String.prototype.indexOf()

searchValue
検索する値を表す文字列

fromIndex
呼び出す文字列内の検索を始めるための位置。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。

利用例
  1. if ( $( this ).text().indexOf( 'abc' ) > -1 )

 

注意

indexOf メソッドは大文字と小文字を区別します。
 

lastIndexOf

呼び出す String オブジェクト中で、指定された値が最後に現れるインデックスを返します。値が見つけられない場合、-1 を返します。呼び出す文字列は、fromIndex から検索を始め、逆方向に検索されます。

lastIndexOf( searchValue [, fromIndex ])

MDN:String.prototype.lastIndexOf()

searchValue
検索する値を表す文字列。

fromIndex
呼び出す文字列内の検索を始めるための位置(左から右)。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。
 

注意

indexOf メソッドは大文字と小文字を区別します。
 

match

正規表現 に対する 文字列 のマッチングの際に、そのマッチ結果を得るために使われます。

string.match(regexp)

MDN:String.prototype.match()

regexp
正規表現オブジェクト (RegExp) 。RegExp オブジェクトではないオブジェクト obj が渡された場合、new RegExp(obj) による RegExp オブジェクトへの暗黙的な変換が行われます。

Posted by muchag | JavaScript |
初回投稿:2015-02-08 (日) 12:35:00 | 最終更新:2015-02-08 (日) 12:43:46

文字列 -> 検索

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:16:52 | 最終更新:2015-02-08 (日) 12:37:18

文字列検索。

【環境】
[jQuery] 1.11.2
  1. if ( $( this ).is(":contains('hoge')") )

 
JavaScript 自体の検索メソッド

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:16:52 | 最終更新:2015-02-08 (日) 12:37: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

SSH 公開鍵の追加

Posted by muchag | SourceForge.JP |
初回投稿:2015-02-06 (金) 11:36:46 | 最終更新:2015-02-06 (金) 11:39:58

SOURCEFORGE.JP で、Git を利用する。

SSH 公開鍵の生成

PuTTY -> 公開鍵、秘密鍵の生成
 

SSH 公開鍵の登録

SOURCEFORGE.JP:SSH公開鍵の登録/削除
こちらで SSH の公開鍵を登録するのだけど、いざやってみたら
「入力が OpenSSH2 のフォーマットではありません」と怒られてしまった。

どう入力したかというと、PuTTY -> 公開鍵、秘密鍵の生成 で保存した
公開鍵のファイルを TeraPad で開いて、内容をコピペした。

入力ダイアログに、「余計な改行が入らないように」とあったので、改行されているところを全部消したんだけど、それでも上手くいかない。

そこで、生成時のダイアログからコピペしておいた素のテキストをコピペしてみたら、上手く登録できた。

ssh-rsa ********** +++

ssh-rsa[半角スペース]暗号(鍵)[半角スペース]コメント

こうなっているのが、OpenSSH2 フォーマットらしい。

Google先生に聞いても何も出てこないところを見ると、失敗している人がいないんだね。。。
恥ずかしい。。。

Posted by muchag | SourceForge.JP |
初回投稿:2015-02-06 (金) 11:36:46 | 最終更新:2015-02-06 (金) 11:39:58
« 前ページへ次ページへ »