はじめに最近、Webアプリケーションを作成する仕事が、少しずつですがあります。その際に使用するのは、殆どの場合「テーブル」です。素のtableタグを駆使して作成した場合、テーブル内のセルにもう一つテーブルを入れたりとか、自由に設定できるのはいいのですが、表現力が足りなくて、とってもそっけないページになってしまいます。Application)と呼ばれる、表現力のある、インタラクティブに動作するWebページを作成するための方法として、Vue.js(Nuxt.js)や、React.jsがあります。今回は、Vue.js(Nuxt.js)を使用して、tableを使用したサンプルを作成してみようと思います。サンプルなので動くのを重視しました。断片的なサンプルはたくさんありますが、断片だと、動作するための必要な所が理解できず、全くの最初から、どう動作させればいいか、分からないことが多いからです。ここでは以下を使用して、Webアプリケーションのテーブルサンプルを作成したいと思います。Vue.jsとはVue.jsとは、以下のようなJavaScript用ライブラリです。リアクティブデータバインディングHTMLの各タグとデータを自動的に結び付けるコンポーネントベース簡単なAPIお手軽ライブラリのようなので、入門的に導入してみました。ここでは、Vue.jsを素で扱うのではなく、[Nuxt.js]を使用しようと思います。Nuxt.jsとはVue.jsは比較的簡単に使用できますが、それでも、なんらかの準備は必要です。Nuxt.jsとは、その準備を一通りやってくれるフレームワークと思えばいいでしょう。主な特徴は以下の通りです。トランスパイレーションモジュール構造で拡張できるVue.jsで実装する、vueファイルを追加するだけでいいので、Vue.jsだけを使用するより手軽に実装できます。2.0を前提とした、コンポーネントライブラリです。コンポーネントの種類が多く、しかも制御をVue.jsで記述できるので、便利そうなので使用することにしました。本稿では、element-uiのコンポーネントとして、el-tableを使用しています。Python3.6以降で動作する、Webアプリケーションフレームワークです。このフレームワークもその流れで作成されているようです。今後の勉強として、使えるかと思い、Responder上で作成してみました。動作させた環境は以下の通りです。サンプル実装ここに動作するサンプルを置いておきました。動作するサンプルは以下のように作成しました。create-nuxt-app)以下のようにして、アプリのサンプルを作成します。create-nuxt-app起動すると以下のように尋ねられます。今回は以下のように入力しました。以下で、Responderを準備します。responderrun.pyの追加Responderで実装した、run.pyは以下の通りです。api.run(address='0.0.0.0')苦労したところは、ResponderからJavaScriptを返却するように設定するところです。具体的には、以下のように設定することで、dist/のファイルをResponder経由でアクセスできます。static=True)pages/table.vuepages/table.vueファイルを以下にします。slot-scope="scope">の中にel-input的なコントロールを入れると動作します。データは、”scope.row.email”のように、scope.row内にAPIから返却したデータが入って来るようなので、それらが使用できます。</el-table-column>pages/index.vueに以下を追加table.vueへのリンクをindex.vueに追加しました。clone後、動作させる手順は以下になります。./run.py上記をしてから、ブラウザで/tableを見ると以下になります。動作しなかった点は以下になります。API接続できないなぜかAPI(Python側)にアクセスできない現象が発生しました。理由は、Axiosのようです。Nuxt.jsの場合、axiosを使用する方法は、以下があります。...モジュールとしてインポートすると、素直に、同一ドメインにアクセスしてくれました。Nuxt.jsのプラグインとしてaxiosを使用した場合、URLが固定されるようです。nuxtのプラグインに設定をする必要があると思います。おわりに思ったよりは、あっさりと実装出来ました。ほとんど自分の参考用につくりましたが、誰かの参考になると幸いです。python3での顔画像モザイクの方法を調べてみました。仕事とは関係なく、単なる趣味だったりしますが。この内容で、Djangoと統合する予定です。9に移行するこのVMのOSをCentOS7にした関係上、そろそろupdateする必要があります。そもそもCentOS7を選択した理由は、仕事で使用するからでした。...Python3/ある日付から日付までの月/日/時間ごとの時刻を算出する小ネタです。指定したときの、各時間間隔での時刻取得したかったです。ワクチン接種地図作った作ってみた。東白楽駅を真ん中にしてみました。なんとなく真ん中な感じなので。以下のテキストデータからゴニョゴニョしてます。