Vue.jsでログイン画面作り続けないと発作が出るお話（環境構築編）
「...うぅ...つ...作りたい...作りたいぃ...」
「ログイン画面を...作りたいィィィィィィィィィ！！！！！」
すいません。唐突にログイン画面を作らないと発症する発作が出てしまいました。みやゆーです。
発作を収めるために早速ログイン画面を作っていきたいと思います。
どうやって発作を抑えるか
とはいえ、どのようにログイン画面を作っていくかが問題です。
今回の発作は急に発症し、症状も激しいので一刻の猶予もありません。
ここはサクッとページを作成していけるVue.jsと,導入やユーザー管理も簡単なFirebaseを使って作っていきましょう。
なぜVue.jsとFirebaseを使うのかは、それを説明しないと発症する発作が出れば説明します。強いて言えば「少しだけ知見があるから」。そんなもんです。
できるかな？じゃない、やるんだよ
早速やっていきましょう。まずは環境構築です。
環境構築
$ node -v v10.15.3 $vue -V 3.7.0 $ npm -v 6.4.1
Vue-cliのバージョン確認は-Vね。小文字じゃないよ。
んでVue-cliは、3.0以前と以降で若干インストールのコマンドが違うんですよ。
まだ導入してない人は気を付けてね！
パッケージのインストール
いわゆるログインページの"器"を作ります。
コンソールで今いる場所を確認してから作ってね。直下にプロジェクトファイルができます。
vue create login_test
なんか出てきた。
Vue CLI v3.7.0 ┌───────────────────────────┐ │ Update available: 3.9.2 │ └───────────────────────────┘ ? Please pick a preset: (Use arrow keys) > default (babel, eslint) Manually select features
ほーん。defaultかManually select featuresを選べってか。
defaultにはbabelとeslintしか入ってないのね。
他にもいっぱいぶち込みたいのでManually select featuresを選びましょう。
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router >( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
必要なものにカーソルを合わせてスペースでチェックを入れていきましょう。
今のところ必要なのは以下の2つ。
- Router: ページ遷移するのに必要
- Vuex: 後述
Vuexについては後で説明しますがめちょめちょに大事なので絶対入れといてください。後からでも入れれるけどね。だるいので。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Yesで大丈夫です。
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
これも1番上で大丈夫。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
上でいいでしょう。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
BabelとかESLintの設定をどこに置くか。私は全部package.jsonにまとめてあるほうが好きなので下ですね。ここら辺は全部好みです。
? Save this as a preset for future projects? (y/N)
今後プロジェクトを作るときに今までの設定を反映させるか。んー...今回だけなのでNoで。
Vue CLI v3.7.0 ✨ Creating project in C:\Users\miyaji.yusei\Documents\login_test. 🗃 Initializing git repository... ⚙ Installing CLI plugins. This might take a while... yarn install v1.15.2 info No lockfile found. [1/4] Resolving packages...
（ ＾ω＾）おっ
インストール始まりましたね。
success Saved lockfile. Done in 14.09s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project login_test. 👉 Get started with the following commands: $ cd login_test $ yarn serve
インストール終わりっ！めっちゃ簡単。
これで環境が整いました！テンプレートができてるはずなので起動してみましょう！
$ cd login_test $yarn serve
起動してくれます。。。
DONE Compiled successfully in 5902ms 17:43:36 App running at: - Local: http://localhost:8080/ - Network: http://192.168.116.39:8080/ Note that the development build is not optimized. To create a production build, run yarn build.
起動完了！Vue.jsのlocalhostはデフォルトで8080です。chrome等でURLを叩きましょう。
localhost:8080
できた！あとはログイン画面を作るだけや！
まだまだ長いやんけ...
でも発作は収まったので良しとします。
また発症したら続きを描きます。みやゆーでした。
沖縄の電車はちょっと変わってたでっていう話
みやゆーです。沖縄行ってきました。有給もらって。
なんで行ったかっていうのはまた後日書きます。
むぎゅも喜んでおります。
オリオンビールをジョッキで飲んだり、
神戸牛のお寿司を食べたり、
アグー豚の餃子とか食べたりしました。沖縄マジで住みたいです。
私用で行ったのですが、エンジニアの卵とはいえいろいろと気になるとことがある旅でした。
沖縄に行く数日前...
#ちょまど沖縄
— Madoka ちょまど＠エンジニア兼マンガ家 (@chomado) 2019年6月28日
沖縄ワクワク☺️ pic.twitter.com/K0hxYvzv6x
あのマイクロソフトの有名なエンジニア、ちょまどさんも沖縄に行っていたそうで、個人的にテンションが上がっておりました。
するとこんなツイートが
な、なにー！！！
— Madoka ちょまど＠エンジニア兼マンガ家 (@chomado) 2019年6月28日
Suica が使えない…だと…
#ちょまど沖縄 pic.twitter.com/CKUVhY5o7z
マ？kwsk
券売機に行って Okica カード買いました☺️やったー！私もこれで沖縄民だね！
— Madoka ちょまど＠エンジニア兼マンガ家 (@chomado) 2019年6月28日
券売機、クレカ対応してなかったので
わざわざ ATM 探して現金下ろしてから買いました(いつも手持ち現金0円)#ちょまど沖縄 pic.twitter.com/FAv2oqK7so
なるほど...沖縄は独自のICカードが普及しているのね...ちょまどさんありがとう！
予備知識も手に入れたところでいざ那覇空港へ。
めんそ～れ～～～～～！！！！！！！！
IKKOさんのお出迎えでした。
那覇空港からは「ゆいレール」というモノレールが通っており、首里までつながっています。
早速Okikaを買うで～
（...ちょ、ちょっと待って...わし2泊3日しか沖縄おらんのやで...）
（この3日間の為にICカード買うん...？沖縄でしか使えないICカードを？）
急にチキってきっぷを買うことにしました。
ん、待って
なんやこのQRコード！！！
実はゆいレールのきっぷは改札に直接入れるのではなく、きっぷのQRコードを読み込ませることで改札を通過できるらしいんです。
どういうことや！！聞いてへんぞちょまどさん！！！
確かに改札にそれらしき部分がありますね。読み込ませると非常にスムーズに改札を通ることができました。
んで、降車駅でもきっぷのQRコードをかざして、改札に設置している小さいゴミ箱みたいなのに入れて出るわけです。
何やこのシステム...本土から離れてるからってガラパゴス化しすぎやろ...）
と自動改札が県庁所在地にしかない宮崎の高専出身の私が思っていたわけですが、調べてみると、どうやら同じ九州の北九州モノレールも2015年10月から同じQRコード式のきっぷを利用しているとか。
こちらの記事では、QRコード式のきっぷを利用することは以下のメリットがあると述べられています。
・ICカードと同じく、乗車券を改札機にタッチするだけなのでスムーズな通行が可能。
・磁気改札機で発生していた「券づまり・きっぷの取り忘れ・きっぷの取り間違い」などがない。
・改札機に搬送部がないことで、磁気券に比べて機器のメンテナンス代が軽減できる。
・きっぷの裏面に磁気加工をしないため、リサイクルがしやすくなる。
なるほど。確かにゆいレールの改札もスムーズに通ることができましたし。機械の故障も減らすことができるかもしれません。
さらにこちらの記事では、ゆいレールについて述べたうえで、こんなことにも触れていました。
さらに、ゆいレールは今年7月から自動改札機で、中国のＱＲコード決済サービス大手「Alipay（アリペイ）」に対応するサービスの実証実験を行っている。これはスマホで決済して、画面上のＱＲコードを改札に読ませる仕組み。日本でも、スマホ利用のＱＲコード決済が普及すれば、本当の意味でのチケットレス化が近づいてくる。
日刊工業新聞が7月に報じたところによれば、ＪＲ東日本は来年度に実施するSuicaのシステム更新で、ＱＲコードを使用した入場にも対応する計画だという。筆者が知る限りでも、10年ほど前から鉄道総合技術研究所でＱＲコードを利用した改札システムの研究が行われており、磁気券を廃止するための下準備は着々と進行している。
QR決済については私も考えていました。最近QR決済やバーコード決済が非常に流行っていますし、沖縄だけじゃなく全国規模でPayPayやLINE Payなどの決済サービスで改札を通ることができれば、よりキャッシュレスが身近になっていくでしょう。
...でもね
Suicaなんのためにあるん？
QRコード式のきっぷは非常に魅力的です。それは声を大にして言いたい。前述したように、環境的なメリットも期待できます。
でも、どうしてもQR決済などに発想が派生してしまい、「支払方法が無駄に多様化してしまう」という問題が発生するのです。
ただでさえICカードも、Suicaなどの交通系ICやAEONグループが展開する電子マネーのWAONなど大量の種類があって、しかも交通系ICも地方によって10種類もあるんです。
さらにQR決済も様々な会社のものが出てきて、最近ではセブンイレブンが展開する7Payの不正利用が話題になりました。
これ、私が個人的に考えている日本企業の良くないところだと思ってて、同じようなサービスが複数の企業でボボボッっと乱立するんですよ。
しかも各サービスごとに利用できる・できない店舗とかも違って、いちいち「このお店はこのカード使えるかな？」とか「このお店はどのポイントがたまるんだろう？」とか調べないといけないじゃないですか。
経済的には潤うんでしょうけど、利用者側からすると、せっかくキャッシュレスが身近になっているのに、お財布はカードでパンパン、携帯はアプリでいっぱいって、スマートさが台無しなんですよ。
まぁ私みたいなエンジニアの卵がブログでボソッとつぶやいた程度で何かが変わるわけではないんですけどね。
もしこの記事を見て何な感じていただける方が少しでもいるのであればうれしいです。
それが大手の決済サービスを扱うような担当者様とかだったらもっとうれしいなっ///
これ以上生意気言うとお偉い担当者様にグーで殴られるので、そろそろ失礼します。
引用させていただきました記事の筆者様方に御礼申し上げます。並びにツイートをお名前を乱用させていただきましたちょまどさん、失礼いたしました。
最後に、お土産を会社にも買ってきました。
ちんすこうと紅芋タルト。
秒でなくなりました。以上です。
"歌うコスプレイヤー"倉坂くるるって知ってる？
今日の夕飯。半袖で揚げ物してたんですが無傷で済んだので今日はええ日です。
さて、私はエンジニアのお仕事を勉強している反面、コスプレ撮りの練習もしています。
一眼はとっても奥が深く、写真をとれば撮るほど沼にはまっていくものです。
きっかけはこの方。倉坂くるるさんです。
ちなみに拙撮です。褒めて。
彼女は歌うコスプレイヤーとして有名で、先日Coskaleidsという音楽レーベルを立ち上げられたばかりの今大注目のコスプレイヤーさんです。→Twitter
とても尊敬している方なので、こうやってブログを書くのも忍びないほどですが、今回はそんな倉坂くるるさんが出された初めてのミニアルバム『Sewing Smile Sky』に収録されている曲の素晴らしさについてお話ししようと思います。
『Sewing Smile Sky』とは？
倉坂くるるさんが募集したクラウドファンディング『倉ファン』プロジェクトで製作された自身初のミニアルバム。目標金額100万円のクラウドファンディングであったが、目標額を大きく上回る204％の支援により、プロジェクトは大成功した。同プロジェクトで企画された東名阪ツアーも、開催途中の声帯麻痺の発症と葛藤しながらも見事成功を収めた。
各曲の感想
1. ハレルヤフォーゼ
収録曲最初にぴったりな、はじけたポップな1曲だと感じました。
アニメのOPのような晴れ晴れとした曲調で、女の子がお気に入りの洋服を着て出かけるようなイメージが連想されました。
そしてラスサビ前の、雨をイメージする落ち着いた感じからのラスサビのエモさがやばい。
間奏の「クラリクラ クラクルル」って歌詞もかわいくて好きです。
2. くるにゃん♡Temptation！
ご主人が大好きな猫がテーマの、前述のハレルヤフォーゼよりもキュートさが強いと感じた曲。
イエッタイガーイエッタイニャー推奨曲です。
猫ちゃん目線の、ご主人にちょっとヤキモチを焼いている表現もかわいいのですが、大好きな人にヤキモチを焼く女の子みたいな感じもあって尊いです。
3. Shining Tomorrow
こちらもポップで楽しくなる曲です。Bメロが好き。
ハイテンポなので全速力で走っているようなさわやかさがあります。サビとか2番サビ後の間奏とかサークルモッシュすると楽しそう。
でも歌詞の
パッと見て ギュンギュン↑なPOWER
グッと来て キュンキュンなMELLOW
の部分とかはピタッと止まるイメージがあって、メリハリのある感じが好きです。
ラスサビ前、ラスサビの伸びる声もしびれます。
4. MIRACLE CHEERFUL!!
この曲はくるるさんが出演するライブではおなじみの曲。
ポップですが、ロック調な部分もあり一番力強い印象です。
コールが各所に散らばめられており、覚えてライブに行くとブチ上がります。ラスサビ前でお客さんが手でトンネルを作り、くるるさんがくぐるという演出があるのですが、毎回ケチャをしようとしてしまうので次回は忘れないようにしないと...
5. My Rainbow～ありがとうを君へ～
**ガチエモい。泣く。
**収録曲の中で一番落ち着いた感じじゃないかと思うんですが、とても感情を動かされました。
歌詞もくるるさんの心の声を聴いているようなイメージで、元気が欲しい時に聴くととても元気になります。
サビや間奏の掛け声もめっちゃかわいい。マジでヤバイ。
そして歌詞カードの写真も「あっやばいかわいい」ってなるので必見です。
急に語彙力の欠けたオタクになってしまいましたが、どの曲もかわいい曲で通勤時や家でも毎日聴いてしまいます。
このミニアルバムはタワーレコード等各CDショップ、Amazon等で購入可能です。聴いてみて絶対損はないと思うので、気になった方はぜひチェックしてみてください！
ちなみに自慢ではないのですが、いえ自慢ですが、このミニアルバムのスペシャルサンクスには私の名前も入ってたりします。めちゃめちゃうれしいので宣伝させてください。
また、不定期ですが主に都内でライブに出演もされているので、ぜひ見に来てみてください。私も大体いるので一緒に沸きましょう。→倉坂くるる公式HP Krouge
みやゆーでした。
ブログ記事もメモもgitで管理しちゃえ
むぎゅとスタバ。カフェラテですら苦くて飲めないみやゆーです。
先日会社のOJTでgit研修があったのですが、先輩がgitを意外な目的で利用していることを教えてくれました。
それは、ブログの下書きをgitで管理するというもの。
(えっ...それ、はてなブログの下書きに入れればよくない...?)
とりあえず、メモとかも含めてmdファイルをgit上で管理すればそれなりに利点もあると考え、私も実践してみることにしました。
メモをgitで管理するメリット
- ネットワーク上であればどこでもプルできる
- 間違えてファイルを削除してしまったとき、復元できる
- 変更箇所が分かりやすい
- 共有リポジトリにしておけばメモの公開も可能
書き出してみると、はてなブログの下書きやストックに貯めるよりもいろいろメリットある。先輩すみませんでした。
やってみた⊂(^ω^ )⊃
注意⚠
この記事はgitの知見がある程度ある人向けです。gitの導入方法などわかんないよ!って人は静かに、ゆっくりブラウザバックしてください。そう...ゆっくり...
とりあえずプライベートリポジトリを作ってみました。
├── README.md
├── .vscode
│ └── settings.json
├── <会社用メモ>
│ ├── <会社用メモ1.md>
│ ├── <会社用メモ2.md>
│ ├── <会社用メモ3.md>
│ └── ...
├── まとめ
│ ├── <○○について.md>
│ ├── <○○について.md>
│ ├── <○○について.md>
│ └── ...
├── レポート
│ ├── <レポート1.md>
│ ├── <レポート2.md>
│ ├── <レポート3.md>
│ └── ...
├── 日報
│ ├── <○月○日の日報.md>
│ ├── <○月○日の日報.md>
│ ├── <○月○日の日報.md>
│ └── ...
└── ブログ
├── <ブログ記事1.md>
├── <ブログ記事2.md>
├── <ブログ記事3.md>
└── ...
だいたい会社用のメモ、技術的なメモ等、メモも用途によってファイル分けしています。
さらにやってみた⊂(^ω^ )⊃
試しに、メモを一つ追加してみます。vscodeでプルしてきたファイルを開きます。
新しくtestファイルを作ります。
適当に中身を書きます。
mdファイルでAAを書くアホは私です。
Ctrl + K → Vでプレビューを表示できます。
案の定崩れる。
それでは早速gitにpushしましょう。Ctrl + Shift + @ でターミナルを開きます。
#ステージング $ git add . #コミット $ git push -m 'testの追加' #プッシュ $ git push
ブランチも特に切る必要はないので、これだけです。GitHubで確認してみましょう。
ちゃんと保存されてる!やったぜ。
ここでも崩れる。やはりAAは廃れる運命なのね...
皆さんもブログやメモをgitで管理してみてはいかがでしょうか。みやゆーでした。
携帯の辞書にマークダウン記法をインプットして楽に書きたい！
タブレットでマークダウンすっごい書きずらい...
圧倒的そば派、みやゆーです。
思いついたことがあればストックして、まとまったらQiitaとはてなブログに投稿する。エンジニアになってまだ間もないですが｢私、文系じゃね...？｣なんて思いながら楽しく記事を書いています。
なので外出先でもサクッとマークダウンでメモを取りたいものです。
でも、タブレットのキーボードでマークダウン書くの超めんどい。いやマジで。
例えば、私、iPhoneもiPadもキーボードはSimeji使ってるんですけど、文字を太字にする時はこんな感じ。
右下の.?123を押して、
左下の#+=押して、
あらかじめ****と打って、確定押して、
2文字戻して、文字を入れる。
いやバカめんどくさい。こんなしてる間にやる気は遥か彼方ですよ。
やってみた⊂(^ω^ )⊃
なので、simejiの辞書にマークダウン記法で使う用の言葉を入れてみました。
注意⚠
iOSアプリで調べれば、マークダウンで書けるメモ帳などは沢山あります。これは専用のアプリ以外でもマークダウンで書きたい！というみやゆーの自己満なのでご了承ください。
もっといい方法があったら是非コメントで教えてください。
入れてみた文字はこちら。
それぞれの言葉の先頭に、"ま"と入れてます。ボーダーだったら、｢まぼーだー｣といった感じです。
なんでこんなことしてるかっていうと、｢この書き方、名前なんだっけ？｣ってド忘れした時に、｢ま｣って打てばとりあえず予測変換で一覧が出てくるからです。マークダウンの書き方については、ググッてください。いっぱい出てきます。
実践⊂(^ω^ )⊃
早速使ってみました。試しに何か書いてみると...
めっちゃ使いやすいやんけ...
実践動画も載せようと思ったのですが、辞書に会社のメアドとか現住所とかも登録してて予測変換で普通に出ちゃうんです。個人情報公開おじさんになっちゃうので載せれませんでした。
編集めんどくさいけどそのうち実践動画も載せたいと思います。やれたらやる。
ただ、まだ慣れてないので、練習すればもっと使いやすく感じると思います。
これでマークダウンでメモも捗る！スタバでMacいじってる人の隣で、携帯でQiitaの記事書いちゃうもんね！
皆さんも携帯やタブレットの辞書にマークダウン記法を取り入れてみてはいかがでしょうか。
みやゆーでした。
