樹脂が固まる前に

WebフロントエンドとAndroidを主にいじっている人のメモ

山手線,徒歩で一周してきた

チャンネル登録者数 1 桁の YouTuber みたいなタイトルをつけてしまいましたが,内容はタイトルの通りです.
エンジニアリング以外の記事を書くのは実は初.
ライフログとして残します.

僕は 4 月から社会人になるので,学生のうちに何かしたいなと思っていました.
そこで思いついたのが,銭湯に行くことと山手線を歩くことでした.
普通の学生は海外旅行とか行くのでしょうが,僕は計画を立てることが嫌いなので,その手のことにあまり興味がありませんでした.(溢れ出る陰キャ感)
銭湯や温泉は友達といくつか行ったので,次は山手線というわけです.

僕の趣味は散歩で,高校の頃から電車で行くところをあえて徒歩で行くみたいなことをちょいちょいしてました.
友達と最長で 3 時間くらい歩いたこともありましたが,自分自身どのくらい歩けるのかに興味があり,題材として山手線を選びました.

概要

新宿から渋谷,品川方面の方向に歩き,一周します(内回り)
ルールは以下の 3 つ

  • 同じ道を戻らない
  • できるだけ線路に並走する
  • 地図アプリを見ない

特に最後の地図アプリが重要で,アプリを見ながら行くと,手軽に進める一方で作業になってしまうので,迷うのも楽しむために,地図アプリは禁止しました.
本当に迷ったときは道端にある地図を使います.
ちなみに色々写真とったのですが,全部載せてもアレなので,一部載せます.

当日

新宿駅

3/24(日),天気予報は一日晴れ.
証明写真の背景ぐらいの快晴です.
都内なので歩いている間に何かイベントとか無いかな~ということで日曜日を選択.
新宿駅の南口を 09:30 に出発.
サザンテラスから代々木を目指します.

代々木

大体 15 分位かかりました.
山手線を電車で一周すると 1 時間くらいで,駅が約 30 駅なので,1 駅進むのに電車だと 2 分ぐらいかかります.
つまり単純計算でその 7.5 倍なので 7.5 時間くらいかかりそうですね.

09:30 から始めたから休憩なしだと 17:00.
ただ,迷ったり,ペースが落ちてきたりで,絶対もっとかかるだろうなということも容易に想像できます.

原宿

近くでマラソンやってました.

渋谷

咲いてますね.
来週ぐらいには都内は満開になりそうです.

恵比寿

ガーデンプレイスは大体なんかオシャレな催しがあります.

近くの大きな車道に沿って目黒を目指します.
昼間なのに薄暗い場所があったりすると,めちゃめちゃエモいです.
途中ですれ違ったベビーカーに乗った金髪の赤ちゃんに「コンニチハ」と言われて,「こんにちは」と返します.
照れるわ.

途中でベンチがありました.
近くで小学生ぐらいの男の子とお父さんがサッカーしてました. 和む.
こういう普段は気にしないような何気ない風景に温かみを感じます.

五反田

川沿いに広場みたいなところがあって,子供が遊んでいたり,おじいちゃんが絵を書いていたりします.
ビルと電車と川と緑,いい感じです.

少し上がったところにも小さな広場があり,近くで屋台とかもやってました.

桜はもうちょいですね.

大崎

Y 字路とかもカーブが美しくてエモいですね.
90 度じゃない交差点フェチなのかもしれない.

自然味がある公園もありました.
都会といえども緑は案外ありますね.

品川

時刻が 12:30.
そろそろお昼食べたいと思って近くの飲食店がたくさん入ったビルを彷徨うも,結構どこも並んでて断念.
進みながら見つけたどっか入ろうかな.

線路の逆側だから木の後ろに薄っすらとしか見えないけど,あれが高輪ゲートウェイ駅か.

東京タワーが見えるいい感じの交差点を発見.
写真撮ってるプロっぽい人もいました.

田町

都内にこんなに船あるって改めて見ると面白いです.
お昼は駅に近いステーキの店でランプを食べました.
お客さんおじさんしかいなくてワロタ.ワロタ...

浜松町

広げよう納税の輪.
はい.

ここらへんは近未来の都市っぽくて良いです.
車の通りもほとんどなくて,観光バスがいっぱい止まってました.
運転手さんめちゃめちゃ寝てて,お疲れ様ですって感じ.

新橋に近づくと,石造りのビルが増えてくる.
海外みたいでいいですね.
僕は建築にもどうやら興味があるようです.

新橋

古本市やってました.
そういえば古本買ったこと無いなぁ.
適当に安い本を買ったら,結構面白かったみたいな体験が得られるのかなと想像.

東京

そうこうしているうちに東京.
やっぱりこの見た目はズルいですね.

秋葉原

ヨドバシカメラには結構お世話になってます.
実物見るならここですね.

御徒町

高架下にオシャレな店が集まってる場所がありました.
知らなかった.
最近は高架下の活用が盛んみたいですね.

駅前でもなにやらファミリーイベントが催されてました.
やっぱ日曜にして正解だったな.

アメ横に突入です.
安い食料品や服がいっぱいでした.
海外の人が多くいた印象です.

上野

上野公園は一足先に花見をしに来た人がいっぱいいました.
めっちゃ咲いているというわけでもなかった気もしますが,天気が良いのでご飯はおいしいですね.

鶯谷

ここらへんでだんだん足が痛くなってきました.
靴擦れとかじゃなくて筋肉痛です.
股関節と太ももの足をあげるときの筋肉が痛いです.
正直休憩しようかとも思いましたが,「鶯谷で休憩」ってワードがヤバそうなので,日暮里まで頑張って歩くことに.

日暮里

日暮里駅前のエクセルシオールでココアとモンブランを注文.
やっぱり疲れた体には甘いものですね.

田端

田端を過ぎたあたりでだいぶ日が傾いてきました.
ガードレールや電柱の影が長く伸びるのがとてもキレイです.

駒込

今日一番好きな道路の写真です.
線路を回避するために盛り上がって垂直方向にうねり,近くには踏切.
ジオラマだったら買っちゃいますねこれ.

巣鴨

日暮里でココア飲んだときにトイレ行っとけばよかったなと後悔しつつ駅ビルのトイレを拝借.
今は QR コードでトイレの使用状況がわかるサービスとかあるんですね.
個人的にはどんな方法でセンシングしているかが気になります.
現在 17:30.
代々木駅で予想を立てた 17:00 に終わるという希望は既に散っているようです.
夜までに新宿帰れるかな...

すべての駅の写真を撮っていたのですが,出発してから巣鴨駅を撮り忘れてたことを思い出して逆方向から撮影.
中高の最寄りがここだったので懐かしいです.

大塚

銭湯がありました.
いかにもって感じの出で立ちで良いです.

池袋

桜がいい感じです.

やっぱり人が多い.
人混みが嫌いって人が僕の周りには多いですが,僕はこんなにもたくさんの人が別々の人生を歩んでいると思うと感慨深いし,1 人じゃないと思えて安心するので好きです.

目白

なんかキレイな建物です.ホテルかな?

学習院ってここにあったんですね.
ここらへんから足首曲げるのがしんどくなってきて,自然とペタペタ足を下ろしているのを自覚し始めます.
目に見えてペース落ちてますねこれ.

高田馬場

RedRock は雰囲気が好きなお肉屋さんです.

新大久保

夜でもギラギラしてますね.
韓国ブームもあってか若い女性が多かったです.
韓国料理だとサムギョプサルって焼き肉みたいな料理が好きです.

到着

そんなこんなで 19:30 に新宿駅に到着!
いや~長かった.
09:30 ~ 19:30 で 10 時間,休憩を抜いても 8.5 時間ぐらいぶっ通しで歩いてたことになります.
グーグルマップで距離を見たら大体 50km でした.

まとめ

山手線を一周するとめちゃめちゃ疲れます.
ただ,いろんな新しい発見があって面白いです.
ここにこんなお店があるんだ~といったことや,自分ってこういうことをエモいと感じるんだなとか.
8 時とかもうちょい早めの朝から始めてたら,良かったかなとも思いました.
大きなハプニングもなく,なんだかんだ楽しかったです.
今度やるときは,もう少しじっくり駅の周りとかを散策したいので,山手線を 1/3 とか 1/4 周ずつに分けて,歩いてみるのも面白いかもしれません.
あと筋肉痛ヤバイ.
面白いのが,歩くときと走るときで使う筋肉が違うようで,終わってからも走ることは全然苦じゃなかったです.
それから,僕はランニング用の靴を履いていたので大丈夫でしたが,靴擦れにも気をつけましょう.

後日談

1 日目,太ももとふくらはぎの筋肉痛は朝起きたら治ってました. ただ,腰まわりの筋肉に痛みがあります.
研究室の送る会・謝恩会があったので,その間密かに唸ってました.

2 日目,朝起きたら全回復.
もう一周できそうなくらいでした.
この日に卒業式を迎えました.

Laravelでプロジェクト作って,VueでHMRするまで

背景

バイト先で自分はReactを書いていたんだけど,これからはVue使うことになったらしい

ハンズオンしてほしいって頼まれたけど,Vueほぼやったことなかったので,基本的な使い方とかWebpackとの連携とかを半日ぐらい勉強した

よし資料作るかってなったら,そういえばバイト先PHP使ってること思い出して,これはLaravelとLaravel-Mix使うやつやんと気付く

ハンズオンで学んだ内容でそのままスムーズに移行できるように,Laravelを立ち上げて触ってみることにしたけど,何回か躓いたので備忘録

環境

Laravelでプロジェクト作成

PHPとComposerを入れる

各々,公式サイトから落としてくる(てか入ってなかったんか...)

パスを通しておく

Laravel入れる

composer global require "laravel/installer=~1.1"でグローバルにLaravelいれる

これでLaravelコマンドが使えるようになった

プロジェクトを作って依存パッケージを入れる

laravel new xxxx でプロジェクトフォルダ(xxxx)作る

xxxx 内で composer install して依存パッケージを入れようとするが,上手くいかない

これは,composer.lockcomposer.json に書かれたパッケージのバージョンが違うためらしい

composer updateでうまく行った

今後はこれを基本的に使えば良さそう

Laravel起動

php artisan serveしてサーバを起動!動いた

localhost:8000にブラウザでアクセスするも,Whoopsって表示されてる...

あ~.envファイルをコピーする必要があるんだった

PowerShellcp .env.example .envした (ちなみにPowerShellだとcp -p .env.example .envは動かなかった)

気を取り直して,php artisan serveしたら動いた🎉

f:id:pvcresin:20190203185142p:plain

今回使うフォルダたち

  • resources/
    • js/: Vueのファイルも入ってる
      • components/
        • ExampleComponent.vue
    • sass/: SCSSファイルが入ってる
    • views/: テンプレートのPHPファイルが入ってる
      • welcome.blade.php
  • public/: 最終的にServeされるファイルが入ってる(出力されてる)
  • routes/: ウェブページやAPIのルーティング周りが書かれている
    • web.php
  • webpack.mix.js

CSRFトーク

コンソールでCSRFトークンの記述ねえぞって怒られてるから,welcome.blade.phpheadタグ内に

<meta name="csrf-token" content="{{ csrf_token() }}">

書いておく

Vue動かす

準備

  • Chrome拡張のVue.js devtools
  • VSCodeの設定でformatOnSavetrueにする
  • VSCode拡張の以下2つを入れる
    • Prettier: いろんな形式のファイルを自動フォーマットする君
    • Vetur: Vueファイルをいい感じに表示したりする君
  • xxxx内でyarnして依存モジュールを入れる

npm-scripts

package.jsonを見ると,主なコマンドは以下の4つ

  • prod: 1回productionビルド
  • dev: 1回developmentビルド
  • watch: ファイルが更新されるたびにdevelopmentビルド(ブラウザリロード必要)
  • hot: HMR.ファイルが更新されるたびにdevビルド(ブラウザリロード不要)

Routingを変えてみる

viewsindex.blade.phpを作成

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Laravel</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
  </head>
  <body>
    <div id="app">
      <example-component></example-component>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>

routes/web.php内に,ブラウザで/にアクセスした時,welcomeのテンプレートを返すことが書かれてるので,indexに変更する

Route::get('/', function () {
    return view('index');
});

もう一度サーバを起動してアクセスし直すとindex.blade.phpの内容が表示されてる

開発してみる

とりあえずyarn watchしてみる

resources/js/components/ExampleComponent.vueを編集すると,自動でビルドされる

ブラウザをリロードするとコンポーネントが更新されている

f:id:pvcresin:20190203185520p:plain

これで開発はできそう

HMR(Hot Module Replacement) する

yarn hotしてみたけど,.vueファイル変更保存しても反映されない!

調べたら,なんかIssueたってた

LaravelとVueを連携するためにLaravel-Mix(Webpackのラッパー)で通信してるけど,そこの連携がうまく行ってないっぽい

webpack.mix.jsに以下を追記

Mix.listen('configReady', webpackConfig => {
    if (Mix.isUsing('hmr')) {
        // Remove leading '/' from entry keys
        webpackConfig.entry = Object.keys(webpackConfig.entry).reduce(
            (entries, entry) => {
                entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry]
                return entries
            },
            {}
        )

        // Remove leading '/' from ExtractTextPlugin instances
        webpackConfig.plugins.forEach(plugin => {
            if (plugin.constructor.name === 'ExtractTextPlugin') {
                plugin.filename = plugin.filename.replace(/^\//, '')
            }
        })
    }
})

もう一回yarn hotしてブラウザで開いたらコンソールでHMRが有効化されていることが確認できた

.vueファイルを変更して保存すると,ブラウザのリロード無しで反映されるようになった🎉

とりあえず最低限は動いてるかな

HMRが動いたので今日はここまで

Kotlin Fest 2018 に行ってきた

8月末にKotlin Fest 2018に行ってきた。

そもそも記事書かないつもりだったから遅れてしまったけど、初めて大きめのカンファレンスに行ったし、やっぱり記念に書いとこ。

Kotlin Fest とは

「Kotlinを愛でる」ためのカンファレンス。

今年初めて開催。場所は品川。

参加者は400人弱と結構多い。

スポンサーも全部で17社あって、そのうちの8社は当日にブースも出してた。

参加まで

JKUG(日本Kotlinユーザグループ)のConnpassで開催がアナウンスされてたので気になってた。

チケットは以下の4種類

  • 一般(懇親会 有)8000円 先着200名
  • 一般(懇親会 無)5000円 先着150名
  • LT登壇(懇親会 有)5000円 先着8名
  • 学生(懇親会 有)無料 先着10名

カンファレンスって結構するのな…と思ってたけど、友達にあとから聞いたら安くね?って言われた笑

とにかくお金がない学生なので、全国で先着10名の学生枠を争うことに。

ブラウザのタブをリロードしまくったら、学生枠3人目をゲット!

懇親会もついてくるし最高~~

開会前

当日の品川は快晴!

看板イケてる

JKUGのかわいいトートバッグもらえた(レッド・ブラック・ネイビー)

水やお茶もあった

コーヒやワインとかも

数種類のスイーツ的な何かが無制限に出てきた(スポンサーの力?)

無料で食べ飲み放題で最高!

写真撮ってないけど、スポンサーブースはクイズをやってたり、グッズのプレゼントがあったりとお祭りって感じが満載だった。

当日の自分のハイライト

講演

はじまり

「Kotlinを愛でる」とは?から始まって熱い講義だった。

最近のKotlinやコミュニティの動き、各社の導入事例などてんこ盛りな内容だった。

ここからは2会場でパラレルに講演を聞ける。

聞いたのは以下の講演

  • 「Kotlinもう一歩」
    • タイプやジェネリクス、変位の話は知らないことも多く、ためになった。
  • 「Kotlinアプリのリファクタリングポイント」
  • 「Kotlin linter」
    • 各リンターの違いや使い方、カスタマイズ方法の話はちょうど今使っていて参考になった。
  • 「Kotlin コルーチンを理解しよう」
    • コルーチンの内部実装の話が面白かった。
  • 「公募によるLT大会」
    • シーケンスやDSL、コルーチンやKontributeなど様々な話を一人3分で詰め込んで話すのはスピード感があってよかった。

懇親会

人がいっぱい

シェフがローストビーフ切ってくれる

懇親会ではパックマンルール(人が入りやすいように輪の一部をあけておくルール)が定められていたので、とても良かった。

Kotlinにまつわる会は初めてじゃなかったので、知ってる人が結構いた。

まとめ

Kotlinを愛でたいので来年も開催してほしいし、参加したい。

多くの講演でKotlinの言語仕様や実装を絡めて話してくれたので、かなり参考になるところが多かったと思う。

サーバサイドもだいぶ増えてきたっぽくてKotlinが広まっていくのは嬉しい。

(Kotlin.jsの話がないぞ…?)

あと食べ飲み放題だったので、最高だった。

学生枠で懇親会も参加できて、有意義な時間だったなぁ。

Kotlinかわいい!

Kotlin/Native v0.3がWin対応したので触ってみた

はじめに

全ての道はKotlinに通ず

つい先日,Kotlin/Nativeがv0.3になってwindowsで動くようになったらしい. blog.jetbrains.com 触るしか無い…!

はじめに結果を言っとくと,サンプルを動かしてウィンドウが出せたよ f:id:pvcresin:20170624012016p:plain

準備

環境はwindows10 64bit.
上のリンクからx86-64 Windows用のzipを落としてきて解凍する.
中はこんな感じ
f:id:pvcresin:20170624011856p:plain
このbinにPATHを通す.(再起動も忘れずに)

何となくコマンドプロンプト(以下cmd)でkotlincと打つと,
Downloading native dependencies (LLVM, sysroot etc). This is a one-time action performed only on the first run of the compiler.
なるほど.はじめは何か落としてくるのか.350MBだったので,まぁまぁ待った.
色々落としてきてる様子がコンソールに流れて,終わったと思ったら最後に
error: you have not specified any compilation arguments. No output has been produced.
怒られた.まぁそうだよね.kotlinc のあとファイル指定してないし.

よしこれで準備OK!

README.mdとか読みながら動かしていくぞ

exeを書き出してみる

hello.ktを作成

fun main(args: Array<String>) {
  for (i in 0 until 10000) {
    println("hello kotlin native :$i")
  }
}

cmdでコンパイルタイム!
README.md によるとkotlinc hello.kt -o helloって書いてあったけど,
これだと怒られるので,kotlinc-native hello.kt -o helloってやったらhello.exeとhello.kt.bcが出来た.
exeをクリックして実行すると文字が流れる.OK!

win32APIを使ってウィンドウを生成する

これが本番.同封されているサンプルにwin32というのがあるのでこれを動かす
サンプルからコードをコピってくる

hello.kt

import win32.*

fun main(args: Array<String>) {
    MessageBoxW(null, "Konan говорит:\nЗДРАВСТВУЙ МИР!\n",
            "Заголовок окна", MB_YESNOCANCEL or MB_ICONQUESTION)
}

キリル文字が並んでる~と思ったら,あ~JetBrainsはロシアだっけか(チェコでした)。

サンプルからwin32.defもコピってきて,コマンドを打つ
cinterop -def win32.def -o win32
数分かかったが,win32-buildというフォルダとwin32.klibができた. これでライブラリの準備が出来たっぽい
ちなみにklibはv0.3から出来たライブラリのフォーマットらしい.

kotlinc-native hello.kt -library win32 -o hello
コンパイルして,出来たhello.exeをクリックすると~

f:id:pvcresin:20170624012016p:plain

すごい.どことなくウイルスみたいに見えるけど,サンプル動いた.おわり!

おわりに

ここからは独り言なんだけど,Kotlinすごい(自分の周りで騒いでる人いなくて悲しいんだけど)

JVMで実行できて,JSへの変換も公式になって,Nativeにも書き出せて,Android開発の公式言語になった
コミュニティのロゴとかも出来たね
Cとかの代わりになるってことでいいのかな?この流れで行くとWebAssemblyまで手を出しそうだ.というか出すんじゃないかな

あと,今回のv0.3でAndroidのnative activitiesに対応したらしい
こっちは試してないけど,C++とか書いてJavaやKotlinから呼び出すみたいな今までの開発をしなくても,KotlinでNativeになる時代が本当に来たのか~と思うと目から汁が出る

KotlinでDSL作って,HTMLとかJSとか全部Kotlinで書くみたいなプロジェクトが確かあったと思うけど,ホントにKotlinでなんでもかける時代が来るのかもしれない
Kotlin/Nativeが出たときに組み込みとかiOSアプリとかも作れるようにしたいって言ってたけど,もしかしたらKotlinでAndroidiOSの両方開発みたいなReactNativeとかXamarinみたいなのもできるようになるのか(胸熱)
まぁでもKotlinでJS書くの結構,頭切り替えなきゃいけないし,そこら辺の差をなくすのはまだまだ無理だろうな

こんなにいろんなことが出来るよって裾野広げて,開発チームは大丈夫なのかといらぬ心配をしてしまう
とにかくKotlinの今後にますます注目~

Mode Template for Processing 3.x を作った

前にMode Template for Processing 2.xを使ってProcessing 3.0.2で使えるMode作ったけど,なぜか動かなくなってたのでこの際だから3.x用作った
基本は2.xのまま借りてきている
少し直したのと,前はEclipseで作ってたけどIntelliJが好きだから,移行してIntelliJでつくった
ここからメンテナンスするかと言われればたぶんしない

github.com

String.prepend, String.append, String.minusの話

小ネタだけど,String関係で便利なやつ第2弾
解説すると,String.prepend(String)で前に追加,String.append(String)で後に追加
String - IntでInt文字数分削除

下の例だと,文字”STRING”にprepend("pre")で"preSTRING"
そのあとappend("app")で"preSTRINGapp"
最後にs - 1で最後の1文字を削除して"preSTRINGap"

operator fun String.minus(num: Int) = this.substring(0, this.length - num)

fun String.prepend(s: String) = this.javaClass.getDeclaredField("value").let {
    it.isAccessible = true
    it.set(this, s.toCharArray() + this.toCharArray())
    this
}

fun String.append(s: String) = this.javaClass.getDeclaredField("value").let {
    it.isAccessible = true
    it.set(this, this.toCharArray() + s.toCharArray())
    this
}

fun main(args: Array<String>) {
    val s = "STRING"
    s.prepend("pre").append("app")
    println(s - 1)  // ->  preSTRINGap
}

Stringに掛け算の演算子オーバーロードしたら捗った

最近Kotlinのoperatorとかinfix触っててよかった話をひとつ.

Stringで+を使うと結合になるわけだけど,なぜか*がない
なのでString.timesを作った
String * Int, String *= Intって感じ
これでいちいちfor回したりがなくなるので結構便利
デフォルトに組み込んでほしい^~

fun main(args: Array<String>) {
    operator fun String.times(num: Int): String {
        var s = ""
        for (i in 0..num) s += this
        return s
    }
    println("hell, " * 2 + "hell)//hell, hell, hell
}