なんか最近いろんな言語でJSON扱う敷居が低くなってきたので、ファイルでデータを受け渡す時も割とJSONを使ったりする。こないだ他の人が作ったアプリが吐き出したJSON読む案件があって、こちとらElectron(Javascript)でデスクトップアプリ作ってるので、ファイル読み込んでからJSON.parse()すれば楽勝じゃね？てな感じでサクッとfs.readFile()やってみたわけですよ。
Uncaught SyntaxError: Unexpected token in JSON at position 0
そしたら「ファイルの先頭に変なんあるよ！！」っぽい事を言われてパースしてくんない。まさかJSONのデータフォーマット腐っとるんちゃうか？と思ってチェッカーに入れたけども、問題なし。不審に思いながら、バイナリエディタでファイル開いてみたところ、データの先頭に「EF BB BF」が入ってた。うわぁ、BOMつきUTF-8だこれ！
最近はElectronでデスクトップアプリ作ってるのだが、どうしても他の言語で作られたアプリを呼び出さにゃいかん感じになった。大抵の言語で外部プロセスを呼び出す仕組みはあるものだけれど、Node.jsの場合は「child_process」とかいうモジュールを読み込んでくればそれっぽい事が実現できるらしい。
まあ外部アプリを呼び出すだけなら良いのだけど、その外部アプリが結構重い処理をやってるので、バックグラウンドで動いてるかどうかをElectron側で表示したい。ということは、外部アプリが標準出力に出している内容を何らかの手段でフックして、そいつをリアルタイム表示すればよさそう。というわけで、絶賛お勉強中のVue.jsと組み合わせて試してみた。
続きを読む Electron(+Vue.js)で外部アプリの進捗を表示する
さいきんVue.js大好きおじさんになりつつあるのだけれども、メニューっぽいものを実装するところで詰まった。jQueryだとメニュー関係のプラグインが豊富にあるのでテキトーやっててもよかったのだが、Vue.jsだとよくわかんない感じ。
小一時間WEBの海を泳いでかっこいいメニューのサンプルを見つけても、「どれどれ」とソースコード眺めてみたらハイレベルすぎて俺みたいなクソザコナメクジには到底理解できないことが分かった。うーん、こりゃ困ったぜ。
といったところで、とりあえず車輪探しは諦めて、自分でサクッと作ってみる事にした。そして手を動かした結果、「すまん・・・俺の実力ではこれが限界だ・・・！」と胸を張って謝れる程度のしょぼいメニューが出来上がったので、ここに残しておこうと思う。
続きを読む Vue.jsでしょぼいメニューを作った
Vue.jsを使って、練習がてら要素をドラッグして動かすやつを作った。べつに要素はdivで作った箱でもなんでもよかったのだけれど、ちょうど最近SVGを使って遊んでるので、なんとなくLine要素で作った×でも動かしてみることに。
続きを読む Vue.jsで要素をドラッグして動かす
▲パワポで描いたJSFiddleのロゴ（パチもん）
最近Vue.jsを始めたのだけれど、動的に要素を追加するにはどうすればいいんだろうかという所で小一時間悩んだ。jQueryだと何も考えずにappend()なり使ってペペペペッてやってたんだけどね。ちょっと調べてみると、Vue.jsではappendTo()とかいうのがあるかと思ったらバージョン2からは削除されててネイティブAPI使えだとかいう話になってるみたい。
しかしせっかくVue.js使ってるんだし、もうちょいなんかこう・・・スマートに実装できないもんかね？ググり回ってもトレンドなお作法がよく分からんので「JSFiddle」ってやつで試行錯誤しながらやってみた。
JSFiddleってのは、WEB上でサクッと組んだコード(HTML/CSS/JS)がサクッと動かせるサービスで、ブログへのコード貼り付けも簡単にできる。しかも、jQueryだとかVue.jsだとかの有名所のライブラリなんかは、「script src=・・・」とかわざわざ書かなくても、予め「このライブラリのこのバージョン使うかんね！！」って設定しとけば、勝手にロードしてくれる。うほっ、超べんりー。
続きを読む Vue.jsでDOM要素を増やす(&JSFiddleおためし)
このご時世、兎にも角にも猫も杓子もJSONだよな。Javascriptだったら何も考えずに使えるんだけれども、C#でJSONなデータを受け渡す時にちょっと詰まったので、その時に試したことをメモしとこう。
今回俺がやりたかったのは、JSONデータのデシリアライズだ。もう俺みたいなおっさんになってくると横文字がよく分からんくなってくるのだが、「デシリアライズ」ってのはJSONオブジェクトを手元で使いやすいように復元する作業のことを指すようだ。
C#でJSONを扱うには、標準ライブラリでもできなくはないのだが、「Json.NET」とかいうのが評判良さそうなのでそいつを使ってみることにした。Json.NETはNuGet(パッケージマネージャ的なやつ)でサクッと導入できるが、もし宗教上の理由とかでNuGet使えなくてもゴリ押しでDLLを直接インポートで問題ないだろう。
続きを読む C#でJSONのデシリアライズ
はじめてConnpass経由で勉強会的なやつに参加してきたので、走り書きでレポしとこう。このあいだ申し込んだ「R&Dにおけるサービス開発者の仕事」というタイトルのやつだ。知らなかったのだが、研究開発を英語で書くと「Research and development」でR&Dなんやね。俺も社内で研究開発まがいのことをやる機会はあるので、他社さんが研究開発した結果をどうやってサービスに活かしてるのかというのにものすごく興味があった。
ガーデンプレイスタワーはたまーに38Fでお好み焼き食べてるので、12Fにあるクックパッド社にはなんなくたどり着くことができた。受付の一般枠でConnpassに登録してるIDを伝えてから入場。勉強会の会場にはすげー広いキッチンが併設されてて、そこに置かれた酒と料理をつまみながら講演者の話を聞くようなスタイルだった。って、タダで参加させて貰ってるのに、その上こんな待遇受けてよかとですか？近くのファミマでおにぎりとホットドッグ食べてきちゃったぜトホホ。そんな感じで後悔してるうちに、乾杯からの勉強会が始まった。
続きを読む 勉強会に参加してきた話 #cookpad_tech_kitchen
前回の時点でひとまずメモアプリっぽい何かは作れたんだけれども、jQueryでゴリゴリ書いてた部分をナウいライブラリ「Vue.js」に置き換えて遊んでみようと思う。
もともと俺がjQuery使い始めた理由ってのも、6～7年前ぐらいにモダンブラウザとレガシーブラウザが入り乱れた状況を打開するためだった気がする。まあ、IE6～8あたりのバグ対応でCSSハックせざるを得なかったけどな。今まで惰性で使い続けてきたのだけれども、今ではモダンブラウザで動けばOKな風潮だからなー。
そいで今どきのトレンドを軽く調べてみると、Googleさんが作ったAngularとか、Facebookさんが作ったReactとか色々あるのだけれど、jQueryを置き換えるのであればVue.jsが手っ取り早いという噂だ。まあ、WEB上の自信ニキ達がそう言っているだけであって俺は知らんのだが、全部触ると学習コストがパない感じになりそうなので、とりまVue.js触ってみまちゅか。
さっそくKindle Unlimited漁っていい感じの参考書をGETしたので、こいつを頼りに手を動かしてみる事にした。斜め読みした上での実装なので不安ではあるが、まず手を動かして糞みたいなコードでも作り上げる所がスタートラインだと思うんや。とりま動けば大正義（暴論）
続きを読む Node.jsでメモアプリを作って遊ぶ（そのさん）
前回に引き続き、Node.jsの練習で作ったメモアプリについてのざっくり解説。今回はメモのデータをPOSTするところの話を中心にやってこうかねー。
最近Node.jsにハマっててお仕事で使い始めたのだけれど、普段デスクトップのツール開発目的で使ってるもんで、サーバアプリなんざ作ったことねえんだよな。いかんいかん、このままでは時代の波から取り残されちまうぞ。しかしまぁ一体全体、どこから始めればいいのやらさっぱりだぜ。こういうときはまず参考書漁りからスタートだな。
おいらはAmazon様の奴隷なので、もちろんKindle Fire(やっすいタブレット)も持っているしKindle Unlimited(月額1000円ぐらいでいろいろ読み放題サービス)にも加入しておるのだが、こういうときは割と個人出版っぽい参考書がサクッと読めるし分かりやすいので最近お気に入り。とりあえず今回は、上記の本に書いてある内容をベースに練習でメモアプリを作ってみた。
結果、半日ぐらいかけてEvernoteを極限まで糞にしたようなしょぼいメモアプリが出来上がった。プレーンテキストの書き込み、読み込み、削除ができるだけだ。エラーハンドルとか全力で放棄しまくってるのでちょっとした事でバグると思うが細かいことは気にするな！ソースコードはGitHubに上げといた。何気に、GitHubにちゃんとした(？)プロジェクトうｐするの初めてな気がする。
ちなみに参考書は1時間もあれば読破できるぐらいのボリュームなので、通勤電車とかでサクッと読めちゃうゾ。さっきの参考書に書いてあるまんまなのだが、バックエンドはNode.js、テンプレートエンジンは「EJS」、フレームワークは「Express」ってな感じで色々と組み合わせて作ってみた。いろいろ試行錯誤もあったので、あれこれ残しておこう。
続きを読む Node.jsでメモアプリを作って遊ぶ(そのいち)