tohokuaikiのチラシの裏

技術的ネタとか。

トップ > JavaScript

JavaScript

TypeScriptでデータを元に重複を見てループする方法

JavaScript

俺のコード type Job = Record<'area' | 'act' | 'type' | 'num' | 'days' | 'limit', string>; type Filter = Record<'area' | 'act' | 'type', string[]>; const filter:Filter = { area: [], act: [], type: [] }; (async () => { const resp = await fet…

Reactのページ送りライブラリをreact-paginateからrc-paginationに変えた

JavaScript React

Reactでページ送りを実装するときに、とりあえず https://www.npmjs.com/ で「react paginate」とかで検索したりgoogle:react paginateでググったりすると、react-paginateってのが出てくるんですよ。 www.npmjs.com これについて解説しているQiitaの記事も…

async修飾子とawait演算子の使い方

JavaScript

async修飾子とawait演算子の使い方 たぶん、Qiitaなんかでは2500くらい記事がありそうなこのネタ。よくわかってなかったので自分用にまとめておく。 async修飾子とawait演算子 この2つ、よくasync/awaitみたいに紹介されてるけど並列で並べるようなものじゃ…

Gulp4で画像のCacheBusterみたいな

JavaScript

今更だけど。 ファイル構造はこんな感じ。 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点をクリックして四角形を描く

JavaScript

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

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

JavaScript

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

JavaScriptでXMLとXPath

JavaScript 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

JavaScript

なんのこっちゃという感じですが。要は、 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回だけ実行する関数に名前を付けない

JavaScript

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

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

JavaScript confluence

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を使用する時の罠

javascript

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

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

JavaScript

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テキストがエスケープされて困った件

JavaScript

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

postMessageを簡単に

JavaScript

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

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

JavaScript

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

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

JavaScript

テストコード <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はその一個上のを指さない

JavaScript

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

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

JavaScript flex

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

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

JavaScript lessjs

何のことはない、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を付ける

JavaScript wordpress

なんか、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

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プラグイン

JavaScript

検索してもあんま見つからなかったので書いた。 まぁ、たいしたこと無いものね。 /****************************************** * 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を実行させ続けるだけの簡単なお仕事です

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のバージョンを判別する方法

JavaScript

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でイベントを遅延して評価させたい

JavaScript

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

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

JavaScript

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