Terrarium

いわゆる掃き溜めの ありふれた有象無象

PlatformIO on VSCode でシリアル通信のデータを手っ取り早くファイルに保存する

TL;DR

画面下の PlatformIO メニューからターミナルを起動し,そこで

platformio device monitor | tee output.csv

Problem

実験やテストなどで Arduino を使って ADC の結果を PC に取り込みたいという状況はよくあるはず.

Arduino の開発環境ではシリアルモニタという機能があり,Arduino と簡単にシリアル通信をすることができ,これを使って ADC の値を読み込んでコピペすることでデータを取り込むことができる.

しかしこれは効率がいいとは言えない.

一方で私は普段から Visual Studio Code などで Arduino の開発を行うことができる Platform IO というツールを使っているが,こちらにもシリアルモニタ機能があるもののボタンから起動した場合にはデータはコピペするしかない(はず…).

platformio.org

tellusium.hatenablog.com

PlatformIO をコマンド上で実行できれば,パイプやら tee コマンドやらでファイルに流すのは容易である.

このデータ取り込みを効率良く行うために Platform IO をコマンドで起動する手法がわかったのでメモ代わりに残しておく.

Solution

Visual Studio Code で PlatformIO のプロジェクトを開くと画面下に次のようなボタン群が表示されている. このコンセントのようなマークがシリアルモニタであり,起動すると Arduino と通信できる.

f:id:tellusium:20190712221035p:plain

ここで一番右側のターミナルマークがあることに気づく. このボタンを押すと,PlatformIO のコマンド群が使える状態のターミナルが起動する. ここで次のコマンドを使うと,シリアルモニタをターミナルから起動できる.

platformio device monitor

これでターミナル上でシリアル通信が行えるので,一工夫して

platformio device monitor | tee output.csv

などとやれば,画面上に通信結果を表示させつつ CSV ファイルに通信内容を流すことができる.

Conclusion

データ取得がはかどりますね.

JavaScriptで要素をスクロール連動させたい時の基本知識

現在JavaScriptでWebサイトを作っている(そのうち公開予定)が,そこでスクロールによって画像背景をパララックス表示させたくなった.

その時にJavaScriptでスクロール連動させる時に使える値を色々調べたのでここにまとめようと思う. 今回はVue.jsを用いて作成しているが,jQueryでもその他でも使えるはず.

画面内での要素の位置

スクロール連動させる際には,スクロールによって変動する要素の座標的な値があると便利である. 画面内での,正確にはユーザの画面左上を原点とした要素の現在の位置は,getBoundingClientRect()により取得できる.

developer.mozilla.org

返されるオブジェクトがtopやleftといったkeyを持つため,それを指定することで要素の位置を知ることができる.

offsetTopもあるが,これは親要素からの相対的な位置なので,階層が深いdivに使うと思わぬ値が返って来たりする(これで詰まった…)

developer.mozilla.org

画面の大きさ

画面に現れた・画面から消えたなど画面に関わるスクロール連動を行う場合に必要になる. ユーザに表示されている画面の高さはwindow.document.documentElement.clientHeightによって取得ができる.

developer.mozilla.org

画面の幅はご想像の通り.

developer.mozilla.org

同じ分類の値としてoffsetHeightscrollHeightなどもあるが,clientHeightが一番使えるのではないだろうか.

stackoverflow.com

ちなみに,この画面の高さこれと先ほどを使うと,「要素が画面内に現れると同時に何かする」ことが可能になる.

qiita.com

上記ではjQueryを用いているが,全く同じ考え方で,Vue.jsなどで使う場合には次のようになる(下のコードは一応TypeScript).

handleScroll(evt: Event, el: HTMLElement) {
  if (windowHeight >= el.getBoundingClientRect().top) {
    // 要素の位置が画面内なら
    // 画面内にある時の処理
  } else {
    // 画面内にない時の処理
  }
}

スクロールした量

画面がどれだけスクロールされたかは,window.scrollYなどで取得できる. これは垂直方向だが,もちろん水平方向のスクロール量も取得できる.(もうわかると思うので省略)

developer.mozilla.org

取得が簡単なので,スクロールと連動してブラーがかかるなどが簡単に実装できる. cssfilterblurを設定している.

handleBlurScroll(evt: Event, el: HTMLElement) {
  el.style.webkitFilter = "blur(" + window.scrollY / 100 + "px)";
}

背景のパララックス実装

背景を前面の要素より遅く動かすと格好いいことが知られている(要出典).

↓こんなイメージ.

pixelcog.github.io

実装のためには背景を遅れて動作させればいいわけだが,csstransformを使うと要素の位置を動かすことができる. これをスクロールによって変化した値に依存させて適用すれば,スクロールから遅れて背景を動かすことができる.

実装してみた例がこちら. このコードをイベントハンドラとしてスクロールの度に呼び出す.

handleParallaxScroll(evt: Event, el: HTMLElement) {
  let windowHeight = window.document.documentElement.clientHeight;
  let elementTop = el.getBoundingClientRect().top;
  if (windowHeight >= elementTop) {
    // 画面内にあるなら要素の画面内Y座標の半分だけ上にずらす
    el.style.transform = "translateY(" + -1 * (elementTop / 2) + "px)";
  }
},

「基準要素の画面内座標の半分だけ上にずら」しているが,ここは色々な実装が考えられる. こうすることで,画面いっぱいの要素を上から下までスクロールするとちょうど画像の全景が確認できるようにしている. 自身の要素しか参照していないため,複数のdivに対してこのハンドラを結びつけても動作させることができる.

終わりに

だいぶ格好いいパララックスが実装でき満足している. そのうち実装したWebサイトを公開します.

f:id:tellusium:20190115204616g:plain

アプリを作っていきたいと思います.

アプリ製作

最近ソフトウェアアーキテクチャを学ぶのが非常に楽しい. 通学中に↓↓↓のような本を読んでいたりする.

www.amazon.co.jp

peaks.cc

Clean Architectureの原書が半分くらい読んだものの,この1週間くらいは英語に疲れたのでiOSアプリ設計パターン入門を読み進めている. なぜアーキテクチャを学ぶのが楽しいのかはわからないが,おそらく数学を学ぶ時の混沌としたよくわからないものが理論で整理されていく感覚に近いのかもしれない.

本を読んでいるとはいえ,プログラミング関係のことを学ぶ時には実際にコードを書いてみるのが一番である. ということで数ヶ月前からアプリ開発を思い出すために(1年近いブランクがあった)少しづつ作っていたアプリを使って様々なアーキテクチャでこれらを実装していこうと思う.

購入履歴アプリ

なんといえばいいかわからないが,「1ヶ月での消費を記録するためのアプリ」である. 機能としては巷に溢れている小遣い管理アプリに近い. しかしこれは貯蓄は記録せず,あくまで「いくら使ったか」を記録するアプリである. 機能一覧は次の通り.

  • 購入した物品の金額を記録する
    • 少ない操作数で記録できることが理想
  • 1ヶ月の記録と使用した合計金額を確認できる
  • 過去の月に消費した金額とその月の記録を確認できる

やることが少ないので勉強にはピッタリである. なおニーズがあるかという話だが,まさに自分自身が欲しいと思っているアプリなので周りのニーズはあまり考えないことにする.

デザイン

画面のデザインがあるとViewの実装が非常に楽になる. なのでまずはAdobe XDを使って画面のデザインから行った.

f:id:tellusium:20181216184154p:plain:w250
今月の購入履歴
f:id:tellusium:20181216184210p:plain:w250
入力画面
f:id:tellusium:20181216184234p:plain:w250
履歴画面

いざ実装すると今月の使用額などが想定以上に強かったり,入力に必要な時間がかかったり,今後変更していくべき部分が多いが,とりあえず実装していく.

MVC

最初はSwiftの機能のみを使ってMVCに近いパターンでの実装を行なった. 基本なので最初の実装にはふさわしいと思う.

  • Domain
    • ビジネスロジックを記述
      • 今回の場合,基本的なデータ構造,必要な処理などを記述する
  • Controller
    • ViewとModelを結びつける
      • 専用のクラスを作るのが普通であるが,今回はViewControllerをControllerとして使っている
      • Viewのイベントを拾いModelの処理を起動したり,Modelの処理結果をViewに反映させたりする
  • View
    • 画面の見た目
      • 基本的にはStoryboard上でAutoLayoutを用いて記述した
      • 再利用するために色々工夫してみている
        • があまり納得できていないので,将来的には各Componentごとに実装してみたい
  • Repository
    • データベースやネットワークなど外部に依存したものとのインタフェース
      • 今回はデータベースをモックしている

現在の実装

コードはGitHubに.

github.com

アプリ画面は現在以下のようになっている.

f:id:tellusium:20181216192448p:plain:w250
現在の実装

次のアーキテクチャ

RxSwiftを使ったMVVMに挑戦したい. Rxのチュートリアルサイトを読んだり,夏のインターンなどで多少使ったものの理解度が圧倒的に足りていないのでその練習になると考えている.

∠( 'ω')/

↓がメインです

qiita.com

おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆みてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉみてみてこれエビ!みてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆みてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆みてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆みてみてこれエビ!おはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉこんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!ヘケッ☆ヘケッ☆みてみてこれエビ!おはよぉぉぉおはよぉぉぉみてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!みてみてこれエビ!ヘケッ☆ヘケッ☆ヘケッ☆みてみてこれエビ!おはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉみてみてこれエビ!こんばんはぁおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおはよぉぉぉおきてぇぇぇこんちわぁぁヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆ヘケッ☆こんばんはぁヘケッ☆おやすみぃぃぃこんちわぁぁヘケッ☆みてみてこれエビ! (詳細は明日公開されます)