tohokuaikiのチラシの裏

技術的ネタとか。

JavaScript

Gulp4で画像のCacheBusterみたいな

今更だけど。 ファイル構造はこんな感じ。 gulpfile.js gulp-functions.js package.json package-lock.json htdocs/ ├── css │ └── images ├── images └── js src ├── javascripts │ └── vendor └── scss src/scss => htdocs/css src/javascripts => htdocs/…

HTMLのcanvasで任意の4点をクリックして四角形を描く

なんか、ライブラリであるかな?と思ったけど、意外と書いちゃった方が楽なんじゃないかと思って書いた。 結論から申し上げますと、外積がメッチャ役に立った。 任意の4点から四角形を描く方法 なんかこれどう考えればいいんだろう?って思ったけど、良いの…

axiosでParallel実行する時のエラーハンドリングがよくわからない

axiosで並列して全部終わったら…というやつ。 axios.all([ axios.get('/api/user/'), axios.get('/api/image') ]).then(([res1, res2]) => { this.user = res1.data; this.image = res2.data; }).catch(err =>{ console.log(err); }); ってやると、2つgetし…

jQueryで排他的なCheckbox

一つチェックボックスしたら他のはチェックさせたくないってありますよね。 それならラジオボックス使えって話なのですが、ラジオは全部解除ができなくなってしまうからっていう。 (全部解除のUIってわかりにくいでしょ) ということで、 <p rel="reserve"> <input type="checkbox" value="1">選択肢1 <input type="checkbox" value="1">選択肢2 </p>…

tinymceのリストであるadvlist_bullet_stylesを変更して選択肢ドロップダウンを変えたい

メモ:tinymceは3系統tinyMCE.init({...})のオプションで、advlist_bullet_stylesを変える場合。 つまり、 みたいに、4つあるデフォルト状態から1個にしたい場合。 advlist_bullet_styles: [ {title : 'Circle', styles: { listStyleType: "circle ], みたい…

Firefox37でlocationがうまく使えなかったのでURLUtils.jsを使ってみた

Firefox37で発覚したロケーションバーの全角問題 ChromeやIEでは問題なかったし、Firefox34*1でも問題なかったのだけど。たとえばロケーションバーに http://tohokuaiki.hateblo.jp/#ここに全角スラッシュ/を入れます。 とした場合、FirebugやChromeのコン…

JavaScriptでXMLとXPath

メモ書き 文字列からXMLオブジェクトを作成 参考:http://www.openspc2.org/reibun/javascript2/XML/convert/0001/ var xml = '<root><twitter><account><name>読売新聞</name><id>Yomiuri_Online</id></account><account><name>NHK広報局</name><id>NHK_PR</id></account></twitter></root>'; var xmlParser = n…

あるdelimiterでsplitしたい時にdelimiterに対してエスケープしたい場合のsplit

なんのこっちゃという感じですが。要は、 var string = "base=aaa\\|bbb\\=ccc|conf2dita_table_order=1|frame=bottom|platform=pla\\=foo\\|\\|\\|rrr\\=mmm|props=test"; var split = split_ex(string , "|"); // 結果 split = ["base=aaa", "bbb=ccc", "c…

jQueryでEventListnerを登録しつつ1回だけ実行する関数に名前を付けない

よくあるんだけど、ロード時にcheckboxに合わせてトグルするとか。1回だけコールするんだけど、 $('#foo').on('click', cbfunction); cbfunction(); とかってダサいじゃないですか。cbfunctionとか1回しか使わないしということで、 $('#foo').on('click', fu…

ConfluenceにおけるJavaScriptテンプレートについて

soyを使ったClosureTemplateが導入される前、JavaScript純粋なテンプレートとしてAJS.template()メソッドがある。参考ページ:Template | AUI Documentation テンプレートの設定 テンプレートのHTMLは<script type="text/x-template">を使う。 <script type="text/x-template" title="template-title"> <div id="foo"> ここに適当なHTMLテンプレートを記述 テンプ</div>…

スマートフォンで?FacebookのFB.ui()メソッドでfeedを使用する時の罠

facebookのFB.uiメソッドを使うと、モーダルポップアップでShareとかのリンクを出してくれる。 https://developers.facebook.com/docs/reference/javascript/FB.ui/こんな感じ。 FB.ui({ method: 'feed', link: "http://d.hatena.ne.jp/tohokuaiki/", redire…

Deferredの再帰

JavaScript - 再帰 with promise pattern - Qiitaの再帰。 var counter = 0; function fact(n) { var d = $.Deferred(); if (n > 1){ console.log("continue",n, ++counter); fact(n -1).done(function(result){ console.log("done", n,result, ++counter); …

空白文字を飛ばしたsubstr

HTMLは空白を数えて文字詰めすると見た目がそろわないので作った。 var substrWithoutSpaceChars = function(string, offset, limit) { var ret = "", counter = 0, chara; for (var i=0; i < 10000; i++){ if (i > string.length){ break; } if (counter >=…

createTextNode(string)したら中のstringテキストがエスケープされて困った件

こんな感じ var dom = document.createElement('div'); var txt = document.createTextNode("&#162;"); dom.appendChild(txt); console.log(dom.innerHTML); だと、コンソールに&#162; って出てきます。これは困る。 var dom = document.createElement('div'…

postMessageを簡単に

frame間でJavaScript操作するのにpostMessageするのだけど、なんで今回使ったかというとローカルに置いた静的HTMLで使いたかったので。この場合、オリジンが無いのでChromeとかSafariはセキュリティエラーで引っかかってしまう。 下準備 使うのは、jQueryでp…

jQuery.param()に対応するのが無い

jquery deserializeとかで検索したらすぐあった。 https://github.com/edgarjs/jquery-deserialize

jQueryのparent()とparents()の違い

テストコード <html> <head> <script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script> <script> $(function(){ console.log($('.bold').parents()); console.log($('.bold').parent()); }) </script> </head> <body> <div>div, <span>span, </span> <b class="bold">b </b> </div> <p>p, <span>span…</span></p></body></html>

prototype内のthisはその一個上のを指さない

FlashのSharedObjectをJavaScriptからCallする汎用的なClassを書いててハマった。SharedObjectなので、ExternalInterfaceによるCallバックを使わないといけない。 なので、値を直接JSには投げられなくて、Proxyさせる必要がある。 いや、投げられるけどかっ…

FlashからExternalInterfaceでJavaScriptをcallしようとしてIEでハマった件

なんか、IE9でうまく動作してなくて、デバッガ起動させたらコンソールにエラーが出てた。 Object doesn't support property or method 'SetReturnValue' このエラーなんぞーって思って調べたら、ここに I've found that, for IE, calling Javascript from Ac…

LESS.jsでwatchモードが効かなかった話

何のことはない、less.jsはwatchモードが有効になるには、hostnameがlocalhost/127.0.0.1/0.0.0.0出なければならないみたい。 http://www.paulsprangers.com/2011/04/quick-tip-less-js-in-development-and-watch-mode/less.jsの中に location.hostname=="12…

メニューのトップ階層にONを付ける

なんか、WordPressのtwentytenというテーマで作ったのだけど結局使わなかったのでコピペ。 <div class="menu"><ul><li><a href="..."></li><li>....</li></ul></div> みたいな階層があるときに、トップのやつにONクラスを付ける。 要:http://phpjs.org/functions/parse_url:485前提として、メニューがちゃんとURLも階層になっ…

onEnterでSubmitさせないようにするJavaScript

input type=textでSubmitさせたくない場合ありますよね。 jQuery前提で。 <form id="someForm"> <input type="text" name="hoge"> <input type="submit" id="submitbutton"> </form> というHTMLフォームの場合、 var post_flag = false; $(function() { $('#submitbutton').bind('mouseup', function(e){ post_flag = true; }); $('#someForm').bind('submi…

HTMLエスケープを行うjQueryプラグイン

検索してもあんま見つからなかったので書いた。 まぁ、たいしたこと無いものね。 /****************************************** * jQuery Plugin: escapeENTS * @author ITOH Takashi<itoh_at_junoe.jp> * @date 2011.05.11 * require jQuery v1.4.2 * Version 1.0 * usege: $.</itoh_at_junoe.jp>…

WordPressの大量の記事削除がめんどいので、コンソールからJavaScriptを実行させ続けるだけの簡単なお仕事です

JavaScriptでこんなの書いて、Firebugのコンソールから実行ボタンを押し続けるだけの簡単なお仕事です。 jQuery('select[name=action]').val('trash'); jQuery('input[type=checkbox]').attr('checked', true); jQuery('#posts-filter').append('<input type="hidden" name="doaction" value="1">').submit();…

jQueryでIEのバージョンを判別する方法

jQuery1.6でうまく動作しないようです。 ということで、http://w3g.jp/blog/tools/js_browser_sniffing を参考に書き換え var isIE = function() { var version = arguments.length ? arguments[0] : ''; var _ua = (function() { return { ltIE6:typeof win…

JavaScriptでイベントを遅延して評価させたい

メッセージキューっていうのかな? jQueryのdelegate/bind前提で。 Ajax:Completeのタイミングで評価するのが本来なんだけど、Ajax:Completeは色んなものが絡んでくるのであんまり直接使いたくない。しかも、あるパーシャルなHTMLは複数の呼び出し元からCall…

色を選択するカラーピッカーJavaScriptを探してcpick.jsを改造した

JavaScriptのカラーピッカーってありますよね。 単体で使えて、他のライブラリとも干渉しないのないかなーって探してこれ。カラーピッカー.js - JavaScript ライブラリー - HTML5.JPすごくいいんだけど、色を選択したときのコールバック関数が実行できないの…

経過時間を測るJavaScript

関数ごとのは、Firebugのプロファイルで分かる。まぁ、IEとかはちゃんとやんなきゃだけど。とりあえず、全体の実行時間を測りたい場合。内に <script>(function(startTime){ pt = function(){ console.log("経過時間: ", ((new Date()).getTime() - startTime)/1000)</script>…

ExtJSの何がすごいかって、マニュアルがすごい。

良いもの作っても、良いものになればなるほと、機能が付けばつくほどわかりやすいAPIリファレンス作らないと意味無いよなー。何かしたくて、わかんなかったら、 http://extjs.com/deploy/dev/docs/ で、だいたいわかるし、できなかった時のGoogleサーチの時…

cloneNodeにおいて、I.Eではイベントもコピーするが、Firefoxではイベントはコピーされない

うそ〜ん・・って感じでハマってしまった。これ、I.EとFirefoxでどっちが良い挙動かっていうと、Firefoxです。I.EはcloneNodeでなんとidまでコピーしてくれるんでidが唯一じゃなくなってしまう・・・・。# idはF.Fもコピーしてくれるみたい。。そりゃま、パ…