泉式部日記

夢よりもはかなき世の中を明かし暮らす高専生

TRUNK HACKATHON in Osaka に参加したらスポンサー賞もらった

式部です. 編入試験に向けて勉強中にも関わらず参加してきました.

TRUNK HACKATHON

trunk.fm

TRUNK 株式会社が主催するハッカソンで, 大阪では2回目の開催だったようです.
編入試験が終わるまではプログラミング活動は控えるつもりでしたが, 優勝賞金に惹かれてしまいました()

チームメンバー

ちなみにチーム名は「:(){:|:&};: (フォークボム)」です. 物騒ですね〜〜

当日

特にハプニングなどもないまま当日を迎えました. 強いていうなら直前にキーボードが不調なことに気づいて HHKB を持参したくらいです (なぜか直ってて出番はなかった)

テーマはテクノロジーで関西の食を楽しくしようでした. 食といったらラーメン! 寿司! というようなメンバーだったのもあり, アイデアソンの時間ではなかなかまとまりませんでした.

それに加えて当初は「一人暮らしのための調味料支援アプリ」というようなアイデアで進めており, これが実装面で大きな問題を抱えてしまったため, 全く別のアイデアを考える必要が出てきました. めっちゃタイムロスです. この辺りから割とやばいなと思い始めました.

その後「客と店を繋げるSNS」というテーマから

  • 店の情報をタイムライン的に受け取りたい
  • 予約をフォームから簡単にできるようにしたい
  • いっそのこと支払いも事前に済ませときたい (割り勘とかも簡単に)

といったアイデアがあがり, これを実装していくことにしました.

最終的な成果物 ↓

trunk.fm

実装

サイボウズ株式会社やLINE株式会社がスポンサーとして参加されていたので, せっかくなので DB には kintone を, 支払いには LINE Pay API を利用しました.

kintone は DB を一瞬で作成でき, 操作も GUI からポチポチと行うことができ, REST API も搭載されているので, めっちゃいい感じに使えました.

また, kintone とクライアントアプリの間に Flask による API を BFF 的に設置し,

  • クライアント, kintone 間の通信
  • kintone から受け取ったデータの整形 (JOIN のような処理はできなかったので, それも兼ねて)
  • LINE Pay API との通信

などをしてもらいました.
kintone 周りははくたか, LINE Pay API 周りはかむいさんにやってもらいました. ありがてぇ...

フロントは Ionic と Angular で実装しました. 僕も主にバックエンドをやっていたので, フロントは john に1人でやってもらってました. 申し訳ねぇ...

僕ははくたかに kintone の仕様を見てもらっている間に DB と API の設計を考え, そのあとは終始いろんなところを触っていました. 最後の方はフロントのマークアップ (デザインの修正 etc.) も手伝いました.

しれっと人生初の徹夜をしてしまいましたが, 開発中は眠気に襲われることもなく意外と大丈夫でした.

発表会 & 結果発表

ちげさん(奈良高専)の陰謀で発表スライドの冒頭に「提供: 高専」と入れ(させられ)ました.

僕たちは高専組(なぜかいっぱいいた)の中で最後で, 全体の中でも最後から3番目とかだったので謎にプレッシャーがありました.

発表もタイムオーバーはあれどうまくいき, 優勝もあるんじゃないかとみんな思っていましたが, 惜しくも(?)優勝には届かず...
優勝したえびふりゃーさん, デザインがプロそのものって感じでした. そこで差がついてしまったのかもしれません.

けど1番 kintone を使いこなしていたということで, サイボウズ株式会社からスポンサー賞をいただきました.

会場を貸してくださった billage OSAKA さんのホワイトボードをめっちゃ汚してしまった...

まとめ

人生初の徹夜でしたが, とても充実したハッカソンになりました.
一緒に出てくれたみんなには感謝です!

大会終了後は眠気がやばかったですけど...

ちなみにこれは一鶴というところで食べた鶏です. f:id:shikiblog:20190321215845j:plain

高専カンファレンス新春 in 大阪 に登壇した

新年早速登壇しちゃいました.

カンファレンス当日

一緒に行こうと思っていた友人が翌日の TOEIC 公開試験を優先してキャンセルしたので一人で行くことに...
僕は登壇者のためカンファレンスを優先してしまった. (その分 TOEIC は悲しい結果だった)

僕は4番目に「オレオレ開発環境を300コミット以上かけて作った話」という10分間の発表をした.
@nomunomu0504 さんの量子コンピュータの話, @Cilvia333 さんの女装の話, @RyuhiKanno さんの高専キャリアの話とレベルの高いお話が続いたので謎のプレッシャーがすごかった…

(スライドはこの辺りにまた貼ります)

発表では特に緊張することもなく自由にお話することができたし, 最後のオチは皆さんすごい笑ってくれたので個人的には良い発表だった.

発表内容の補足

僕の dotfiles はこの記事をバリバリ参考にしている.
最強の dotfiles 駆動開発と GitHub で管理する運用方法

dotfiles と調べると最初に出てくる & 内容もクオリティが高いということで dotfileser でお世話になった人は結構いるんじゃないだろうか.

記事から変更した点として1つは home というディレクトリを作ったこと.
これにより

  • デプロイの際に省く必要のあるファイルが .DS_Store etc. の勝手に生成されるファイルのみで済む
  • リポジトリのルートディレクトリの見通しが良くなる

といった恩恵があると思っている.

あとは .vim ディレクトリなどを直接デプロイするのではなく dotfiles/vim を参照させるようにしたことなど. (デプロイ先に生成されたファイルを ignore する必要がなくなるように)

ちなみに発表中環境構築が嫌い宣言をしたけど, 嫌いなりになんやかんや楽しく構築ライフを送っているのでご安心ください (?)

まとめ

10 分発表は初めてなので事前準備をある程度行って挑みましたが, 短めのスライドにしたので本番では結局アドリブ盛り放題になってしまいました.
もう少し話をまとめた方がよかった気がする...

けど参加者の皆さんに結構笑ってもらえましたし, 量子論についてや独自ハッシュタグを使うとエゴサが楽になることなど新しい学びもあったので, とても有意義な会になりました.
FF さんと初めて対面するなどツイ廃っぽいこともできて楽しかったです.

これからは編入試験に向けて勉強を頑張ります!

【Rails】最近学んだこと振り返り

Rails

最近お仕事でRuby on Railsを触っており, そこで苦戦したところをメモすることにした.
「ここはおかしい」「ここはこの方がいい」など教えていただけたら嬉しいです

bulmaでselectクラスを使うとき

お仕事ではView部分をslim + bulmaで書いている.

フォーム画面を作成しているとき, date_selectみたいなselectフォームを複数作ってくれるものを, bulmaのselectクラスで包むとselect項目が縦に並んでしまう.
横並びにするためには中身をfield is-horizontalでもう一度包む必要がある.

= form_for :hoge do |f|
  .field
    .select
      .field.is-horizontal
        = f.date_select

これを知らなくて1時間ぐらい至るところにis-horizontalをつけまくってた...

複数のレコードを保存したい

1つのフォームで複数のレコードを保存するとき, form_forを使うとparamsとかが被って当然保存できない.
ということでform_tagを使って書いた.

= form_tag 'hoge_path', method: post do
  .field
    .input
      = text_field_tag 'fuga[]', @hoge.fuga

/ params[:fuga][i] でi番目のparamsを参照可能

保存時にはtransactionを使って失敗時にロールバックできるようにする.

Hoge.transaction do
  @hoges.each_with_index do |hoge, i|
    Hoge.new(fuga: params[:fuga][i])
    hoge.save!
  end
end

一気に保存できたらtransactionする必要もなさそうだけど (やり方はわからない)

ループ内でDBへアクセスしまくっていた

普通のことだが, DBへのアクセスは少なく済ませようという話

ids = [1, 2, 3]

# Before:
ids.each do |id|
  Hoge.find(id)
  # なんか処理
end

# After:
Hoge.where(id: ids)
# なんか処理

最後に

Railsは入門書を読んだぐらいだったので, 実際の業務を通して自分の穴を補完できるのはやっぱりいいですね.
基本的なところで詰まってるからもっと勉強しないと...

MacにDashとAlfredを導入した

Mac

「DashとかAlfredとかいいよー!」とは聞いてたものの今まで使ったことがなかったので, ようやくMacに導入してみた.

Dash

インストールはHomebrew-Caskでできる.

$ brew cask install dash

あとはDashを開き, 欲しい言語のdocsetをダウンロードするとオフラインでリファレンスを参照できるようになる.

f:id:shikiblog:20180224225257p:plain

とはいえこのままでは使いづらいので, テキストエディタやIDEと連携させて編集画面から即リファレンスが見れるようにしたい.

そういった設定はPurchase Dash > Integrationからいろいろできる.

f:id:shikiblog:20180224225303p:plain

例えばVimと連携させたい場合, 写真のVimアイコンをクリックするとdash.vimというプラグインのページまで飛ぶのでそれをインストールすれば完了になる.

僕はプラグインマネージャにdeinを使ってるので, dein.tomlに

[[plugins]]
repo = 'rizzatti/dash.vim'
hook_add = 'nmap <silent> <Leader>d <Plug>DashSearch'

という設定をした. これで<Leader>dを入力するだけでカーソル上のコマンドをリファレンスで確認できるようになり, とても使いやすくなった.

Alfred

これまたCaskでインストールできる. Homebrewの充実感がすごい (語彙力)

$ brew cask install alfred

Alfredを開くとアプリ検索画面が出てきて, そこで開きたいアプリ名を検索・選択するだけでアプリを開けるようになる.

さらに, AlfredのPreferencesからホットキーを設定すればホームポジションから手を離すことなく目当てのアプリを開けるようにも!
(僕はShift + Command + Spaceをホットキーにしている)

f:id:shikiblog:20180224225309p:plain

最後に

Alfredの有料サービスPowerPackというのを使うと, DashとAlfredの連携もできるらしい. この記事がわかりやすそう
Macには無料で高機能なアプリやツールが多いのでもっと使いこなせるようになりたい...

MacのGnuplotで日本語や数式を使う

Gnuplot TeX

僕は普段レポートでグラフを描くときはGnuplotを使っているが, Macでは文字コードの関係上日本語がバグりまくってしまう.
また, レポート作成にはTeXを使用しているのでせっかくだからTeXの数式をグラフ内に入れられるようにしたい.
ということでTikz(てぃくす) を導入してみた.

参考記事: gnuplotのグラフをTikzに出力してLatex文書に貼り付ける

グラフの作成

まずはGnuplotをインストールする.

$ brew install gnuplot --with-x11

(以前は--latexといったオプションが必要だったけど今は必要ないみたい)

その後Gnuplotでset term tikz createstyleとすると, gnuplot-lua-tikz ...というstyファイルやtexファイルが生成されるので, それらをソールファイルと同じディレクトリ or TeXのパスが通っているディレクトリに置く.

グラフの出力は, 例えば正弦波のグラフを出力させる場合

# styファイルたちを生成したあとなら'createstyle'は必要ない
set term tikz createstyle
set output "graph.tex"

plot sin(x) title "hoge"

とするとグラフのファイルが出力され, グラフの準備は完了となる.

TeX側の設定

*.texファイルのプリアンブルに以下の文を追加する.

\usepackage{gnuplot-lua-tikz}

あとは\inputを使えばグラフを出力させることができる.
\figure環境に入れることでキャプションやラベルをつけることもできる.

\begin{figure}
  \centering
  % サイズを変えるときは\resizebox{}{}{}を使う!
  \resizebox{1.0\hsize}{!}{\input{graph}}
  \caption{$\sin{x}$}
  \label{fig:graph}
\end{figure}

ただ, texファイルで頑張って図を作っているわけだからコンパイルにすごく時間がかかってしまうのが難点だったり

TeXを使ってるけどいい感じのグラフ描画ソフトが無くてつらいって人は使ってみて欲しいな〜

Android Studio で使える設定やTipsたち

Android

Android Studioに詳しい人からいろんな設定やTipsを聞いたので自分が知っているのを含めてまとめることにした.

カラーの変更

Android Studioのメインカラーを黒にしたいときは,
Preferences > Appearance からSchemeをDarculaに変えると黒いAndroid Studioにすることができる.

Vim キーバインド

Preferences > Plugins の Install JetBrains plugin... から, IdeaVimというプラグインをインストールすることができる.
これのおかげでVimとデフォルトのキーバインドを両方使えるようになったので, 範囲選択はVimのヴィジュアルモード, クリップボードへのコピーはデフォルトといった使い分けができるようになった.

便利なVimコマンドとしては

  • h, j, k, l カーソルを左, 下, 上, 右に移動させることができる.
  • /hoge ファイル内の文字列hogeを検索できる
  • %s/hoge/fuga ファイル内のhogeをfugaに変換できる.
  • di" カーソル上の""で囲まれた範囲の文字列を削除できる.
  • diw カーソル上の単語を削除できる.

などがある. 他にも便利なコマンドはたくさんあるので覚えると作業がかなり捗りそう.

画面の分割

Vimのキーバインドを設定したあとなら

:split FileName

で横に分割

:vsplit FileName

で縦に分割できるようになる.

ちなみに画面間の移動は, 例えば下の画面に移動したいならCtrl-w + j (or カーソルキーの下) でできる.

TODO

下のようにコメントにTODOという文字を入れると, そういったコメントをまとめて見れるようになる.

// TODO: 機能を実装する
val hoge...

ファイル検索

Command + Shift + oでファイルを検索して開くことができる.
ホームポジションから離れずにファイル間を移動できるのでかなり重宝する.

Mac OS以外だとCommandキーではなくCtrlキーになる (はず)

コマンド検索

Command + Shift + aでRunやbuildなどのコマンドの検索、実行ができる.
そのときにショートカットキーも教えてくれるので, ショートカットを忘れてしまったときにも使える.

定義元ジャンプ

Command + bでカーソル上にある変数やクラスなどの定義元へジャンプできる.
変数の定義を再確認するときなどに地味に使えたりする.

最後に

今までこういった設定やTipsには触れてこなかったが, 使ってみると作業効率が格段に上がるようなものばかりだった.
(どうでもいいですが書き方をめっちゃ変えてみました)
他にもこんなのが便利というのがあったら教えてもらえたらと思います.

【初投稿】dein.vimというのを導入した話

Vim

はじめまして、式部。といいます。

この度、はてなブログデビューしましたので、
まずは僕が愛用してるVimのことを書こうと思います。
僕のvimrc はこちら

dein.vimを導入しました！

今までVimのプラグイン管理にはNeobundleを使っていましたが、今後はdein.vimを使うべきらしいので以下の記事を参考に移行してみました。

dein.vimによるプラグイン管理のマイベストプラクティス
[dein.vim] hook の便利な使い方

僕の場合はこのページから ~/.vim/dein/repos/github.com/Shougo/dein.vim にgit cloneして、

github.com

あとはvimrcにこんな感じの記述をしました。

set nocompatible

let s:dein_dir = $HOME . '/.vim/dein'
let s:dein_repo_dir = s:dein_dir . 'repos/github.com/Shougo/dein.vim'

set runtimepath+=~/.vim/dein/repos/github.com/Shougo/dein.vim

" TOMLファイルの設定、呼び出し
if dein#load_state(s:dein_dir)
    call dein#begin(s:dein_dir)
    let s:toml_file = s:dein_dir . '/dein.toml'

    call dein#load_toml(s:toml_file)
    call dein#end()
    call dein#save_state()
endif

" プラグインを自動インストール
if dein#check_install()
    call dein#install()
endif

" その他設定...

コメントにあるTOMLファイルってやつでプラグインを設定していく感じですね。
そのdein.tomlというファイルにはこんな感じで書いていきます。

# プラグインの導入
[[plugins]]
repo = 'thinca/vim-quickrun'

# そのプラグイン関連の設定
hook_add = '''
    set splitbelow
    set splitright
'''
hook_post_source = 'nmap <Leader>r :Quickrun'

#他のプラグイン...
[[plugins]]

最後に

自己満足感はありますがこんな感じでVimのプラグインが使えると思います。
やっぱりブログを書くのは難しいですね。
コメント、マサカリ等よろしくお願いします。