SyntaxHighlighterのVersion 4を試してみた

SyntaxHighlighter V4

ブログとかでよく見かけるコードをハイライトするSyntaxHighlighter、5年くらい前にはてなブログで使って見ようと一度検討して見送った経緯があるのですが、あらためて使って見ようと思い試してみました。

確かバージョン3くらいまではzipファイルをダウンロードして、jsファイルとcssファイルを配置するだけでよかったような、、、いつの間にか黒い画面でgit cloneとかgulpとか使って自分でビルドしなきゃいけなくなったらしく、それの覚え書きです。

ブログでよく見るこれです。
f:id:bleu-bleut:20170514205156p:plain

 

jsファイルとcssファイルのビルド

下のコマンドで、projectディレクトリ直下のdistディレクトリに、syntaxhighlighter.jsとdefault.cssができます。

  1.  
  2. $ mkdir project
  3. $ cd project
  4. $ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
  5. $ cd syntaxhighlighter
  6. $ npm install
  7. $ ./node_modules/gulp/bin/gulp.js setup-project
  8. $ ./node_modules/gulp/bin/gulp.js build --brushes='all' --theme=default
  9. user@localhost
Building Options
オプション 説明
--brushes "all"とか"css,javascript"とか。
Official brushesはたくさんあります。 Brushes and Themes
--theme 選べる公式テーマは9種類、default, django, eclipse, emacs, fadetogrey, mdultra, midnight, rdark, swiftからどれか一つ
--compat バージョン3と互換性を持たせるようですが、試してません
--output 初期値 dist
出力先ディレクトリです
--help ヘルプ

 

jsファイルとcssファイルの設置、コードの記述

このあとは今までと設置の仕方、コードの記述の仕方はバージョン3の頃と変わってないんじゃないかと思います。

グローバルコンフィグsyntaxhighlighterConfigは、syntaxhighlighter.jsを読み込む前に指定します。

 
  1. <link type="text/css" rel="stylesheet" href="./path/to/default.css">
  2. <script type="text/javascript">
  3. syntaxhighlighterConfig = {
  4.   className: 'custom-class-name'
  5. };
  6. </script>
  7. <script type="text/javascript" src="./path/to/syntaxhighlighter.js">
  8. <pre class="brush: js; auto-links: false; first-line: 10; highlight: [2, 4]">
  9. function testFunction(){
  10. }
  11. </pre>
httpd.conf
Global Configuration
プロパティ 説明
className 初期値 null
ハイライトしたいテーブルに任意のクラスを付与できます
Per Element Configuration
プロパティ 説明
auto-links 初期値 true
URL形式のテキストを検出します
first-line 初期値 1
スタートの行番号です
gutter 初期値 true
行番号の有無を指定します
highlight 初期値 null
行のハイライトを[1, 2, 4]みたく、配列で指定します
html-script 初期値 false
公式インストラクションにshBrushXml.jsをロードする必要があるというのは、ビルドオプションの--brushにxmlを加えておくこと、という意味だと思います
smart-tabs 初期値 true
タブの自動挿入だと思うのですが動作確認できませんでした
tab-size 初期値 4
タブサイズです
※ コードを見ると他にも、title、quick-code、collapseというオプションがあるようですが、公式に記載されているものだけ載せています。

 

SyntaxHighlighterのデモ

ビルドするとできるdist/index.htmlがデモになっているのですが、、9種類のCSSの切り替えスイッチをつけて、同じくいつの間にかなくなっていたコピーボタンをつけて置いておきました。

f:id:bleu-bleut:20170514153047p:plain

 

おわり

いろいろと調べて試してみた結果、やっぱり今回もはてなブログで使うのはやめておくことにしました。

 

参照サイト

 

関連記事

nmcliコマンドでVirtualBoxの「ブリッジアダプター」設定

ローカルエリアでWebサーバー

Windows10上のVirtualBoxにCentOS7をインストールして、LAN内からアクセスできるWebサーバーを立てます。LAN内の他の端末、ノートPCやスマホタブレットDHCPIPアドレスを取得しますが、CentOSのWebサーバーはIPアドレスを固定にする必要があります。
 
nmcliコマンドを初めて使って設定したので、その覚え書き。

f:id:bleu-bleut:20170424210823p:plain
要はこんな感じ、CentOSのWebサーバは192.168.1.100で固定して、ほかはDHCPで取得します。

 

VirtualBoxのネットワーク設定

VirtualBoxの現時点のバージョン5.1.14において、ネットワーク設定で割り当てができるのは7種類。ローカルエリア内でWebサーバーとして使えるのはほかにもNATNATネットワークがあると思いますが、自宅使用でルータに直接ぶら下げても構わないのでブリッジアダプターを選びました。

ネットワーク設定の割り当て
  1. 未割り当て
  2. NAT
  3. NATネットワーク
  4. ブリッジアダプター
  5. 内部ネットワーク
  6. ホストオンリーアダプター
  7. 汎用アダプター

 

新規ゲストOSの作成

VirtualBoxのインストールや新規ゲストOSの作成は、他のいくつつかの完璧な記事を参考にしてください。

新規ゲストOSを作成したら、設定 > ネットワーク > 「アダプター1」の割り当てを「ブリッジアダプター」にしてCentOSをインストールします。「高度」の設定はデフォルトのままです。

「設定」ボタン
f:id:bleu-bleut:20170423094556p:plain
「ネットワーク」のメニューから、ブリッジアダプターを選択
f:id:bleu-bleut:20170423094601p:plain

 

CentOS 7のインストー

今回はCentOS-7-x86_64-DVD-1611.iso」をダウンロードしてインストール、以下のIPネットワークの設定はインストール直後の状態からの設定です。

インストール直後のログイン画面
f:id:bleu-bleut:20170423095450p:plain

 

nmcliでインストール直後の設定を確認

バイス名を確認。インストール直後ではデバイスenp0s3はダウン。
  1.  
  2. # nmcli device
  3. root@localhost
f:id:bleu-bleut:20170423124023j:plain

一応MACアドレスはここで確認。
  1.  
  2. # nmcli device show enp0s3
  3. root@localhost
f:id:bleu-bleut:20170423124244j:plain

インストール直後は、IPv4アドレスは自動取得で、自動接続(connection.autoconnect)も無効。
  1.  
  2. # nmcli connection show enp0s3 | less
  3. root@virtualbox
f:id:bleu-bleut:20170423124714j:plain
f:id:bleu-bleut:20170423124719j:plain
f:id:bleu-bleut:20170423124724j:plain

 

nmcliでIPネットワーク設定

以上を踏まえて、IPv4アドレスを手動設定に変更、IPv4アドレス、DNS、デフォルトルートの各アドレスを設定し、自動接続を有効に変更。コネクションを再起動します。

  1.  
  2. // IPv4アドレスを手動設定に変更
  3. # nmcli connection modify enp0s3 ipv4.method "manual"
  4.  
  5. // IPv4アドレスとサブネットマスクを設定
  6. # nmcli connection modify enp0s3 ipv4.addresses "192.168.11.100/24"
  7.  
  8. // DNSサーバーアドレスはルータのLANアドレス
  9. # nmcli connection modify enp0s3 ipv4.dns "192.168.11.1"
  10.  
  11. // デフォゲもルータのLANアドレス
  12. # nmcli connection modify enp0s3 ipv4.gateway "192.168.11.1"
  13.  
  14. // CentOSの再起動でも自動接続
  15. # nmcli connection modify enp0s3 connection.autoconnect "yes"
  16.  
  17. // コネクションを再起動して設定を反映
  18. # nmcli device disconnect enp0s3
  19. # nmcli connection up enp0s3
  20. root@virtualbox

 

おわり

以上の設定で、ルータからは有線での接続が確認でき、MBAなどから192.168.11.100でSSH接続ができるようになりました。続いてLAMPやLEMP環境の構築をすれば、ローカルエリア内でWebサーバーを立てることができる、、、はずです。

ルータの管理画面
f:id:bleu-bleut:20170423131312p:plain

 

参照サイト

関連記事

 

(続)クリップボードにコピー

クリップボードにコピーという要件

前回の記事(2013年10月23日)で、WEBページ上のURLとかE-mailアドレスなどの情報をクリップボードにコピーするために、デスクトップなどフラッシュが使えるブラウザではjQuery + jQuery zClipプラグインクリップボードにコピー、フラッシュが使えないiPadのブラウザなんかではpromptに出力して「全選択 > コピー」という方法を取りました。

その後、2015年4月にChrome43+などでcommandExec("copy")が使えるようになりました。時間がだいぶと開いていますが、その続きです。

結果として、commandExec("copy")を使えるデスクトップブラウザなどでは、jQueryなしのPure JavaScriptで実現、タブレットなどcommandExec("copy")が使えない場合は前回同様、promptでテキストを出力、「全選択 > コピー」で対応します。

 

f:id:bleu-bleut:20160624114929j:plain
f:id:bleu-bleut:20160624115408j:plain
 

 

おわり

デモのソースの通り、jQuery無し、jQueryプラグイン無しで、25行程度のJavaScriptでできるようになりました。

iPhoneiPadのブラウザでも早く使えるようになるといいなぁ〜。

 

参照サイト

 

関連記事

Promptに秘密鍵ファイルが転送できない

鍵マークのタップで表示されるのは秘密鍵ファイル

Promptの鍵マークのタップは、iTunesから転送したファイルとクリップボードのコピーの両方から秘密鍵を選ぶことができますが、リストアップされるのは書式にあった秘密鍵ファイルだけです。

MBPのコンソールでペアの鍵ファイルを作成し、MBPとiPadをケーブルでつないでiTunesを起動、iPadのアプリのページからファイル共有で秘密鍵ファイルを転送、Promptの鍵マークのタップで秘密鍵ファイルを指定の手順で、iPadのPromptから公開鍵認証が可能です。

しかし、下の写真のようにiTunes上では転送できているように見えますが、Promptの鍵マークをタップしてもファイルがリストアップされず、「Promptへ鍵ファイルを追加するにはiTunesiPadを接続しAppタブよりファイル共有機能を使用します。」のメッセージが出るだけ。。。

公式ツイッター@PanicJapan )に相談して解決したのですが、その原因は、転送したのが秘密鍵ファイルでなく公開鍵ファイルだったり、書式の異なる秘密鍵ファイルだったというものでした…ごめんなさい!!

 

f:id:bleu-bleut:20140915103126p:plain

f:id:bleu-bleut:20140916122512j:plain

 

公開鍵ファイルはリストアップされない

下のような公開鍵ファイルは転送できてもリストアップされません。GoodReaderなどでiPadに転送しコピーしてもリストアップされません。

f:id:bleu-bleut:20140914211654j:plain

テスト用の公開鍵で実際に使用していません

 

書式の異なるファイルはリストアップされない

Win7のputtygen.exeで生成した2つのファイル(id_rsa_win、id_rsa_win.ppk)は書式が異なり、転送できてもリストアップされません。

f:id:bleu-bleut:20140916154741j:plain

テスト用の鍵ファイルで実際に使用していません

 

Private-Linesの8行を抜き出してこんな風にしてもリストアップされません。

f:id:bleu-bleut:20140916141018j:plain

テスト用の鍵ファイルで実際に使用していません

 

リストアップされたのはこんなファイル

リストアップできたのはMBPで生成した秘密鍵ファイルでこんな書式。GoodReaderなどでiPadに転送しコピーしてもリストアップされます。

f:id:bleu-bleut:20140914211915j:plain

テスト用の秘密鍵で実際に使用していません

ファイル名は関係ありません

id_rsa_ipadやid_rsa.txtなどのファイル名でも転送できます。id_rsaである必要はありません。

 

中の人とのやりとりのまとめ

中の人がとても丁寧に対応してくれたので解決にいたったのだけど、自分の間抜けっぷりをさらしておく。

 

おわり

Prompt

Prompt

  • Panic, Inc.
  • ユーティリティ
  • ¥800

 

参照サイト

 

関連記事

さくらVPSで公開鍵認証する

さくらVPSで公開鍵認証した

公開鍵認証だとパスワードの入力が不要でセキュリティが高まると聞いてやってみた。
MBPの標準コンソール、
iPadSSHアプリPrompt、
Win7Putty
のいずれからも公開鍵認証でSSH接続できるようにする。

その前に公開鍵暗号化方式と公開鍵認証の言葉の確認、
自分の理解なので間違ってたらごめん…

 

公開鍵暗号化方式
ペアの一方の鍵で暗号化すると、もう一方の鍵でしか復号できない。
サーバーは公開鍵で暗号化し、クライアントは秘密鍵で復号化する。
クライアントは秘密鍵で暗号化し、サーバーは公開鍵で復号化する。
 
公開鍵認証
クライアントがサーバにアクセスすると、サーバはランダムな情報をクライアントに送信する。
クライアントは秘密鍵で暗号化して返し、サーバーが公開鍵で復号できれば、認証成功となる。
 

 

Macbook Proのコンソールから公開鍵認証

( 1 / 3 ) 鍵ファイルの生成、秘密鍵の保存、公開鍵の転送

  1. ssh-keygenで鍵ファイルを生成
    鍵ファイルのファイル名、保存先を指定:
    パスフレーズの入力、再入力
  2. scpで公開鍵をさくらVPSサーバーに転送

 

  1.  
  2. $ ssh-keygen -t rsa
  3. Generating public/private rsa key pair.
  4. Enter file in which to save the key :/Users/testuser/Desktop/id_rsa_ipad 注1
  5. Enter passphrase (empty for no passphrase): 注2
  6. Enter same passphrase again: 注2
  7.  
  8. $ scp ~/.ssh/id_rsa_mbp.pub root@www12345u.sakura.ne.jp:id_rsa_mbp.pub
  9.  

注1 絶対パスで指定

注2 パスフレーズの入力を省略したいので空欄でリターン

 

( 2 / 3 ) さくらVPSサーバーに公開鍵を設定

  1. さくらVPSサーバーにroot権限でログイン
  2. 公開鍵のファイルauthorized_keysを作成
  3. authorized_keysにコピーした公開鍵を追記
  4. SSHコンフィグで、公開鍵認証を有効にする
  5. SSHの再起動

 

  1.  
  2. $ ssh -l root www12345u.sakura.ne.jp -p 22
  3. # mkdir ~/.ssh
  4. # touch ~/.ssh/authorized_keys
  5. # chmod 700 ~/.ssh
  6. # chmod 600 ~/.ssh/authorized_keys
  7.  
  8. # cat ~/id_rsa_mbp.pub >> ~/.ssh/authorized_keys
  9.  
  10. # vim /etc/ssh/sshd_config
  11. PubkeyAuthentication yes
  12. AuthorizedKeysFile .ssh/authorized_keys
  13. Passwordauthentication yes 注3
  14.  
  15. # service sshd restart
  16.  

注3 公開鍵認証のみ許可する場合はno。他の端末からアクセスする可能性があり、その場合はパスワード認証にする場合はyes。

 

( 3 / 3 ) MBPのコンソールからSSH接続

  1. SSHで接続できれば完了
    -l:ログインユーザ名
    -p:ポート番号
    -i:秘密鍵のファイルのパス

 

  1.  
  2. $ ssh -l root www12345u.sakura.ne.jp -p 22 -i ~/.ssh/id_rsa_mbp
  3.  

 

iPadのPromptから公開鍵認証

( 1 / 4 ) 鍵ファイルの生成、秘密鍵の保存、公開鍵の転送

  1. ssh-keygenで鍵ファイルを生成
    鍵ファイルのファイル名、保存先を指定:
    パスフレーズの入力、再入力
  2. scpで公開鍵をさくらVPSサーバーに転送

 

  1.  
  2. $ ssh-keygen -t rsa
  3. Generating public/private rsa key pair.
  4. Enter file in which to save the key :/Users/testuser/Desktop/id_rsa_ipad 注1 注4
  5. Enter passphrase (empty for no passphrase): 注2
  6. Enter same passphrase again: 注2
  7.  
  8. $ scp ~/Desktop/id_rsa_ipad.pub root@www12345u.sakura.ne.jp:id_rsa_ipad.pub
  9.  

注1 絶対パスで指定

注2 パスフレーズの入力を省略したいので空欄でリターン

注4 生成した秘密鍵ファイルをこのあとiPadに転送するときに、.sshのようなドットではじまるディレクトリは選択できないので保存先をDesktopに指定。

 

( 2 / 4 ) さくらVPSサーバーに公開鍵を設定

  1. さくらVPSサーバーにroot権限でログイン
  2. 公開鍵のファイルauthorized_keysを作成 ※作成済みの場合は不要
  3. authorized_keysにコピーした公開鍵を追記
  4. SSHコンフィグで、公開鍵認証を有効にする ※設定済みの場合は不要
  5. SSHの再起動

 

  1.  
  2. /* 先に作成していれば不要 */
  3. # mkdir ~/.ssh
  4. # touch ~/.ssh/authorized_keys
  5. # chmod 700 ~/.ssh
  6. # chmod 600 ~/.ssh/authorized_keys
  7.  
  8. # cat ~/pubkey_ipad >> ~/.ssh/authorized_keys
  9.  
  10. /* 先に設定していれば不要 */
  11. # vim /etc/ssh/sshd_config
  12. PubkeyAuthentication yes
  13. AuthorizedKeysFile .ssh/authorized_keys
  14. Passwordauthentication yes 注3
  15.  
  16. # service sshd restart
  17.  

注3 公開鍵認証のみ許可する場合はno。他の端末からアクセスする可能性があり、その場合はパスワード認証にする場合はyes。

 

( 3 / 4 ) MBPからPromptに秘密鍵を転送

  1. iPadをMBPとつないでiTunesを起動
  2. ファイル共有でPromptを選択、追加ボタンで秘密鍵ファイルを指定

f:id:bleu-bleut:20140915103126p:plain

 

( 4 / 4 ) Promptから接続確認

  1. 接続設定の入力
    SSH:www12345u.sakura.ne.jp
    ポート:22
    ユーザ名:root
    パスワード:(空欄)
  2. 鍵マークのタップで秘密鍵を指定
  3. 接続ボタンでつながれば完了

f:id:bleu-bleut:20140915103145p:plain

Prompt

Prompt

  • Panic, Inc.
  • ユーティリティ
  • ¥800

( おまけ ) 秘密鍵のファイルが表示されない

Promptの鍵マークをタップしても転送したファイルが表示されない、「Promptへ鍵ファイルを追加するにはiTunesiPadを接続しAppタブよりファイル共有機能を使用します。」のメッセージが表示される場合、転送したファイルが秘密鍵でないか書式が異なるかも、、、

こんなミスをする人は他にいないかもしれませんが、次の記事を参照。。。

Promptに秘密鍵ファイルが転送できない

f:id:bleu-bleut:20140916122512j:plain

 

Win7Puttyから公開鍵認証

( 1 / 3 ) 鍵ファイルの生成から、win7秘密鍵の設定まで

  1. Puttyに付属のputtygen.exeを起動
  2. Generateボタン押下、公開鍵、秘密鍵を生成
  3. Save Private keyボタン押下、秘密鍵を保存
    (例)/Users/user_account/.ssh/id_rsa_win
  4. 公開鍵をコピーして、さくらのVPSにログイン

f:id:bleu-bleut:20140915103158p:plain

 

( 2 / 3 ) さくらVPSサーバーに公開鍵を設定

  1. さくらVPSサーバーにroot権限でログイン
  2. 公開鍵のファイルauthorized_keysを作成 ※作成済みの場合は不要
  3. authorized_keysにコピーした公開鍵を追記
  4. SSHコンフィグで、公開鍵認証を有効にする ※設定済みの場合は不要
  5. SSHの再起動

 

  1.  
  2. /* 先に作成していれば不要 */
  3. # mkdir ~/.ssh
  4. # touch ~/.ssh/authorized_keys
  5. # chmod 700 ~/.ssh
  6. # chmod 600 ~/.ssh/authorized_keys
  7.  
  8. # vim ~/.ssh/authorized_keys
  9.  
  10. /* 先に設定していれば不要 */
  11. # vim /etc/ssh/sshd_config
  12. PubkeyAuthentication yes
  13. AuthorizedKeysFile .ssh/authorized_keys
  14. Passwordauthentication yes 注3
  15.  
  16. # service sshd restart
  17.  

注3 公開鍵認証のみ許可する場合はno。他の端末からアクセスする可能性があり、その場合はパスワード認証にする場合はyes。

 

( 3 / 3 ) Puttyの設定

  1. Puttyを起動
  2. カテゴリ欄の「接続」から「SSH」、「認証」
    認証のためのプライベートキーファイル:(保存した秘密鍵のファイルを指定)
  3. カテゴリ欄の「接続」から「データ」
    自動ログインのユーザ名:root
  4. カテゴリ欄の「セッション」
    ホスト名:(さくらVPSサーバのIPアドレス
    ポート:22
    セッション一覧:ssh
  5. 保存ボタン押下
  6. 開くボタンで接続できれば成功

f:id:bleu-bleut:20140915103150p:plain

f:id:bleu-bleut:20140915103135p:plain

f:id:bleu-bleut:20140915103206p:plain

 

おわり

 

参照サイト

 

関連記事

クリップボードにコピー、、、の覚え書き

 

 
この記事は2016年5月23日に更新されています。

2015年4月にGoogle Chrome43+などでcommandExec("copy")が使えるようになり、jQueryおよびフラッシュでコピーするためのjQueryプラグインが不要になりました。

 

クリップボードにコピーという要件

デスクトップやタブレットスマホを問わず、よく入力する住所やメールアドレスなんかをWEBページにまとめておいて、クリック(もしくはタップ)でクリップボードにコピーします。

結論としては、HTML5JavaScriptだけでは実現できず、zClipというjQueryプラグインでフラッシュを使うことにしました。

が、もちろん自分も普段メインで使っているiPadiPhoneではフラッシュは使えませんので、iOSのモバイル端末ではpromptコマンドでコピーしたいテキストを出力し、全選択 > コピーの操作でコピーする、という方法で代用します。

フラッシュが使えるブラウザかどうかは、JavaScriptで判定します。

 

f:id:bleu-bleut:20131024044454p:plain
f:id:bleu-bleut:20131024044500p:plain
 

 

iOSでフラッシュが使えるブラウザ

iPad2iPhone5のiOS7でPuffinがフラッシュが使え、タップでコピーできました。promptから全選択 > コピーの操作が面倒なときはiOSでもフラッシュでコピーができます。SafariChrome、Mercuryは駄目でしたが、Puffin以外にもフラッシュが使えるブラウザはあるのかな?

 

Puffin Web Browser Free

Puffin Web Browser Free

  • CloudMosa, Inc.
  • ユーティリティ
  • 無料

 

Puffin Web Browser

Puffin Web Browser

  • CloudMosa, Inc.
  • ユーティリティ
  • ¥300

 

Flashが使えるかどうかの判定js

ブラウザがフラッシュに対応しているかどうかは、Gistで公開されていたmgngさんのFlashが使えるかどうかの判定jsを使わせていただきました。

返り値が0であればフラッシュが使えない、7以上であれば使えると判定します。

 

execCommand("copy")は使えなかった!

javascript clipboard」で検索すると、フェイクで作ったtextareaにコピーしたい値を入れてexecCommandでクリップボードにコピーをするサンプルをいくつか見たのだけど、chromeなどのモダンブラウザではコピーをすることはできませんでした。IE9 on Win7では警告は出てコピーができましたが、主要なブラウザで使えないのでは意味がないので不採用にしました。

 

追記 2015.04.28

Chrome 43+、IE10+、Opera29+で、execCommand("copy")が使えるようになったようです。が、自分はまだ検証していません。

Cut and Copy Commands(英文)

 

おわり

フラッシュを使わないでHTML5JavaScriptだけで実現する方法が結局見つけられなかったのですが、可能だったりするのでしょうか?

デスクトップやモバイル端末でWEBページのテキストをクリックでクリップボードにコピーする、という要件で、最終的に一番いいと思ったのがこの方法でした。

もっといい方法なんかがあったら是非教えてください。

 

参照サイト

 

関連記事

 

検証環境

easing関数をカスタマイズするには?

easing関数をカスタマイズするには?

Advent Calendar 2012 軽めのjQueryの18日目です。

jQueryには、animate()とそのショートカットである、fadeIn()、fadeOut()、slideUp()、slideDown()などで使うことができるeasing関数があります。

jQueryの標準ではlinearとswingの2種類、jquery.easing.jsのプラグインで拡張すると、easeInQuad、easeOutQuadなどの30種類(jswingを数えると31種類)がよく知られています。

それでは、easing関数をカスタマイズするにはどうすればいいのでしょうか?

例えば、linearをカスタマイズして、イージング処理を2回繰り返すだけのlinear2nd()という関数は以下のようになります。

  1.  
  2. $.extend($.easing,{
  3.    linear2nd: function(status,cur_time,firstNum,changeVal,dur_time){
  4.       if(status > 0.5) cur_time-=dur_time/2;
  5.       return firstNum + changeVal * (cur_time/=dur_time) * 2;
  6.    }
  7. });
  8.  

 

easing関数は5つの引数をとることができます。

status cur_timeをdur_timeで割った、0から1の値がはいります。
cur_time 経過時間(単位ms)
firstNum スタート時間、初期では常に0になります。
changeVal 変化量、初期では常に1になります。
dur_time 実行時間(単位ms)

 

デモと、ソースはこちらで確認ができます。 Google Chrome / Safari / Firefoxで動作確認
デモページ
GitHub/Isotake/20121218

 

おわり

Advent Calenderには今回が初参加です。
軽めのjQueryということで思い切って参加してみました。

それでは、19日目にバトンタッチ!

 

参照サイト

 

関連記事