2018/08/08 に dev.to が OSS 化された． dev.to is now open source とりあえずローカルで動かすまでにやったことのメモ． Getting Started Getting Started が充実している．ほぼその通りに進めれば問題ない．Ruby は最新版が必要，DB は PostgreSQL．長年 Rails 触っているが地味に PostgreSQL 使ったことがなかった． $ ruby -v => Ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17] $ brew install postgresql $ postgres -V => postgres (PostgreSQL) 10.5 $ pg_ctl -D /usr/local/var/postgres start # Stop $ pg_ctl -D /usr/local/var/postgres stop $ gem install bundler $ gem install foreman foreman は複数プロセスをまとめて管理できるツール． ローカル実行時は Rails サーバ (puma) Webpacker (webpackのラッパー，webpack の実行と hot-reload が走る) Job (DelayedJob) が実行される．...

2018年8月27日に開催された v-meetup #8 に登壇しました． 約150の募集枠は，募集開始数分で埋まるほどの人気イベント．v-meetup の参加は初めてだったのですが，スタッフを始め参加者の方々の熱気に圧倒されました． Replace View of Backbone.js with Vue.js 2年半くらい運用していた Backbone.js SPA の一部を Vue.js でリニューアルしたときの話をしました．コアフレームワークが Backbone.Model に依存していて，Backbone.js から逃れられないプロジェクト，View 周りがツラいので組み合わせてみたら幸せになったという話です．どうしてもフルリプレイスが難しいプロジェクトとかで，小さく薄くはじめられるのが Vue.js のいいところ．2018年現在に使うのは色々ツラいところあるけど，Backbone.js 自体は嫌いではない(使いたいとは言っていない) そもそもbackboneがつらい…#vuejs_meetup8 — ほんだし (@hondash918) August 28, 2018 backbone.js、繋ぎ先がhtmlである必要がないのでcocos2d-jsと組み合わせて使ったりしてた。今も結構好き。 #vuejs_meetup8 — hadakadenkyu (@hadakadenkyu) August 28, 2018 Vue コンポーネントの中で jQuery ライブラリ使うのあるある。 #vuejs_meetup8 — katashin (@ktsn) August 28, 2018 mountedでjqueryやるの親近感。#vuejs_meetup8 — Keima Kai (@keimakai1993) August 28, 2018 backboneとvueで共存キメラはすごい... #vuejs_meetup8 — イカID: Toshiwo (@toshiwo) August 28, 2018 サンプルプロジェクト サンプルプロジェクトを地味にちゃんとつくった．Realm つかってみたくて，サーバのデータストアに Realm Node....

8月に発売された東芝の VC-CL1500 というモデルの，1世代前の商品 VC-CL1400 を購入した． 型落ちなので値段もお手頃だった． コードレスクリーナー VC-CL1500／VC-CL500 スペック ハイスピードDCモーターHD25 毎分最大 約 110,000回転 (Dysonにも劣らないらしい) サイクロン部のフィルタがない サイクロン手前のフィルタ掃除は時々でOK ゴミ捨てがカンタン(自走式) 片手で楽に操作可能 20分連続可動 前方巻き込み式 +α アタッチメント 前方巻き込み式 一番良かったのは「前方巻き込み式」な点．巻き込み式でない場合，部屋の隅に溜まったゴミがとれるかどうかが違う． 掃除機は当たっているはずなのにゴミが残っているという経験したことないだろうか．これは掃除機の真下部分のゴミしか吸引してくれないタイプでよく起こる問題で，見た目はゴミに当たっているようでも吸引場所まで届いていないのが，原因らしい． その点，実際に試したところ抜群に吸引してくれて，それだけで買いそうになった． 自走式 “自走式” なのも地味に違いを感じた． 片手で軽く持っているだけで勝手に前に進んでくれる．自動式でないモデルと並行で試すと違いが歴然．特にカーペットの上とか物理的に摩擦が起きやすいところでもスッと進むのはかなり楽． 以前，エレクトロラックス製のコードレスクリーナーを使っていたことがある． デザインかっこいいしハンディにもなるしよさそう，と思って買ったが，物足りず売ってしまった過去がある．“ハンディになる” というのはハンディレベルの吸引力のマシンをスタンディングで使えるようにしているということらしい．上記の良い点も全くカバーされていなかった．．． クイックルワイパー + コロコロで事足りる派 だったのだが，引っ越して事情が変わった． ソファーの隅 カーペット 部屋の隅 その他，手が届かないところ 引っ越して半年，これらのゴミが気になりだした．クイックルワイパーは優れものだが，ヘッドの形的に手が届かないところも多い．ヘッドからシートを外して手で掃除していたが，部屋も広く大変だった．週1まとめて掃除する頻度でも大変だったので，掃除機は必然になってきていた． てか，コロコロの正式名称は「粘着カーペットクリーナー」というらしい笑．株式会社ニトムズという生活消費財関連を扱う会社が，商標出願もしていて出願から33年も経っている．ニトムズ＝NITTO HOME PRODUCTS Dyson は買わなかった 掃除機の性能は，モーターの回転数で決まるらしい．“吸引力が変わらない” というのがウリの Dyson のやつも検討していたが，東芝のこのモデルも回転数的には負けず劣らずだった．実際にそれぞれ体験してみたところ，本体の軽さや性能・付属品含め東芝の方で全く問題なかった． Dyson 製品は 本体が重い イギリス人の体型をペルソナにしていて，やや大きい というのがネックだった． なお，コードレスでないモデルの方が，Dyson のコードレスクリーナーより，吸引力は圧倒的に強いらしい．一軒家とか部屋がとても広いケースだとバッテリーの持続時間も考慮してコードありの方がよいと思う．...

諸々の事情で，Base64 化されたファイル文字列をブラウザで復元して扱いたいケースがあり，そのとき検証した作業ログ．画像と PDF データを扱う． 画像ファイルの場合 Base64 エンコードされた画像データは，<img> タグの src に指定することができる． Data URLs の形式で，次のように記述する． <!-- data:[<mediatype>][;base64],<data> --> <img src="data:image/png;base64,R0lGODlhAQABAIAA•••"/> PDF ファイルの場合 PDF データは，Blob に変換した後，ファイル URL を取得しアクセスすると表示できる． const base64Str = 'JVBERi0xLjMNCiXi48/TDQoNCjE•••'; const file = new Blob([atob(base64Str)], { type: 'application/pdf' }); const fileURL = URL.createObjectURL(file); window.open(fileURL); と，思ったが正常に表示できるケースと，表示されないケースがあり，原因がわからず．． 具体的には，枠は表示されるが内容が真っ白になってしまうという状況． pdf.js を使う Mozilla 製の pdf.js を使うと正常に表示できた． pdf.js には viewer もついているが，.pdf ファイルの実態が必要になるので使わず，今回はファイル内容を直接扱っている． ビルド済みのパッケージ pdfjs-dist を使う． .getDocument で Bae64 化されたファイルを読み込み，pdfDoc.getPage(1).render() でファイル内容をレンダリングする．この例は，1ページだけレンダリングするが，pdfDoc.numPages で得られるページ数分描画すれば複数ファイル内容を一度に表示可能． import PDFJS from 'pdfjs-dist'; const base64Str = 'JVBERi0xLjMNCiXi48/TDQoNCjE•••'; const canvasContainer = document....

jQuery 製の AutoComplete を提供する At.js を，Vue のコンポーネントと組み合わせて使ったときのメモ． 完成イメージ 完成版ソースコードはこちら． At.js を使うと次のような挙動が実現できる．WYSIWYG 内で @ を入力すると，入力候補が一覧が表示され，選択すると任意の要素が追加できる． vue-at は使わなかった At.js の Vue 版 vue-at もあるが，At.js の全機能に対応していなかった．(検証当時) 具体的には insertTpl で挿入する HTML を定義する機能が正式リリースされておらず，結局は jQuery 版をそのまま使うことにした． ベースとなる WYSIWYG コンポーネント contenteditable で WYSIWYG を自作する． <template> <div> <div class="WYSIWYG" contenteditable="true" @focus="handleFocus" v-html="content"></div> </div> </template> <script> export default { props: { value: { type: String, default: '' }, disabled: { type: Boolean, default: false } }, data() { return { content: this....