In a corner of this planet

それでは 今回は、Web Front Endに関するものを。 Vue.js を少しばかり。 on Fedora 29 今までと変わりなく、 Fedora で参ります。替えようがないのですけどね（笑） Fedora Kernel 4.20.13-200 Node.js v10.15.0 npm 6.4.1 NormalでInstallしたものです。これをベースに行っていきます。 By Vue-CLI 2.x まず、2.x系列から行ってまいりましょう。 $ npm i vue-cli まず、サクッと、CLI（Command Line Interface)をいれます。また、上記は、 4 npm install vue-cli と、キチンと記載をしてもよいです。次に、Projectを作成します。 $ ./node_modules/.bin/vue init webpack hello Vue-CLIをGlobalでInstallしたとしても、Pathを設定しないと、動作させられませんが、分かりやすくしております。また、 $ ./node_modules/vue-cli/bin/vue init webpack hello も同じことになります。質疑に答え終わると、一通りのDataが作成されます。 現状、そのまま動作させるところまでを主眼としているので、次に、動作させてみます。 $ cd hello $ npm run dev と実行すれば、ブラウザでアクセスしてね！という表示がなされるので、ブラウザで表示させてみてください。 また、「 npm run dev 」は、 package.json 内の scripts 項に記載させていて、 $ npm start と実行しても、同じ結果を得ることができます。 scripts 項には、いくつか記述があって、 $ npm test と実行すると、現行のFedoraの環境においては、 SecurityError: localStorage is not available for opaque origins なるErrorが発生し、上手く動作しません。そこで、「 test/unit/jest.conf.js 」に、以下の記述を追加して、実行してみてください。 ......

ご無沙汰しております 年末の挨拶をしてから、ほぼ二ヶ月。技術的な記事だと、ほぼ四ヶ月ぐらい、間が空いてしまいました。 引き続き 一月の終わり近くまでは、食わず嫌いだったWeb FrontEnd界隈をごにょごにょやってて、まあ、大変っていうか、新陳代謝が恐ろしく速いのね、ってことだけは理解をしました（笑）でも、ここ一ヶ月程、放置なので、ちょいと飛び込んでみないといけないな、と感じている今日この頃です。 で、その一月の終わりから直近までは、年末に、UIが云々という辺りが、ピキンと現時点でまとまったこともあって、ゴリゴリとJavaってたんですね。ただ、似たようなCodeを画面毎にゴリゴリやってるので、いささか疲れが見えてきているかもしれない、というのが現状。機能的には、実装始めの時のイメージしたものとしては、７割弱、という感じかな、というあたりです。やってて、あれこれ追加したいこともあるのですが、それは、ひとまず脇において進めてる感じ、かと。 そうね 一番激変したのは、フライパンを新調して、今のところ焦げをあまり意識しないで済んでて、非常に効率が上がったというのが一番大きなトピックスかもしれない（笑） 後、常用していたサイズから１サイズアップしたので、これまた、効率が上がったというのもあります（笑） ボチボチと やっていきますので、よろしくお願い致します！！（笑）

ありがとう 今年も大きな怪我や病気もなく過ごせたことは感謝しかございません。ありがとうございました。 カタチアルモノ 先月・今月と、ナカナカ、これ！っていうのはできなかったのだけど、前回、Desktopが云々なんていうことを書いておりましたが、あの流れで、今は、何故か、ElectronやVue.jsをいじってる状況になっておりまして（笑） ツケヲハラウ まだ、Demoをごにょごにょやってるだけなんだけど、Vue.jsは、面白いかな、って。加えて、Electronもいいかな、っていう感じになってるんですよね。いろんなFrameworkがあるんだけど、今の立ってる位置は、ここかな、という感じです。 なんとなくだけど 来年は、Javascript絡みをいじってそうな気がします。そうします（笑） それでは よい年越しをお過ごしください。それでは！

気づけば 気づくと十二月で。前回の投稿からだと、自動車メーカーが大変なことになってたり。AWSが、どう考えても、Geek向けでしょ的な発表というかサービスを怒涛の如くしてたり、と、いろいろあるものです。 ドロってる ここ数週間は、ずぅっと脳内で変換しつづけてたUI（一部分だけど）のイメージが固まってきたので、数パターンを作りつつ、ああでもない！こうでもない、と、ごちゃごちゃやってます。Androidで、Javaってます。 Kotlinっていう話もあるんだけど、ナカナカね、そこまで辿りついてないな、というところでしょうか。 パイってる ここにある 記事 で、「へぇー、今は、そうなんだ」というのを眺めながら、自製Flaskアプリもチョロっと修正をしてたりします。自製のPythonの2割ぐらいは、なにかと手を入れてる感じはするんですけどね。 JavaベースのMicro Webないかな、という流れもあって。というのは、上のAndroidもSQLite3を使ってると、同一DBを使いたいっていうのもある上に、できうることなら、DB周りのCodeも共通化したいな、と思ってたりしてて。 ただ、学習Costっていうのを考えたら、いろいろ考えちゃうのですね。 考えようによっては Androidで、SQLite3とHTML5で構築すれば、Desktopでも併用できるぜ！なんていうのも考えますけれども。 味噌 これまた、汎用的な調味料なわけで、久しぶりに、購入をしまして。マヨ＋ワサビの変種として、マヨ＋味噌、なんていうのを。そういえば、塩麹も買いましたかね（笑）ブラック・ペッパーも詰替え用買いました（笑）

ゆるいノルマ 大体、３日間隔で、いろいろ投稿していきたいな、とは考えていたのだけど、ナカナカ難しいのですな、ということを、今更ながらに、実感していたりします。脳内は元気なんだけど、作業まで移っても、既存の至極プライベートなScript修正とかになってて、どやねん！的には、ならないな、という日々でございます。ボチボチやります。 なんちゃってFormat 自家製のAndroidアプリは、DBを使用してて、複数Tableが多少複雑に絡み合っていたりします。更新前提なので、DB登録前のDataは、Tag付きのcsv的なんちゃってFormatだったりします。 一応、削除・追加・更新前提の仕組みはいれているのだけど、ざっくりとDataを入れ替えた方が楽、っていうこともあって、見直しをすることにしたのです。 時々思うのだけど、「われながら、（結構無駄に）作り込んでるなぁ」と。 Accessか、ExcelでMacroか、否、LibreOffice Baseか、CalcでPyUNOか、という流れもあるのだろうけど、なんだかんで、楽なのは、Textだよね、というのがあって、Tag無しのcsv的なんちゃってFormatを新規で起こし、Tag有りとTag無しを相互に処理するように、Encode/Decode用のScriptを作ることにした。無駄の再開発（笑） Tag有りが何で必要なのか、という話をすると、DBの更新処理時、ということになります。特定のDataのみを更新するので、それをを特定化させるためです。 sqlite> update hoge set a = 'moge' where id=5; カラム列が、id、a、b、cとあって、idが5の場合に、aのみ変更っていうのを表現したものになります。（テーブル名はhoge） bとcはそのままなので記述は不要となるわけです。 Network越しに、Data更新をしたら、上手くいきました。一息。 ついでに まじめに、自家製のDataは、いくつか作ってて、運用しているわけですが、次は、Data検索用のScriptの修正を。 $ ./hoge -m AAA -n 40 なんていうのがあるとします。AAAは毎回変わるのだけど、40のところは、数ヶ月に一回変更するだけ、という感じ。流石に、40を毎回...

あれから半日 ある程度のところまで、というところで、寝たんだけど。寝付けないわけです（笑） 「何をどうすれば」「あれをこうすれば」「これがああなって」という感じで、脳は活動をやめてないわけです。 ルーチンなので、そのうち、眠りに落ちるのですが、ナカナカ抜けない癖のようなものです。 修正を加えていた「書庫アプリ」も、ほぼ所望には仕上がりをみました。 そうなんだよね Wiredのフロントエンド に関する記事なのですが、「そうね！そうね！」と思ってしまいました。ほんと、移り変わりが早いので、ナカナカ入るタイミングを見つけられないで、今に至ってしまってますからね。大縄跳びに、上手く入れないみたいな（笑） Sort機能 Defaultで、Sortすることになっているので、Sortさせない列に対しては、以下のような設定をします。（一部抜粋） var table = new Tabulator("#example-table", { layout:"fitColumns", columns:[ ... {title:"Gender", field:"gender", headerSort:false}, Full は、こちらに。 Filter機能 Exampleを見ると、いろいろできますが、ここでは、「Text入力」と「選択入力」の二つを紹介。 var table = new Tabulator("#example-table", { layout:"fitColumns", columns:[ {title:"Name", width:150, headerFilter:true}, ... {title:"Favourite Color", field:"col", 　　　　　　　　　 headerFilter:"select", headerFilterParams:{values:true}}, ... ...