目次

• 本記事の目的
• 経緯
• やったこと
  • Vuetifyのテンプレをダウンロード
• テンプレ一覧
  • base
  • extended-toolbar
  • system-bar
  • Inbox
  • constrained
  • side-navigation
• 所感
• 参考文献

本記事の目的

Vuetifyの画面レイアウトテンプレの適用方法についてまとめる

経緯

Vueのアプリを作るにしても、画面レイアウトのテンプレを使いたい
＃「俺が作った最強の画面レイアウト！」ではなく、世界のデザイナーが考えたレイアウトを利用すべき、これは絶対に
↓
Vuetifyの画面レイアウトのテンプレ（wireframes）があるじゃん
↓
使おう

ということでそのやり方を本記事をまとめます

やったこと

Vuetifyのテンプレをダウンロード

• [Vuetify]>[wireframes]にサンプルがいくつかあるから好きなものをチョイス
  • Vuetify -wireframes-
• 今回はbaseってのを使っていく
  ＃base以外のテンプレ一覧はVuetifyのテンプレ一覧にまとめておく
• 所定の画面を見つけたらGitHubへ
• Rawで表示
• [名前を付けて保存]で任意の名前に変更して、自分が作っているアプリの.vueを置いている場所に保存
• Vueのvue createでデフォルトアプリから作ってる人ならsrc/components/配下ですかね
• HelloWorld.vueは使わないので消していいです
• App.vueを今作成したvueファイルを参照するように修正
• 白すぎるので分かりにくいけどnpm run serveで確認すると下図の感じ
  ＃Vuetifyのデモページはdarkモードだけど、自分のアプリはdarkモードに設定していないからデフォルトの白になってます
• 余談だけど、darkモードに変更するには、plugins/vuetify.jsのthemeのdarkプロパティをtrueにしてあげれば良い

  1 2 3 4 5

  export default new Vuetify({ theme: { dark: true } });

テンプレ一覧

以下にVuetifyのテンプレをまとめておく。毎回サイトまで行って確認してもいいけど一覧化されてる方がわかりやすいかなと。

base

demo

extended-toolbar

demo

system-bar

demo

Inbox

demo

constrained

demo

side-navigation

demo

所感

• Base.vueという名前のまま一旦画面確認しようとnpm run serveすると、eslintのvue/multi-word-component-namesが発生
• 「コンポーネントの名前は複数単語で命名せよ」というルール
• login.vue（ログイン画面）とかどうすんねん、と思ったけど、まぁ今回は1つの単語からなるコンポーネント名にしようとしていなかったので一旦このままでいく
• もし今後1つの単語で名付けたいコンポーネントが出てきたらその時は.eslintrc.jsに下記追記しよう

  1 2 3

  rules: { 'vue/multi-word-component-names': 'off', // 追加 },

• あと絶対darkモード切り替えの話を本記事でするべきではなかった、それは自分が一番分かってる
• なのでいつか外だししよう、いつかね

参考文献

• Vuetify -Wireframes-
• Vuetifyのテーマ(スタイル)変更について
• Component name “login” should always be multi-word

コメント・シェア

目次

• 本記事の目的
• 経緯
• やったこと
  • 個人トークン発行
  • 既存repoを新規repoにimport
• 所感
• 参考文献

本記事の目的

GitHubで新規リポジトリ作成時に既存リポジトリをインポートする方法をまとめる

経緯

vueのデフォルトアプリを作成したのでそれを活用したい
↓
vueのデフォルトアプリを保存するリポジトリ（以後repo）を新規repoにインポートしたい
↓
ということで本記事を書いています

やったこと

個人トークン発行

• privateの既存repoを新規repoにインポートする際にid/paswordで認証を求められる
• ただし、ログインパスワードでは認証が通らず、個人トークンが必要
• ということで事前に個人トークンを発行する
• GitHub右上ユーザアイコンメニューから[Settings]>[Develop Settings]>[Personal Access Tokens]>[Generate new token]
• noteは適当
  • 例：personal access token used for authentication when import existing repo to new repo.
    ＃長すぎるね
• 権限はrepoのfull controlをチェック
• 作ったら一度だけ表示されるのでコピーしてすぐにどこかに保存しておく、もう二度と現れないのでね
• ファーストタイム
• セカンドタイム

既存repoを新規repoにimport

• 既存repoのクローンURLをコピーしておく
  ＃後で使うのでね
• 新規repo作成ボタンから、Import a repositoryのリンク先へ
• クローンURL貼り付けて、repo name決めて、Privacy設定して次へ
  ＃話脱線するけど、ここでクローンURL入力する必要があるなら検索機能付けるべき。それか既存repo一覧のプルダウンにするとかね。なぜならこの画面遷移時にクローンURLをコピーしてきている人なんてほぼいないため。あと毎回コピーしに行くのも面倒だしね。
• idとpassword求められるので、メアド（もしくはユーザ名でも良いのかな）と先ほど取得した個人トークンを入力
• 完了

所感

• 詰まらずサクッと出来ました
• クローンURL入力のところはGitHubの良くないUIだと思うので自分がアプリ作るときは意識しよう

参考文献

• GitHub Doc -creating-a-personal-access-token-
• Qiita GitHub Import a repositoryでパスワードを何度も聞かれて進まない

コメント・シェア

目次

• 本記事の目的
• 経緯
• 利用ツール
• やったこと
  • GitHub上で新規リポジトリ作成
  • SourceTreeでのクローン
  • vue2.0のインストール
    • vue ver2のpush
  • vuetifyのインストール
    • vue ver2のpush
• 所感
• 参考文献

本記事の目的

vue-cliで作成するvue2.0およびvuetifyのデフォルトのアプリ作成方法についてまとめる

経緯

vueのアプリを散々作ってきたが、新規アプリ作成時は愚かにも毎回vue-cliから作成していたため、デフォルトアプリを作成し、githubに保管しておこうと思った。
その過程は整理していて損はないかなということで本記事にまとめる。まぁぐぐればいくらでも出るけども。

利用ツール

• VSCode 1.70.0
• SourceTree 3.4.9
• GitHub
• vue-cli 5.0.8
• command prompt（CMD）

やったこと

GitHub上で新規リポジトリ作成

• [GitHub]>[Repositories]>[New]から新規リポジトリ作成
• デフォルトアプリとするのでレポ名はvue-v2
• リポジトリは公開しても良かったが、これは公開、非公開というのを考えるのが面倒なのでとりあえずprivateに設定
• リポジトリ作成時にファイルがコミットされていあいのは個人的に気持ちが悪いのでREADMEファイル追加にチェック
• [Create repogitory]で完了

SourceTreeでのクローン

• [SourceTree]>[新規タブ]>[Clone]からGitHubのリポジトリをクローンする
• リポジトリのURLは[GitHub]>[vue-v2]>[Code]からコピペ
• 自フォルダはvue-v2を予め作成しておき、それを選択する
• 

vue2.0のインストール

• CMD上で対象フォルダからvue create vue-v2でvue version2.0のデフォルトアプリをインストールする
• ここで言ってるvue-v2はアプリ名なのでまぁ任意の名前で良い
• 「ファイル存在しているけど上書き（overwrite）する？それとも合体（merge）する？」と聞かれるのでmergeを選択
• VSCode上のターミナルから実行したかったけどEBUSY: resource busy or lockedのエラーが発生して出来なかった
  ＃これは恐らくVSCodeで当該フォルダを開いていたために発生していたので、別フォルダを開いてやれば問題ないと思うけど、わざわざ非対称フォルダを開いてそこのターミナルを開いて、、、という作業は無駄なのでCMDからやるのが速いと思う。
• 一応npm run serveでちゃんとアプリができてるか確認しておく

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

  C:\git>vue create vue-v2 Vue CLI v5.0.8 ? Target directory C:\git\vue-v2 already exists. Pick an action: Merge Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 2] babel, eslint) Vue CLI v5.0.8 ✨ Creating project in C:\git\vue-v2. ⚙️ Installing CLI plugins. This might take a while... npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. added 849 packages, and audited 850 packages in 51s 88 packages are looking for funding run `npm fund` for details found 0 vulnerabilities 🚀 Invoking generators... 📦 Installing additional dependencies... npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. added 85 packages, and audited 935 packages in 4s 99 packages are looking for funding run `npm fund` for details found 0 vulnerabilities ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project vue-v2. 👉 Get started with the following commands: $ cd vue-v2 $ npm run serve C:\git>

vue ver2のpush

• ここまでで一旦pushしておくことでvueのversion2.0をサクッと使えるようになった。
• もう二度とvue createしない。

vuetifyのインストール

• vue add vuetifyでvuetifyをインストールする
• ここからはVSCodeで実行してます
• presetを聞かれるからDefaultでOK
• こちらもnpm run serve起動で画面確認しておく
  ＃VSCode上の下半分にターミナルを左右計2つ表示させておき、1つはnpm run serve用、もう1つはnpm操作用（パッケージインストールとかね）で使うと効率良い気がする。まぁコード表示領域小さくなるのでトレードオフだが。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

PS C:\git\vue-v2> vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 8 packages, and audited 943 packages in 3s

100 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 13 packages, and audited 956 packages in 10s   

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

PS C:\git\vue-v2> 

vue ver2のpush

• これもpushしておけばvuetify適用にもう迷わない。

所感

• 簡単だしググれば分かることだけど改めて整理すると以外と分かってないことがあった
  ＃vue createの仕様とかね

参考文献

• Vuetify -installation-
• stackoverflow -Error: EBUSY: resource busy or locked, rmdir-

コメント・シェア

目次

• 本記事の目的
• 経緯
• やったこと
  • 割り当て
• 所感
• 参考文献

本記事の目的

Google Map API のロード回数制限設定方法についてまとめる。

経緯

Map サービス使うか
↓
クレカ登録必須の Google Map API 使うか
↓
従量課金こえーな。。。
↓
制限かけよう

ということで、Google Map API のロード制限をかけようと思いました。

やったこと

割り当て

[Google Map Platform]>[割り当て]を開く

注意書きの通りに対象 API を設定する。
Web アプリの JS で利用するので、 Google Map API 利用予定なのでMaps JavaScript APIを選択。

どれくらいの間隔でロード回数を制限するか、またその上限などを設定する。
Google Map API の無料枠上限は 28,500 回の呼び出しなので、単純に月の max 日数 31 で割ると 1 日に約 900（正確には 919.3548387096774）、1 分あたりの loads とその per ユーザは適当に決めた。試行段階なのでここでそんなこだわる必要はないかなと。個人利用だしね。

以上で完了。

所感

• 思った以上に簡単に設定できて拍子抜けした。
• こんな簡単に課金防止させてくれる Google さん本当に素晴らしいです、いつもお世話になります。
• まぁでもこの設定、どうせそんな頻繁にやらないだろうから簡単といえど記事化は有意義だと思う。
• まぁググれば出てくるんだろうけどね。アウトプットすれば覚えられるからね。

参考文献

• Google Maps Platform の API 使用の上限設定

コメント・シェア

目次

• 本記事の目的
• 経緯
• やったこと
  • 範囲
  • 金額
  • 操作
    • 通知の管理
• 所感
• 参考文献

本記事の目的

GCP の予算アラートの設定方法についてまとめる

経緯

ふとマップサービス使いたいなと思い、Google Map API よりもロード回数が多くてクレカ登録無しで利用でき信頼のおける Mapbox に頼ろうと思ったら、

クレカ登録必須になってました。まぁ、商売なので仕方ないです。
フリーミアムの本領発揮を見た気がします。

（それならGoogle Map APIと同じじゃんけ。）

と思ってOpen Street Mapにすっかなと思ったけど、それだとお店とかあんま出ないし、結局 Google Map Platform を利用することにしました。
＃まぁでも Open Street Map もいつかは利用してみても良いかもね。いつかね。

ただ GoogleMapPlatform でもクレカ登録は必須で、従量課金されちゃうリスクは回避したい、ということで予算アラートなるものを設定。

やったこと

• [GCP]>[予算とアラート]のページに遷移し、[予算を作成]をクリック
• 以下の項目を設定

範囲

• 名前、期間、プロジェクト、サービスを選択する
• 名前以外はとりあえずデフォルトでも OK
• 名前は自分が識別できればなんでも良いと思う。知らんけど。「とりあえず試しでやってみたいよ！」って人は「budget_alert_<ユーザ名>」とかで良いんじゃないかね。
• 利用サービス単位で分けたかったらサービス名とか付加すれば良いんじゃないかね。知らんけどね。

金額

• 月々の予算額を入力する
• 10 円で設定（なんとなく）
• 1 円から設定できるっぽい

操作

• 通知を出すためのルールを設定する
• 実値 or 予測で予算のどれくらいの割合に達するとアラートを出すか決められる
• 50、90、100%はデフォルト
• 予測の 10%を追加してみた

通知の管理

• 課金管理者とユーザへのメールアラート通知の設定を行う
• 予算へのリンク、pub/sub トピックとの接続については全然把握してないので設定しない

所感

これで毎日のメールチェックで高額課金を回避できる、と思う。
ただやはりこれはあくまでも通知なので、課金しそうになったらサービスを止める、みたいなところ徹底すべき。
それらに関しても記事にまとめておきたい。

参考文献

今回参考にさせてもらったのは下記です。

• 【クラウド破産の回避術】Google Cloud (GCP)の予算アラートで安全なクラウド運用を実現！

コメント・シェア

目次

• 本記事の目的
• サービス一覧
  • MariaDB
  • Redis
  • Spring Framework
  • Swift
  • Kotlin
  • Backlog
  • DocBase

本記事の目的

新しく知ったサービスを簡単にかつ雑にまとめる。正確性や具体性よりもまずは迅速に幅広いサービスを浅く理解することを目的とする。

サービス一覧

MariaDB

Web Site

• 概要
  • MySQL5.5 の派生として開発される RDBMS
  • MySQL は Oracle により管理されているが、こちらはオープンソース
  • MySQL の開発者と同じ Michael “Monty” Widenius
  • ドキュメントはここ
  • GPL ライセンス
  • MySQL と比べて若干処理が速い（未確認）
  • 使いやすい（理由不明）
  • ログイン／ログアウト、DB 作成や削除など基本的なコマンドは MySQL と同じ
• 所感
  • 名前は知っていたけど詳しく調べたことが無かったので恥を知れ
  • 正直使ってみないと比較出来ないので使う（いつか）
  • オープンソースで、かつ MySQL とほぼ同じコマンド操作可能なのでデータベーススペシャリスト試験の勉強でインストールしてみても良い気がする
• 参考
  • MariaDB とは？MariaDB の使い方や MySQL との違いを比較して解説！基本コマンドや互換性・移行方法も確認しよう
  • MariaDB vs MySQL: 徹底比較

Redis

Web Site

• 概要
  • Remote Dictionaly Server
  • ネットワーク接続された永続可能なインメモリデータベース（メモリ上で動く DB）
  • メモリとハードディスクの間を行き来する必要がないため高速
  • RDB の ACID 特性がないため高速
  • オープンソースな NoSQL
  • BSD ライセンス
• 所感
  • NoSQL ね。了解。
• 参考
  • 初心者による初心者のための Redis 解説
  • 【初心者向け】Redis って何？〜特徴から用途まで〜

Spring Framework

Web Site

• 概要
  • Java のアプリケーションフレームワークです。
  • 初期の J2EE 仕様(EJB2)の複雑さへの対応として 2003 年に登場し 2004 年にバージョン 1.0 がリリース
  • 近年の Java の Web アプリケーション開発におけるデファクト・スタンダードとなっている
  • Java 以外にも JVM 言語である Groovy や Kotlin もサポートしている
• 所感
  • Java 周りはあまり触っていないのでかなり抵抗がある
  • Kotlin と合わせて実践的に学習したい
• 参考
  • Spring Framework 入門！

Swift

Web Site

• 概要
  • iOS 向けアプリ開発のため Apple が作ったプログラミング言語
  • 簡単に使えてオープンソース
  • C 言語や Object-C の後継と位置づけられている
  • XCode の Playground ではｚ Read-Eval-Print-Loop といって評価された値が直ちに確認できるらしい
• 所感
  • iOS 開発やったことないのでこれも抵抗ある
  • あと mac ないので、把握しておくにとどめよう
• 参考
  • Swift - Apple（日本）
  • Swift 入門
  • Swift による iOS 開発入門

Kotlin

Web Site

• 概要
  • Kotlin は 2011 年に JetBrains 社が開発した、JVM（Java 仮想マシン）上で動作するオブジェクト指向のプログラミング言語
  • Java の記述を簡潔にしながら Java と 100%の互換性を維持しているため他の JVM 言語と異なり Java と Kotlin が混在するプログラムを作成できる
  • Java と比べてシンプルで分かりやすい
  • 産業利用向けの汎用言語として開発されているため不具合になるようなコードが書きづらい
• 所感
  • paiza や android 公式ページにも教材があるため比較的とっかかりやすい気がする
  • paiza の教材で少し学習してみたが、初歩の初歩段階では抵抗ない
• 参考
  • Kotlin とは？
  • Android Kotlin の基礎

Backlog

Web Site

• 概要
  • チームが協力しながら作業を進めるためのコラボレーション型プロジェクト管理ツール
  • 主な昨日は「プロジェクト管理」「タスク管理」「コラボ促進」
• 所感
  • 看板ボードやガントチャートなど利用できたり、またメンバのタスク完了とか見えたりするのでまぁ redmine の優秀バージョン的なやつ的な感じな気がする
• 参考
  • Backlog って何？

DocBase

DocBase

• 概要
  • オンラインで利用できるドキュメント作成ツール
  • 同時編集機能あり
  • markdown にも対応している
• 所感
  • ちょいすごい wiki だな
• 参考
  • DocBase 主な機能

コメント・シェア

• 本記事の目的
  • MITライセンス
  • GPLライセンス
  • BSDライセンス

本記事の目的

ソフトウェアのライセンスに関してまとめる

MITライセンス

hoge

GPLライセンス

hoge

BSDライセンス

hoge

コメント・シェア