JavaScript タグの一覧です(7 件)

Flickrのおせっかいな埋め込みコードをJavaScriptで何とかする

ブログなどにFlickrの写真を貼り付ける為の埋め込みコードはちょくちょく変更があって現在はこのような感じになっています

スクリーンショット 2016-09-07 22.19.35

埋め込みコード

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/aoshiman/29246324066/in/datetaken/" 
title="スクリーンショット 2016-08-28 13.38.41"><img src="https://c1.staticflickr.com/9/8373/29246324066_25a75afcac_o.png" width="1024" height="640" alt="スクリーンショット
 2016-08-28 13.38.41"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

これを余計なものを取っ払ってこのようなシンプルな形にしたい

<a href="https://www.flickr.com/photos/aoshiman/29246324066/in/datetaken/" title="スクリーンショット 2016-08-28 13.38.41"><img src="https://c1.staticflickr.com/9/8373/29246324066_25a75afcac_o.png" width="1024" height="640" alt="スクリーンショット 2016-08-28 13.38.41" class="img-responsive"></a>

不要なのは頭のこの部分と

data-flickr-embed="true" 

最後についてくるJavaScript

<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

逆に必要なのはこれ(これはBootstrapにおけるimgタグのレスポンシブ用クラスです)

class="img-responsive"

で、昼休みの時間で出来上がったのがこのbookmarkletです(雑)。これを上記埋め込みコード生成画面で実行してあげると

javascript:(function(){var e,text,textA,textB,textC; e=document.getElementsByClassName('embed-code-text-field');text=e[0].value;textA=text.replace("data-flickr-embed=\"true\"  ",'');textB=textA.replace("\<script async src=\"\/\/embedr.flickr.com\/assets\/client-code.js\" charset=\"utf-8\"\>\<\/script\>",'');textC=textB.replace("\>\<\/a\>"," class=\"img-responsive\"\>\<\/a\>");e[0].value=textC;console.log(textC);})();

このように埋め込みコードをコンバートしてくれます

スクリーンショット 2016-09-08 21.27.20

参考サイト

Flickrの生成するEmbedコードをユーザースクリプトで自動加工する方法(Firefox + はてなブログの場合) - 酔人日月抄

[JavaScript] TrifleJS を使ってみる

仕事関連でInternet Explorerをヘッドレスで動かしたくてtrifleJSを試してみた。
trifleJS: Headless automation for Internet Explorer

サイトの冒頭に書いてある通り、PhantomJS互換でトライデントエンジンをヘッドレスで動かすもののようで、WebDriverサポートは未だらしい。とりあえずIE9でこのブログのスクリーンショットを撮ってみる
環境はWindows7 Professional 32bitです。因みにシステム要件はこちら

c:\TrifleJS> TrifleJS.exe --emulate=IE9 --render=http://blog.aoshiman.org

同梱されているexamplesフォルダには様々なサンプルスクリプトがある。 その中のloadspeed.jsを使ってみる(ついでにproxyを通してみる)。
これはコマンドライン引数にURLを指定し、サイトタイトルと掛った時間を表示させるもの。

c:\TrifleJS>
c:\TrifleJS>cd examples
c:\TrifleJS\examples>
c:\TrifleJS\examples>..\TrifleJS.exe loadspeed.js http://blog.aoshiman.org/ --proxy=192.168.xxx.xxx:8080
Page title is aoshiman.org
Loading time 988 msec

Roadmap を見ると道半ばというよりはまだまだこれからというところっぽい。 WebDriverをサポートすると嬉しい気もするが、IEはもういいよという気もしないでもない(笑)


[CSS][JavaScript]Google カスタム検索 の設置をしてみた

Frozen-Flaskを使って静的サイト運営をしてからというもの、いかにクライアントサイドで動きを付与させるかを考えていて、その一環でGoogle カスタム検索を設置してみました。

このブログのサイドバーにあります。表示結果がオーバーレイされるようにしています。カッコいいです。

静的サイトにおけるサイト内検索は、自前で実装するならば検索データをjsonなりxmlなりで出力するページを設けてそれをJavaScriptでパースすることが考えられて、静的サイトジェネレータにそういった機能があればそれを使えばよいのだけれど、ない場合はGoogleに乗っかるのが一番手っ取り早いですね。
ちなみに Bootstrap3 で使ってみるとボタンがつぶれたりしてそのままだと表示が残念なので、デベロッパーツール等で ちまちま とCSS打ち消したりしていくしかないです。

jquery - Google CSE with Twitter Bootstrap not displaying the search box correctly - Stack Overflow

[Bookmarklet]しずぎんダイレクトのワンタイムパスワード入力補佐Bookmarklet 2014年9月修正版

最近、しずぎんダイレクトのリニューアルがあった為、前回作成したワンタイムパスワード(乱数表)呼び出しbookmarkletが動かなくなっていたので修正しました。

javascript:%20(function(){%20var%20d=document;%20var%20str=String;%20var%20tkn=[n1,n2,n3,n4,n5,n6,n7,n8,n9,n10,n11,n12];%20el1=d.getElementById("msg002-1").innerHTML;%20el2=d.getElementById("msg002-2").innerHTML;%20el3=d.getElementById("msg002-3").innerHTML;%20alert(str(tkn[(el1)-1])+str(tkn[(el2)-1])+str(tkn[(el3)-1]))})();
前回も書きましたが、もし使用する方がいらっしゃいましたら、自己責任で使用願います。 使用前に、n1~n12の箇所に静銀から貰った乱数表の数字を左から置き換えて下さい。 Safari、Firefoxで確認しています。試してませんが、IEは11とかだと動くと思います。

[JavaScript][jQuery]InfinateScrollを導入した

Twitter(ブラウザ版)みたいな無限スクロールをブログに適用したくて色々と調べていたんですけど、InfinateScrollっていうjQueryプラグインを使うことにしました。

他にも類似品はあるのだけれど、これはGitHubでスターいっぱい付いているし、なによりこちらが参考になったので。

使い方はbodyの閉じタグ直前にjQuery本体、InfinateScrollの順に設置してあげて、その後にプラグインの設定部分を記述するだけです。

実際のコードはこんなかんじになっています。

<script type="text/javascript" src="/static/js/jquery.infinitescroll.min.js"></script>
<script>
    $(function(){
        $('#wrapper').infinitescroll({
            <!-- debug        : console.log, -->
            navSelector  : "li.next",
            nextSelector : "li.next a",
            itemSelector : "#wrapper div.container"
        });
    });
</script>

適用したのはPaginateを持っているapp.routeで今のところトップページとタグページになります。当初トップページだけでしたが、タグによってはかなりエントリ件数が増えているのでPaginate機能を持たせました。

閲覧してなんかおかしいところあったら教えてください。


PAGE TOP