鉄道遅延情報のJSONをテーブル(表)で表示してみた
JSONについて調べていると、鉄道comのRSSを集計して、遅延ちえんしている電車を返すJSONを提供しているサイトを発見しました。 JSONの発信元 上記、鉄 ...
気象庁のJSONファイルを利用して天気予報を表示してみる
気象庁のJSONデータを取得し、日本地図の都道府県名をクリックすると天気予報を表示します。日本地図はJmap jQuery pluginと言うプラグインを使用し ...
Jmap jQuery plugin で日本地図を表示してみた
Jmap jQuery pluginは、情報配信に適したシンプルな形状の日本地図を表示することができます。 結果 こんにゃく芋の生産量 ※) 都道府県にマウスオ ...
チャートライブラリ amCharts を使ってみた
最近、amChartsと言うチャートライブラリを知りましたので試してみました。公式ページを確認してもグラフの種類やデザインがとても豊富です。 JavaScrip ...
Highcharts の 3D charts で描画してみた
「6歳未満の子どもをもつ夫婦の育児・家事関連時間 国際比較」の資料を基に Highcharts の 3D charts で描画して記事を書いてみました。以下がそ ...
Highchartsで人口ピラミッドグラフの【Ver.積み上げ横棒グラフ】をつくってみた
人口ピラミッドグラフとは、アイキャッチ画像のようなグラフを指します。まぁ、よくあるグラフですよね。 ちなみに、アイキャッチ画像のグラフは、わたしの住む群馬県の人 ...
何となく分かった気がする SVG について
SVG について調べてみました。「SVG で単純に横一本線ってどう描くのかな？」このように思ったのがきっかけです。 SVGとは Scalable Vector ...
Vue.js + vue-tabs-component でTab を表示する
vue-tabs-component は、 タブを簡単にレンダリングするための Vue component です。 CDN <script src=""> ...
WordPress 5.4 の 2つの新しいブロック
最新バージョンのWordPress 5.4 “アダレイ”がリリースされ、利用できるようになりました。 WordPress 5.4 “Adderley” 最新バー ...
Vue.js Dynamic Components with binding
Vue.js のコンポーネントの基本動的なコンポーネントを参考にタブメニューを実装してみました。 わが家の愛犬ジュレもシニア犬です。 シニア犬は下痢になりやすい ...
Vue.js + vue-rate-it で Heart Rating
Vue-rate-it は Vue.js の拡張可能で、 高度にカスタマイズ可能な評価システムです。 星、ハート、画像、または Font Awesomeで 評価 ...
Vue.js + vue-good-table でテーブルを表示する
vue-good-table は、 VueJS 用の強力な データテーブルプラグインです。 並べ替え、列のフィルタリング、 ページネーション、グループ化などの ...
Vue.js + vue-chartjs でチャートを表示する
Vue-chartjs は、Vue.js の Chart.js ラッパーです。 ビルドのセットアップなしで、 ブラウザで直接使用できます。 ブラウザで直接使用し ...
Vue.js List Move Transitions + Element
Element は Vue.jsで使用できる、 コンポーネントライブラリです。 便利で高機能なUIコンポーネントが たくさん含まれています。 以下は、 Vue. ...
Vue.jsのv-forでTableを表示させてみた
Vue.js ガイド、リストレンダリングで、 v-for で配列に要素をマッピングする と言う項目を参考に、 Table を表示させてみました。 <div ...
Vue.js の Grid Component Example を試してみた
最近、Vue.js と言う文字が 気になったので調べてみました。 Vue.js (ヴュージェイエス)は、 jQueryと同じような JavaScriptのフレー ...
DataTables で Ajax data の取得と Child rows の追加
DataTables 本体に表示する データを取得します。 Ajax sourceからテーブルの コンテンツデータをロードします。 Ajax (エイジャックス) ...
Optimal settings for DataTables
DataTables には まだまだ数多くの Reference やExtensions があり、 試したり ご紹介したいのですが、 今日は 実際にはどんな感じ ...
DataTables + Font Awesome 5
DataTables は、 多数のアイコンを使用しませんが、 情報をエンドユーザーに伝えるために いくつかのアイコンを使用します。 今日は、 このいくつかのアイ ...
DataTables の Scroll Resize plug-inを使ってみた
ご紹介するDataTables のプラグイン、Scroll Resize plug-in は、 2015年に導入したPage Resize plug-inの後継 ...