[{"data":1,"prerenderedAt":317},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f1suuecumdsyc7":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":266,"title":267,"date":268,"excerpt":269,"image":270,"categories":271,"modified":274,"html":275,"tags":276,"related":283,"prev":302,"next":310},"ready-to-usable-the-7-javascript-utility-functions","JavaScriptのすぐ使える7つのユーティリティ関数","2016-06-02T15:05:03","私が「Custom DataBase Tables」プラグインのJavaScriptで使っている関数で、すぐに使えて、わざわざ外部ライブラリを読み込むまでもないユーティリティ関数がいくつかあるので、それらを紹介してみたい…","\u002Fassets\u002Fuploads\u002F2016\u002F06\u002Ftools.png",[272,273],{"slug":45,"name":46},{"slug":25,"name":26},"2021-03-24T23:10:24","\u003Cp>私が「Custom DataBase Tables」プラグインのJavaScriptで使っている関数で、すぐに使えて、わざわざ外部ライブラリを読み込むまでもないユーティリティ関数がいくつかあるので、それらを紹介してみたい。\u003C\u002Fp>\n\u003Cp>オリジナルのソースでは、いくつかはjQueryの\u003Ccode>.ready()\u003C\u002Fcode>イベントのハンドラー内に定義しているのだが、特にjQueryに完全依存するようなスクリプトでもないので、素のJavaScriptだけでも動作するように修正するのはそこまで難しくはないと思う。まぁ、記述的にも簡潔に書けるので、この記事ではjQueryありきのままで掲載する。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" >\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>1. 自己のURLのGETパラメータを連想配列（オブジェクト）に格納する\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Return as an object by parsing the query string of the current URL\n *\u002F\n$.QueryString = (function(queries) {\n  if ('' === queries) { return {}; }\n  var results = {};\n  for (var i=0; i<queries.length; ++i) {\n    var param = queries[i].split('=');\n    if (param.length !== 2) { continue; }\n    results[param[0]] = decodeURIComponent(param[1].replace(\u002F\\+\u002Fg, ' '));\n  }\n  return results;\n})(window.location.search.substr(1).split('&'));\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>これは、現在表示している自身のWEBページのURL文字列をパースして、GETパラメータ部を連想配列（JavaScriptのオブジェクト）形式として返してくれる関数だ。カプセル化して自動実行するようにしてあるので、jQueryの\u003Ccode>.ready()\u003C\u002Fcode>イベント発生後であればハンドラー内のどこからでも\u003Ccode>$.QueryString\u003C\u002Fcode>と変数的に参照できる。\u003C\u002Fp>\n\u003Cp>例えば、自己URLが\u003Ccode>http:\u002F\u002Fexample.com\u002Findex.html?a=b&c=2#top\u003C\u002Fcode>としてアクセスされていた場合、\u003Ccode>$.QueryString\u003C\u002Fcode>は\u003Ccode>{ a:\"b\", c:\"2\" }\u003C\u002Fcode>となる。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>2. CSSスタイルの\u003Ccode>em\u003C\u002Fcode>単位をピクセル単位に変換する\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Convert unit from em to pixels\n *\n * @param int em [optional]\n *\u002F\n$.em2pxl = function(em) {\n  if (em　=== undefined) { em = 1; }\n  var div = $('<div style=\"width:'+em+'em;\"><\u002Fdiv>').appendTo('body');\n  var pixel = div.width();\n  div.remove();\n  return pixel;\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>CSSスタイルでプロパティの定義値として使われる\u003Ccode>em\u003C\u002Fcode>という単位は、\u003Ccode>1em\u003C\u002Fcode>が \u003Cstrong>親要素の\u003C\u002Fstrong> 1文字の高さと同じサイズになる。最上位のルート要素を起点とする\u003Ccode>rem\u003C\u002Fcode>と異なり、「 \u003Cstrong>親要素\u003C\u002Fstrong> 」を起点にするというのが曲者で、HTMLの入れ子構造が複雑になってくると現在DOMで対象としている要素の\u003Ccode>1em\u003C\u002Fcode>が一体実際どれくらいのサイズなのかが不明瞭になることがある。そこで、この関数を使うことで、計測したい\u003Ccode>em\u003C\u002Fcode>値を\u003Ccode><body>\u003C\u002Fcode>タグを起点として再計測を行い、ピクセル値として取得できる。jQuery等で要素のサイジングを行う場合などに参照値として利用できる。\u003Cbr \u002F>\nなお、引数に何も指定しないで、\u003Ccode>$.em2pxl()\u003C\u002Fcode>とコールすると\u003Ccode>1em\u003C\u002Fcode>のピクセルサイズが返ってくる仕様だ。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>3. 指定した文字列の幅を計測する\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Survey the width of strings\n *\n * @param string str\n * @param bool stripTags [optional]\n *\u002F\n$.strWidth = function(str) {\n  if ('' === arguments[0]) { return 0; }\n  var ruler = $('<span style=\"visibility:hidden;position:absolute;white-space:nowrap;\"><\u002Fspan>').appendTo('body');\n  var width;\n  if (arguments[1] !== undefined && arguments[1]) {\n    str = $('<div\u002F>').html(str).text();\n  }\n  width = ruler.text(str).get(0).offsetWidth;\n  ruler.remove();\n  return width;\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>WEBページのフォントとしてプロポーショナル・フォント（可変幅フォント）を利用していると、文字数×フォントサイズの式で計算された文字列幅は、実際の文字列幅と異なってしまう。そこで特定の文字列についてその全体の正確な横幅が欲しい時などにこの関数を使うことで、文字列全体の横幅を返してくれる。jQueryなどで要素のサイズをきっちり指定したい時などに利用できる関数だ。\u003C\u002Fp>\n\u003Cp>等幅フォントと可変幅フォントでの文字列サイズの差の例：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002F 等幅フォント\n$('body').css({ fontFamily: 'monospace' });\nconsole.info([ $.strWidth('abc'), $.strWidth('ａｂｃ'), $.strWidth('ABC'), $.strWidth('ＡＢＣ') ]);\n\u002F\u002F=> [ 20, 39, 20, 39 ]\n\n\u002F\u002F 可変幅フォント\n$('body').css({ fontFamily: 'sans-serif' });\nconsole.info([ $.strWidth('abc'), $.strWidth('ａｂｃ'), $.strWidth('ABC'), $.strWidth('ＡＢＣ') ]);\n\u002F\u002F=> [ 24, 28, 31, 36 ]\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>4. 画像サイズを計測する\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Survey the size of image\n *\n * @param string src [optional]\n *\u002F\n$.imageSize = function(src) {\n  var imgSize = { w: 0, h: 0 };\n  var img = new Image();\n  img.src = src;\n  imgSize.w = img.width;\n  imgSize.h = img.height;\n  return imgSize;\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>画像ソースのオリジナルサイズを計測する関数だ。\u003Ccode><img>\u003C\u002Fcode>タグの\u003Ccode>src\u003C\u002Fcode>属性に指定する値を引数として与えてあげれば、外部URLの画像だろうが、base64エンコードされた画像バイナリの文字列だろうが、読み込んでサイズを計測して\u003Ccode>{w:(横幅ピクセル値),h:(縦幅ピクセル値)}\u003C\u002Fcode>のオブジェクトを返してくれる。呼び出し元での使い方は次のようになる。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var imgSize = $.imageSize( $('img').attr('src') );\n$('img').attr( 'width', imgSize.w\u002F2 ).attr( 'height', imgSize.h\u002F2 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>なお、指定した\u003Ccode>src\u003C\u002Fcode>の値が無効だったり、画像URLがNot Foundだった場合はサイズとして縦横それぞれ0ピクセルのオブジェクトが返るので、画像のエラー判定にも使える。\u003C\u002Fp>\n\u003Cp>内部処理でjQueryに依存していないので、そのまま素のJavaScript関数として利用できる。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>5. 数値エンティティと実体文字列の相互変換\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Perform mutual conversion between the actual strings and the html entity\n * \n * @param string str [required]\n * @param string proc [optional] \"decode\" (is default) or \"encode\"\n *\u002F\n$.htmlEntities = function(str, proc) {\n  if ( 'encode' === proc ) {\n    var buffer = [];\n    for ( var i=str.length-1; i>=0; i-- ) {\n      buffer.unshift( ['&#', str[i].charCodeAt(), ';'].join('') );\n    }\n    return buffer.join('');\n  } else {\n    return str.replace( \u002F&#(\\d+);\u002Fg, function( match, dec ) {\n      return String.fromCharCode( dec );\n    });\n  }\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>指定した文字列を数値エンティティにエンコード（\u003Ccode>$.htmlEntities( '文字列', 'encode' )\u003C\u002Fcode>）したり、数値エンティティの文字列をデコード（\u003Ccode>$.htmlEntities( ’数値エンティティ文字列’ )\u003C\u002Fcode>）する関数。この関数はPHPの\u003Ccode>mb_encode_numericentity\u003C\u002Fcode>や\u003Ccode>mb_decode_numericentity\u003C\u002Fcode>の関数と互換性があるので、JavaScriptでエンコードした文字列をPHP側でデコードしたり、その逆も可能だ。この関数やHTMLエンティティについての詳しい事については\u003Ca href=\"http:\u002F\u002Fqiita.com\u002Fka215\u002Fitems\u002Face36f55c3ad1297de81\">以前Qiitaにまとめ記事を書いた\u003C\u002Fa>のでそちらも参照してほしい。\u003C\u002Fp>\n\u003Cp>変換例は下記の通り：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>console.info( $.htmlEntities( '<em>強調文字<\u002Fem>', 'encode' ) );\n\u002F\u002F=> <em>強調文字<\u002Fem>\n\nconsole.info( $.htmlEntities('<em>強調文字<\u002Fem>') );\n\u002F\u002F=> <em>強調文字<\u002Fem>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>なお、この関数もjQueryに依存していないので、素のJavaScriptでそのまま使える。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>6. マルチバイト文字に対応した文字列処理\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Functions supported multibyte string\n *\u002F\n$.isSurrogatePear = function( upper, lower ) {\n  return 0xD800 <= upper && upper <= 0xDBFF && 0xDC00 <= lower && lower <= 0xDFFF;\n};\n$.mb_strlen = function( str ) {\n  var ret = 0;\n  for (var i = 0; i < str.length; i++,ret++) {\n    var upper = str.charCodeAt(i);\n    var lower = str.length > (i + 1) ? str.charCodeAt(i + 1) : 0;\n    if ( $.isSurrogatePear( upper, lower ) ) { i++; }\n  }\n  return ret;\n};\n$.mb_substr = function( str, begin, end ) {\n  var ret = '';\n  for (var i = 0, len = 0; i < str.length; i++, len++) {\n    var upper = str.charCodeAt(i);\n    var lower = str.length > (i + 1) ? str.charCodeAt(i + 1) : 0;\n    var s = '';\n    if( $.isSurrogatePear( upper, lower ) ) {\n      i++;\n      s = String.fromCharCode( upper, lower );\n    } else {\n      s = String.fromCharCode( upper );\n    }\n    if ( begin <= len && len < end ) { ret += s; }\n  }\n  return ret;\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Unicodeの4バイト文字まで対応している\u003Ccode>strlen\u003C\u002Fcode>（文字列長取得）関数と\u003Ccode>substr\u003C\u002Fcode>（文字切り出し）関数。日本語などのマルチバイト文字を処理する時用の関数となる。使い方はそれぞれ下記を参照してほしい。\u003C\u002Fp>\n\u003Ch3>マルチバイト文字対応型の文字列長取得（PHPの\u003Ccode>mb_strlen()\u003C\u002Fcode>メソッドと同等の関数）\u003C\u002Fh3>\n\u003Cp>実際には下記の例がこの関数の処理を端的に表している。\u003Cbr \u002F>\nUnicodeでは1文字で3～4バイトとなるマルチバイト文字があるため、その文字が含まれる文字列に対して切り捨てや抽出を行う場合、正確に文字数をカウントする関数が必要になるのだ。この\u003Ccode>$.mb_strlen()\u003C\u002Fcode>はそのためのものだ。\u003C\u002Fp>\n\u003Cp>\u003Cbr \u002F>\n\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\u002F\u002Fka2.org\u002Fapps\u002Fwp-content\u002Fuploads\u002Ffiles\u002Fexample-mb_strlen.png\" alt=\"mb_strlen()の例\" \u002F>\u003C\u002Fp>\n\u003Cp>※ Markdownで変換されると4バイト文字が正常に表示されなかったため、例は画像化してあります。\u003C\u002Fp>\n\u003Ch3>マルチバイト文字対応型の文字列切り出し（PHPの\u003Ccode>mb_substr()\u003C\u002Fcode>メソッドと同等の関数）\u003C\u002Fh3>\n\u003Cp>これも実際の下記の切り出し処理の例を見るのが一番理解しやすい。\u003Cbr \u002F>\n文字列を切り出す範囲にUnicodeの3～4バイト文字が含まれていると、従来のsubstrで文字列を切り出すと分割点にあるマルチバイト文字がバイナリ的に分断されてしまい、文字化けが発生してしまうことがある。これを防ぐためには正確な文字数を算出して切り出しを行う必要がある。この\u003Ccode>$.mb_substr()\u003C\u002Fcode>はそのための関数である。\u003C\u002Fp>\n\u003Cp>\u003Cbr \u002F>\n\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\u002F\u002Fka2.org\u002Fapps\u002Fwp-content\u002Fuploads\u002Ffiles\u002Fexample-mb_substr.png\" alt=\"mb_substr()の例\" \u002F>\u003C\u002Fp>\n\u003Cp>※ Markdownで変換されると4バイト文字が正常に表示されなかったため、例は画像化してあります。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Cp>なお、これらの関数はともにjQueryに依存していないので、JavaScriptが有効ならどこでも利用可能である。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>7. 文字列からタグを除去する\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>\u002F**\n * Strip tags from specified strings\n *\u002F\n$.strip_tags = function( str, allowed ) {\n  allowed = ( ( ( allowed || '' ) + '' ).toLowerCase().match(\u002F<[a-z][a-z0-9]*>\u002Fg) || []).join('');\n  var tags = \u002F<\\\u002F?([a-z][a-z0-9]*)\\b[^>]*>\u002Fgi, commentsAndPhpTags = \u002F<!--[\\s\\S]*?-->|<\\?(?:php)?[\\s\\S]*?\\?>\u002Fgi;\n  return str.replace( commentsAndPhpTags, '' ).replace( tags, function ($0, $1) {\n    return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';\n  });\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>指定の文字列からHTMLタグを除去する。第二引数に除去しないタグを指定することもできる。\u003Cbr \u002F>\n実際の使用例は下記の通りだ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>var mixedStr = '<address><strong>Full Name<\u002Fstrong><br><a href=\"mailto:#\">first.last@example.com<\u002Fa><\u002Faddress>';\nconsole.info( $.strip_tags(mixedStr) );\n\u002F\u002F=> Full Namefirst.last@example.com\n\nconsole.info( $.strip_tags(mixedStr, '<a><br>') );\n\u002F\u002F=> Full Name<br><a href=\"mailto:#\">first.last@example.com<\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>これもjQueryに依存していないので、JavaScriptが有効ならどこでも利用可能だ。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Cp>──以上、実質の関数的には8つあったのだが、まぁ、\u003Cstrong>7つ道具\u003C\u002Fstrong>という語呂にも掛けて、マルチバイト文字列制御関数は1つにまとめてしまった次第。結構有用な関数が多いと思うので、必要に応じて是非利用してみてほしい。\u003C\u002Fp>\n",[277,280],{"slug":278,"name":279},"code-snippets","Code Snippets",{"slug":281,"name":282},"javascript","JavaScript",[284,288,296,299],{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":285},[286,287],{"slug":45,"name":46},{"slug":25,"name":26},{"slug":289,"title":290,"date":291,"excerpt":292,"image":270,"categories":293},"javascript-function-that-can-determine-whether-specific-value-is-empty","JavaScriptでPHPのempty()のように空判定ができる関数","2017-10-13T20:18:47","JavaScriptにはオブジェクトや配列などの引数に与えた変数（値）が「空」かどうかを判定する関数がない。つまり、PHPで云うところの empty() や、Railsで云うところの blank? といったビルトインメ…",[294,295],{"slug":45,"name":46},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":297},[298],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":300},[301],{"slug":25,"name":26},{"slug":303,"title":304,"date":305,"excerpt":306,"image":307,"categories":308},"impression-of-watching-the-deadpool","「デッドプール」はかなり革新的なアメコミ映画だった","2016-06-01T17:58:34","ちょうどMARVELの新作「デッドプール」の公開初日とファーストデイ割引日が重なったので、観て来た。 感想としては、かなり楽しい映画だった。 アメコミ・ヒーロー映画では異色のR15指定だったのと、原作のデッドプールのキャ…","\u002Fassets\u002Fuploads\u002F2016\u002F06\u002Fdeadpool_-e1551159358532.jpg",[309],{"slug":255,"name":256},{"slug":311,"title":312,"date":313,"excerpt":314,"image":42,"categories":315},"youkai-watch-3","妖怪ウォッチ3","2016-07-06T11:24:54","妖怪ウォッチ3スシ／テンプラを買おうと思っているのだが、",[316],{"slug":259,"name":260},1793391397807]