ライブラリリスト

Posted by muchag | Google Apps Script,Library & PlugIn & AddIn |
初回投稿:2015-02-03 (火) 21:33:37 | 最終更新:2015-02-03 (火) 21:33:37

GAS 用ライブラリ。
JavaScript のもので、そのまま使えるものは、かろうじて jQuery だけ、という記事を見た。
GAS 用のライブラリは、Google が提供しているらしいのだけど、その一覧が見つからない。

んで、一応見つける度にメモを。

Posted by muchag | Google Apps Script,Library & PlugIn & AddIn |
初回投稿:2015-02-03 (火) 21:33:37 | 最終更新:2015-02-03 (火) 21:33:37

ライブラリ -> Moment.js

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-02 (月) 14:20:23 | 最終更新:2015-03-28 (土) 18:31:40

日付関連のライブラリ。

JavaScript は、日付関連の操作が弱いそうで
こちらのライブラリを入れておくと、便利だそうな。

【環境】
moment:2.9.0

Moment.js
Moment.js Documentation
 

解析
バリデーション

moment().isValid();

Validation

  1. moment( 日付文字列, フォーマット ).isValid() // true or false
  2.  
  3. moment( '2015-02', 'YYYY-MM' ).isValid() // true
  4.  
  5. moment( '2015-22', 'YYYY-MM' ).isValid() // false

確かに上記はちゃんと動作するのだけど、ちょっとバグがあるかも?
Moment の isValid() が機能しない

表示
フォーマット

moment().format();
moment().format(String);

Format

  1. moment().format( 'YYYY-MM' );

まぁ、いつも通りの感覚で利用すればよいかと。

タイムスタンプ

タイムスタンプのフォーマット文字列を初めて知ったので、覚書。

  1. // 秒単位(Unix Timestamp)
  2. moment().format( 'X' ); // 1360013296
  3.  
  4. // ミリ秒単位(Unix Millisecond Timestamp)
  5. moment().format( 'x' ); // 1360013296123
計算
  1. // 明日の Moment オブジェクトを取得
  2. moment().add( 'days', 1 );
タイムスタンプ

Moment オブジェクトからタイムスタンプを得ると、文字列として返されているみたい。

上記1日後という計算をタイムスタンプでやろうとしたら、取得できなかった。
キャストしてやることで計算できた。

  1. var today = moment().format( 'x' );
  2.  
  3. var tomorrow = today + 1000 * 60 * 60 * 24; // アウト
  4.  
  5. var tomorrow = parseInt( today ) + 1000 * 60 * 60 * 24; // セーフ
初期化

参考サイトに書いてある初期化。
よく意味がわからない。

でも、実際に使っていて、初期化をしないと代入できないケースに遭遇。

  1. // これだと Invalid になる
  2. tsDatetimeNext = moment( tsDatetimeNext ).add( 'minutes', 1 ).format( 'x' );
  3.  
  4. // こちらはちゃんと代入できる
  5. tsDatetimeNext = moment( tsDatetimeNext, 'x' ).add( 'minutes', 1 ).format( 'x' );
参考サイト

アシアルブログ:JavaScriptで日付を扱うならこれ!「moment.js」

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿:2015-02-02 (月) 14:20:23 | 最終更新:2015-03-28 (土) 18:31:40

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

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-01-30 (金) 11:47:43 | 最終更新:2015-09-04 (金) 16:43:14
2015-09-01 追記

新しい記事:plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01

ここまで

iG:Syntax Hiliter をカスタマイズ その2。
前回記事

【環境】
WordPress:4.1
iG:Syntax Hiliter:4.3
GeSHi:1.0.8.11
独自タグの追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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.     'as3' => 'actionscript3', ← 追加した独自タグ
  9. );

 

表記言語の追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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' => 'HTML4',
  12.     'html4strict' => 'HTML4',
  13.     'as3' => 'ActionScript3', ← 追加した言語タイトル
  14. );

しかし、このままだと全て大文字に変換されて表記されるので、CSS ファイルを修正。

外観
言語名
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite .toolbar .language-name {
  2.     font-weight: bold; width: 18%; text-align: center; /* text-transform: uppercase; を削除 */
  3.     cursor: default;
  4. }

 

文字サイズ
Toolbar
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite .toolbar {
  2.     width: 97.5%; margin: 0px 0px 10px 0px; padding: 5px 10px 5px 4px; background: #EEEEEE;
  3.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* font-size: 0.75em → 1em; */
  4. }
コード
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite ol, .syntax_hilite .pre {
  2.     width: 94%; line-height: 1.5em;
  3.     margin-bottom: 0px; padding-top: 5px; font-size: 1.2em; /* font-size: 0.85em → 1.2em; */
  4. }

 

ハイライト色
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
  1. if( is_array( $highlight ) ) {
  2.     $geshi->highlight_lines_extra( $highlight );    //show these lines as special
  3.     $geshi->set_highlight_lines_extra_style( 'background-color:#FFFFBC;' ); //set bg color for special lines
  4. }

ソースべた書きなのねw
 

縞々

偶数行目だけ背景色を付けたい。

plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
  1. $geshi->enable_line_numbers( GESHI_NORMAL_LINE_NUMBERS );   //show line numbers

413行目を下記のように変更。

  1. $geshi->enable_line_numbers( GESHI_FANCY_LINE_NUMBERS, 2 ); //show line numbers

 

function enable_line_numbers($flag, $nth_row = 5)

引数は2つ。
$flag
GESHI_NO_LINE_NUMBERS:行番号なし
GESHI_NORMAL_LINE_NUMBERS:行番号あり
GESHI_FANCY_LINE_NUMBERS:行番号と装飾あり
 
$nth_row = 5
何行毎に装飾を入れるか(省略すると5行毎)
 

plugins\igsyntax-hiliter\geshi.php
  1. /**
  2.  * Line number styles for fancy lines
  3.  * @var string
  4.  */
  5. var $line_style2 = 'font-weight: bold; vertical-align:top;';

ここのスタイルを好きなように。

私は下記のようにした。

  1. var $line_style2 = 'font-weight: normal; vertical-align:top; background-color: #FBF7FF;';

 

その他

幅や色、線の太さなど微調整。
 
しっかし、PHP は、コードハイライトが効いていない気がします。。。X-)

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-01-30 (金) 11:47:43 | 最終更新:2015-09-04 (金) 16:43:14

Add-on -> Google アナリティクス オプトアウト アドオン

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 18:58:22 | 最終更新:2016-05-15 (日) 16:15:01

FirefoxGoogle アナリティクス JavaScript(ga.js、analytics.js、dc.js)によるデータの使用をウェブサイトのユーザーが無効にできるように開発された機能です。

インストール

Google アナリティクス オプトアウト アドオン

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 18:58:22 | 最終更新:2016-05-15 (日) 16:15:01

拡張機能 -> Session Manager

Posted by muchag | Google Chrome,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 17:25:26 | 最終更新:2015-01-28 (水) 17:25:26

現在開いているタブの状態を、 “ セッション ” として保存できるようにする 「Google Chrome」 拡張機能。
ツールバー上に追加される専用のボタンから、ある時点でのタブの状態を簡単に保存&復元できるようにします。
“ セッション ” は複数保存することができ、一つ一つ分かりやすい名前を付けられるようになっています。

インストール

Session Manager
 

参考サイト

k本的に無料ソフト:タブの状態を、 “ セッション ” として保存できるようにする!「Session Manager」。

Posted by muchag | Google Chrome,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 17:25:26 | 最終更新:2015-01-28 (水) 17:25:26

拡張機能 -> Keep My Opt-Outs

Posted by muchag | Google Chrome,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 16:26:24 | 最終更新:2015-01-28 (水) 16:26:24

「Cookie を利用したオンライン広告カスタマイズをブラウザで永続的に無効にすることができます。」

インストール

Keep My Opt-Outs

Posted by muchag | Google Chrome,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 16:26:24 | 最終更新:2015-01-28 (水) 16:26:24

Add-on -> Cookie Monster

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 15:13:48 | 最終更新:2016-05-15 (日) 16:13:57

FirefoxCookie 管理アドオン。

インストール

Cookie Monster

参考サイト

歌うキツネ:FirefoxのCookie Monsterでクッキーの管理をする

Posted by muchag | Firefox,Library & PlugIn & AddIn |
初回投稿:2015-01-28 (水) 15:13:48 | 最終更新:2016-05-15 (日) 16:13:57

Slider Pro

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 17:53:43 | 最終更新:2015-01-03 (土) 13:07:21

多機能スライドショー。
公式サイト
デモも同サイトにある。

【環境】
[jQuery] 1.11.0
[Slider Pro] 1.1.0
DL

公式TOP の中ほど下にある「Get the jQuery plugin」
または、GitHub の Slider Pro のプロジェクトページ から DL。
同 GitHub プロジェクトページにコマンドによる DL(インストール)手法も紹介されている。

 

セッティング
head
  1. <link rel="stylesheet" href="css/slider-pro.min.css" />

 

body
本体
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18. </div>

 

実行

フッタ部分(body 最下部)へ記述。

  1. <script src="js/jquery-1.11.0.min.js"></script>
  2. <script src="js/jquery.sliderPro.min.js"></script>
  3. <script type="text/javascript">
  4.     // 実行部分
  5.     jQuery( document ).ready(function( $ ) {
  6.         $( '#my-slider' ).sliderPro();
  7.     });
  8.  
  9.     // JavaScript API。オプション(プロパティ)設定
  10.     $( '#my-slider' ).sliderPro({
  11.         width: 960,
  12.         height: 500,
  13.         arrows: true,
  14.         buttons: false,
  15.         waitForLayers: true,
  16.         fade: true,
  17.         autoplay: false,
  18.         autoScaleLayers: false
  19.     });
  20. </script>

オプション一覧
JavaScript API

オプション名 内容 デフォルト値
備考
width スライダーの横幅 500
px(数値のみ) か %(クォーテーションで括る)で指定。
height スライダーの高さ 300
px(数値のみ) か %(クォーテーションで括る)で指定。
responsive true
aspectRatio アスペクト比 -1
imageScaleMode 画像自動拡縮モード ‘cover’
‘cover’:スライド全体に合うようにリサイズ
‘contain’:画像全体がスライドの中に納まるように?
‘exact’:スライドのサイズに合わせる
‘none’:何もせず
centerImage true
autoHeight 高さの自動調節 false
スライドに合わせた高さの自動調節
startSlide 開始スライド番号 0
shuffle シャッフル false
orientation スライド方向 ‘horizontal’
‘horizontal’:水平方向
‘vertical’:垂直方向
buttons マーカーボタンの表示 true
スライド下部に表示される、現在地を示す、スライドを切り替えるボタンを表示する
keyboard キーボード操作 true
左右キー(← →)を有効にする
thumbnailWidth サムネイル幅 100
thumbnailHeight サムネイル高さ 80
thumbnailsPosition サムネイル配置場所 ‘bottom’
スライドの ‘top’, ‘bottom’, ‘right’ and ‘left’
thumbnailPointer アクティブマーカー false
アクティブなサムネイルにマーカーを付ける
thumbnailArrows false
fadeThumbnailArrows false
thumbnailTouchSwipe true

※まだまだいっぱいあるけど、力尽きた・・・
訳間違いも可能性大なので、公式サイト(JavaScript API) を参照のこと。
 

サムネイル付
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18.  
  19.     <!-- サムネイル部分 -->
  20.     <div class="sp-thumbnails">
  21.         <img class="sp-thumbnail" src="img/thumbnail/image1.jpg"/>
  22.         <img class="sp-thumbnail" src="img/thumbnail/image2.jpg"/>
  23.         <img class="sp-thumbnail" src="img/thumbnail/image3.jpg"/>
  24.     </div>
  25. </div>

 
次はオプション。
関係がありそうなもののデフォルト値を並べてみた。

  1. <script type="text/javascript">
  2.     $( '#my-slider' ).sliderPro({
  3.         thumbnailWidth: 100,
  4.         thumbnailHeight: 80,
  5.         thumbnailsPosition: 'bottom',
  6.         thumbnailPointer: false,
  7.         thumbnailArrows: false,
  8.         fadeThumbnailArrows: true,
  9.         thumbnailTouchSwipe: true
  10.     });
  11. </script>

 

参考元サイト

coliss:[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
Gimmick log:万能スライダー Slider Pro の使い方
→具体例がたくさんあって、参考になる
STERFIELD:クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン
→オプションの説明がある

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 17:53:43 | 最終更新:2015-01-03 (土) 13:07:21

blueberry

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 14:55:51 | 最終更新:2015-01-02 (金) 14:58:24

画像を準備するだけで簡単だった♪

【環境】
[jQuery] 1.6.1
DL

公式サイト から DL。
デモも同サイトTOPにある。
 

セッティング
head
  1. <link rel="stylesheet" href="css/blueberry.css" />
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  3. <script src="js/jquery.blueberry.js"></script>

 

body
本体
  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. </div>

上記だけ記載すれば、blueberry 側でオプションを自動でくっつけてくれ
実際のコードは下記のように出力される。

  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. <!-- Optional, see options below -->
  9.     <ul class="pager">
  10.         <li><a href="#"><span></span></a></li>
  11.         <li><a href="#"><span></span></a></li>
  12.         <li><a href="#"><span></span></a></li>
  13.         <li><a href="#"><span></span></a></li>
  14.     </ul>
  15. <!-- Optional, see options below -->
  16. </div>

 

実行
  1. <script>
  2.     $(window).load(function() {
  3.         $('.blueberry').blueberry();
  4.     });    
  5. </script>

 

CSS

スライドショーのサイズは親エレメントに依存するので
下記のような設定は任意。

  1. .blueberry { max-width: 960px; }

 

jquery.blueberry.js
  1. var defaults = {
  2.     interval: 5000,
  3.     duration: 500,
  4.     lineheight: 1,
  5.     height: 'auto', //reserved
  6.     hoverpause: false,
  7.     pager: true,
  8.     nav: true, //reserved
  9.     keynav: true
  10. }

 

参考元サイト

coliss:[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 14:55:51 | 最終更新:2015-01-02 (金) 14:58:24

GD ライブラリ -> 画像のリサイズ

Posted by muchag | Library & PlugIn & AddIn,PHP |
初回投稿:2011-12-05 (月) 19:36:25 | 最終更新:2011-12-05 (月) 19:36:25

GD ライブラリにて画像のリサイズを行う手法。

imagecopyresampled

下の imagecopyresized に比べて良品質。

bool imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
再サンプリングを行いイメージの一部をコピー、伸縮する

PHP Manual:imagecopyresampled

 

imagecopyresized

bool imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
画像の一部をコピーしサイズを変更する

PHP Manual:imagecopyresized

Posted by muchag | Library & PlugIn & AddIn,PHP |
初回投稿:2011-12-05 (月) 19:36:25 | 最終更新:2011-12-05 (月) 19:36:25
« 前ページへ次ページへ »