「Vue.js」の記事 - Crieit

匿名掲示板作ってみた

2021-11-22T02:31:55+09:00

匿名掲示板を作り、アルファ版として公開してみました。
Crieitユーザーの皆さんにもぜひご意見いただきたいです。

　　　　　　　　　　 -‐ '´￣￣｀ヽ､へ　　　　／＼
　　　　　　　／　／" ｀ヽヽ　　￣￣￣￣　　 >
　　　　　　　　　//, '/　　　　ヽﾊ　､　ヽ￣￣＞／
　　　　　　　　〃 {{⌒　　　 ⌒ﾘ| ｌ │ i| ／　／
　　　　　　　　ﾚ!小ｌ●　　　 ● 从　|、i| /　
　　　　　　　　ヽ|l⊃　､,､,　⊂⊃　|ﾉ│|＿＿＿＿_／
　　　　 /⌒ヽ|ﾍ　　ゝ._）　　j /⌒i !
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│
.　　　　　　 /:::::/|　|　ヾ:::|三/::{ﾍ､∧ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|

その名も、「よろずネットワーク」です。
作った目的は、「世の中のトレンドがわかって」「自由でゆるくて」「ネットの面白かった時代を再現できるような」掲示板を作りたいと思ったことです。

よろずネットワーク

ちなみに、よろずネットワークではAAを綺麗に投稿できます。

コメント欄はこんな感じです。

スレにはyoutube動画やニコニコ動画も貼り付けできます。

技術スタック
サーバー：Conoha VPS(ubuntu 20.04LTS) ×複数
DB: Mariadb on Conoha
バックエンドAPI：Django Rest Framework
フロントエンド: Quasar（Nuxtjsみたいなやつ）でSSR(PWAﾓｰﾄﾞ)
ドメイン：google domain
CI/CD:github actions

毎日アバター画像が自動生成されたり、返信がくると通知が来たり、カテゴリごとに毎時ランキングを見られたりなど、掲示板として使いやすいものを意識して作ったので、是非遊びに来てみてください！

　よろずネットワーク

【VSCode】拡張機能一覧（主にWeb系システム開発用）

2021-03-28T18:20:44+09:00

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
（他のも混じっているけど）
（後で追加・変更・削除するかも）

VSCode

Bookmarks
　あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。
indent-rainbow
　インデントを色付きで表示してくれる。
Japanese Language Pack for Visual Studio Code
　VSCodeの日本語化。

HTML

Auto Close Tag
　自動的に閉じタグを追記してくれる。
Auto Rename Tag
　タグを変更すると、対応する閉じタグを自動的に変更してくれる。
HTML Snippets
　HTMLの予測変換を表示してくれる。
HTMLHint
　HTMLの文法チェックをしてくれる。

PHP(Laravel)

Bracket Pair Colorizer 2
　メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。
php cs fixer
　PHPソースを自動整形してくれる。
　※別途、「php-cf-fixer.phar」のインストールが必要。
PHP Debug
　PHPをステップ実行してデバッグできるようになる。
PHP IntelliSense
　PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
　Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

Laravel Blade formatter
　Laravelのbladeファイル用のフォーマッタ。
　blade独自のディレクティブもインデントしてくれる（これ重要）。

JavaScript(Node.js,Vue.js)

ESLint
　JavaScriptの構文チェックをリアルタイムで実行してくれる。
　※Vue.jsで使用するには設定が必要。
JavaScript (ES6) code snippets
　JavaScriptの予測変換を表示してくれる。
Vetur
　Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

IntelliSense for CSS class names in HTML
　CSSクラス名を入力するときに、入力補完してくれる。
SCSS Formatter
　SCSSコードを自動整形してくれる。

その他

Log File Highlighter
　ログファイルの内容を色付きで表示してくれる。
MySQL
　VSCodeでMySQLを使用可能にする。
Rainbow CSV
　CSVファイルをカラムごとに色分けして表示してくれる。
Regex Previewer
　正規表現の実行結果をプレビュー表示してくれる。
SFTP
　サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

【Vuex】別モジュールのステート、メソッド呼び出し

2020-10-19T18:06:59+09:00

const moduleA = {
  // ...
  actions: {
    testA(context) {
      // state
      console.log(context.rootState.moduleName.stateName)

      // mutation
      context.commit("moduleName/mutationName", "引数", {root: true});

      // action
      context.dispatch("moduleName/actionName", "引数",  {root: true});
  }
}

ハッカー専用パズルゲームを作ったので全てネタバレする

2020-09-24T10:25:23+09:00

当記事はハッカー専用パズルゲームを作ったので全てネタバレするのクロス投稿です

💰作ったもの💰

UNLOCK BANK

@銀行口座をHackしたくてウズウズしている皆さん「違法行為はしたくないけどハッキングはしたい…」そんな貴方の悩みを解決するゲームをご用意しました。このゲームでは何をやっても合法です。是非、不正ログインしてみてください💰https://t.co/LyIpYLCRrP #UNLOCK_BANK
— きんみ | ツイッター大喜利サイト🎍ついぎり🎍作りました🙄 (@_kinmi) September 21, 2020

仕様

Account Number(数字8桁) と Password(数字4桁) によるログイン認証
Account Number は全て存在する(8桁なので全口座数は1億口)
Password を3回間違えるとロック(再試行不可)される
[裏設定] 銀行口座を模している為、もちろんパスワードが流出したら他者もログイン可能

ユーザーはどんな攻撃手法を用いても良い。
最近話題の1段階認証を突破してみようというパズルゲーム。

システム構成

JSフレームワーク: Nuxt.js 2.14.5(Vue.js 2.x)
トランスパイル: TypeScript 4.0
CSSフレームワーク: TailwindCSS
ホスティング: Vercel

お馴染みの構成を選択したが、Vue.jsの使用については少し後悔している（後述）

以下ネタバレ

想定する解法

基本的には以下の2つと考えている。
- ☠️リバースブルートフォース攻撃☠️
件の金融事件で脚光を浴びた攻撃手法。
暗証番号の総当たり(ブルートフォース攻撃)は一般的なシステムだと試行回数に制限を設けているが、ユーザーIDの様な公開情報については秘匿性が低いため無制限に試行できるシステムが多い。そこを突いてパスワードは固定のままIDの方を総当たりするという攻撃。
特に当ゲームのような、認証情報に数値しか許容していないシステムだと少ない試行回数で突破できるため致命的な脆弱性となる。

😈リバースエンジニアリング😈
JavaScriptのみで構成している為、コードを解析してパスワードの取得が可能。
当初はNode.jsサーバー等を用意して認証処理を隠蔽するつもりだったがガチ攻撃された場合、サーバーか私の財布が死ぬと思い断念。
しかし「ハッカー専用」と銘打っている以上、コードを覗くだけで突破されては面白くないので悪足掻きとして難読化を施している。

仕組みについて

🔐パスワード生成

仕様として、口座番号とパスワードの紐付きを作らないといけない（パスワードが流出したら誰でもログインできるように）
最初は愚直に1億口座分のパスワードマッピングを定数で用意しようと考えた。
しかし上述のコードを隠蔽できない事情によりリテラル値で持つのは避けたかった為、下記のライブラリを採用した。
seedrandom.js
これを用いてシード値から再現性のある乱数を生成(※1)する。

下記のように口座番号をシード値とした乱数を生成した後、整形してパスワードとしている。

const seedrandom = require('seedrandom')

function authenticated(account: string, password: string): boolean {
  const rng = seedrandom(account)
  const _pass = String(Math.round(rng() * 10000)).padStart(4, '0')
  return _pass === password
}

これで口座番号とパスワードの紐付きを再現している。

seedrandom.jsの使用感

🙆‍♂️ 良かった所
- 直感的に使える
- 複数の乱数アルゴリズムに対応している
- Math.random()をラップできる為、テストにも使えそう
🙅‍♂️ 頑張って〜
- 型定義がない(2020/09現在、issueにて対応中)

個人的には「再現性のある乱数を生成する処理」というのはバーコードバトラーライクのゲームを作る際に重宝するので、有難いライブラリ。

状態管理, 認証処理

本筋と外れるが、クライアントで認証処理を行う為に口座番号と暗証番号をグローバル管理する必要があった。
Vuexはオーバースペックなので状態をInjectするプラグインを自作してstoreとして使用した。

~/plugins/auth.ts

import Vue from 'vue'
import { Plugin } from '@nuxt/types'
import { Seedrandom } from '../types/seedrandom'
const seedrandom = require('seedrandom') as Seedrandom

type InjectTypeAuth = {
  /**
   * 口座番号
   */
  accountNumber: string
  /**
   * 暗証番号
   */
  password: string
  /**
   * 認証処理
   * seedから4桁の乱数(先頭0埋め)を生成し、passwordとの比較結果を返却する
   * @param {string} seed シード値となる値
   * @param {string} password パスワード
   */
  authenticated(seed: string, password: string): boolean
}

declare module '@nuxt/types' {
  interface Context {
    $auth: InjectTypeAuth
  }
  interface NuxtAppOptions {
    $auth: InjectTypeAuth
  }
}
declare module 'vue/types/vue' {
  interface Vue {
    $auth: InjectTypeAuth
  }
}

type State = {
  accountNumber: string
  password: string
}

/**********************************************
 * 認証情報プラグイン
 * @param {Context} ctx
 * @param {(key: string, value: any) => void} inject
 */
const AuthPlugin: Plugin = (_ctx, inject) => {
  /**
   * Observable properties
   */
  const state = Vue.observable({
    accountNumber: '',
    password: '',
  } as State)

  function authenticated(seed: string, password: string): boolean {
    const rng = seedrandom(seed)
    const _pass = String(Math.round(rng() * 10000)).padStart(4, '0')
    if (_pass === password) state.password = _pass
    return _pass === password
  }

  /**
   * Injection
   */
  inject('auth', {
    get accountNumber() {
      return state.accountNumber
    },
    set accountNumber(accountNumber: string) {
      state.accountNumber = accountNumber
    },
    get password() {
      return state.password
    },
    authenticated,
  })
}
export default AuthPlugin

※ 実際の乱数生成処理はもう少しノイズを入れてるので、このまま動かしても同じパスワードは生成されません

このauthenticatedをEnterボタン押下時と、直アクセスを防ぐ目的でログイン後ページ内のvalidate()hookでも呼び出して認証処理としている。

⚠️注意
当然ですが、フロントエンドでパスワードの一致チェック等の認証処理を行ってはいけません。

Vue3のRCが外れて正式リリースとなったが、Reactivity API等を活用したVuex(ver 5)のリリースはまだ先の様なので暫く状態管理はこの手法に落ち着きそう。

攻撃方法の紹介

以上を踏まえ、解法の一つであるリバースブルートフォース攻撃の実施方法を紹介していく。
尚、当ゲームでは外部からブラウザ操作しやすいように主要な要素に対してid属性を付与している。

前提知識: JavaScript の場合

「システム構成」の節でも触れたが、Vue.jsの採用を後悔したのはここ。

システムがHTML＋PureJSの構成であれば、ブラウザの開発者コンソールから下記の様に実行して入力値を動的に与える事が可能。

const digit1 = document.getElementById('digit1')
digit1.value = "1"

これは一般的な方法だし、私も当初このやり方を想定していた。
しかしVue.jsの場合、inputイベントを検知してVueインスタンス内に保有するデータを更新する。
直接input要素のvalue値を書き換えてもイベントは発火せず、データは更新されない。
この挙動を想定しておらず、ユーザーに無駄なハードルを与えることとなってしまった。

ではどうするのか。
当ゲームには数値をカウントアップ/カウントダウンするボタンを実装している。

金融システムって誰得UI多いよな という遊び心で実装したボタンだが、Vue内のデータを書き換えるイベントに直結している。
このボタンをプログラムからクリックすることが出来れば口座番号入力の自動化が可能となる。

ここから先の解説は、既にUNLOCK成功された@yoneappさんが記事を書かれている為、そちらに任せることとする。
リバースブルートフォース攻撃を使ってUNLOCK BANKの口座に不正ログインして優勝する(Zenn)
（改めて解説記事の執筆ありがとうございます🙇‍♂️）

前提知識: Vue.js の場合

Vue.jsには vue-devtools というデバッグ用のブラウザ拡張が存在する。
これを使えばコンポーネント構成を覗きつつ、各種データの書き換えやイベント発火が可能となるが通常はProduction環境で開けない。
しかし、開発者ツールを使いこれをこじ開ける方法がある。

本番公開されているサイトで Vue devtools を使う裏技(Qiita)

厳密にはソースの難読化を施してるのため上記記事と全く同じではないが、ソースを検索すればdevtoolというキーワードは見つかるはず。
あとはその後ろにブレークポイントを張り、_0x1bd719.devtools = true を実行すれば開発者ツールを開けることが可能。

図の状態(Devtoolsでコンポーネントを選択した状態)だと、開発者コンソール上で$vm0というオブジェクトが使用出来る。これは選択したコンポーネントのVueインスタンスであり、コンポーネント内に存在するデータやメソッドが全て内包されている。
あとはそこからアタリを付けて、自動化プログラムを組めば良い。
実際には下記をイジれば入力操作の自動化が可能となる。

$vm0.accountNumbers // 口座番号(1桁ずつ格納した配列)
$vm0.password // パスワード
$vm0.enter() // Enterボタン押下時の処理を実行

⚠️注意
初めてこれ(Productionでdevtoolsが使えること)を知った方はセキュリティ面に不安を覚えるかもしれませんが、それはお門違いです。
フロントエンドで保持するデータはユーザーから自由に改ざんされる前提であるべきです。

前提知識: Nuxt.js の場合

Nuxt.jsで作られたアプリケーションはwindow直下に$nuxtというオブジェクトが作られる。
そこには全ての情報が含まれており、上記のようにDevtoolsを開かずとも開発者コンソールからデータの書き換えやメソッドの実行が可能。
しかし内包する情報量が膨大な為、開発者ではない第三者が操作したい対象を探すのは一苦労かもしれない。
ちなみに当ゲームでは下記が自動化に必要な対象となる。

window.$nuxt.$children[1].$children[0].$children[0].accountNumbers
window.$nuxt.$children[1].$children[0].$children[0].password
window.$nuxt.$children[1].$children[0].$children[0].enter()

その他の手法

Selenium や Puppeteer 等を用いたブラウザ操作の自動化があげられる。
今のところ、これらを使ってUNLOCKしたという報告は観測していない。ブラウザの開発者ツールが万能すぎる。

⚠️注意
悪意が無くともサーバーに高負荷をかける行為は法律により罰せられる可能性があります。
しかし、当ゲームで行う分には問題ありません。存分に攻撃してください。

更にネタバレ

もしproduction環境でログイン後のページを確認する必要が出た場合を考慮して、
- Account Number: 1145-1419
- Password: 1919

と入力したら開発コンソールに上記口座のパスワードが出力されるようになっている。
攻撃するのは面倒くさいけどログインしてみたい、という方はどうぞ。

確率について

数値4桁のパスワードというのは 0000 ~ 9999 の1万パターンしかない。
パスワードを固定にして、口座番号を総当たりした場合の確率は下記で求められる。

1 - ( 9999 / 10000 )^x
x=試行回数

(間違ってたらご指摘ください)
確率を表にするとこうなる。

試行回数	HITする確率
3回	0.03%未満
10回	約0.1%
100回	約1%
1,000回	約10%
10,000回	約63%
100,000回	約99%

つまり、口座番号8桁(1億パターン)全て試行せずとも、10万回程度で1口座はUNLOCKできてしまう。
下5桁総当たりすればいい計算で、実際にTwitterでUNLOCKされた方の反応も「思ったより早かった」という声が多かった。
当ゲームはパスワードを乱数によって生成しているが、これが本当の銀行口座の場合、パスワードの偏りが生じるはずなので更にUNLOCKは容易となるだろう。

おわり

ネタのつもりで作ったんですが思いのほか反響があって、解説記事を書いて頂いたり、難読化をデコードしてリバースエンジニアリングまでやって下さってる方もいて、個人開発冥利に尽きるなと思いました。
他にも「こんなやり方あるよ」という方がいましたらご連絡ください。

注釈

※1: JavaScriptにはシード値から乱数を生成する機能が備わっていない

Nuxt.jsにlintを導入してみた

2020-09-07T14:22:14+09:00

動機

以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。

その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)

アドバイスなどは大歓迎です。

知識が増えたら随時更新します。

https://blog.taka1156.site

https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中

↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)

環境

mac OS Catalina
Node.js v12.16.1
npm v6.14.3
yarn v1.22.0

手順

これらをインストール
- eslint関連
  yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint
- stylelint関連
  yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier
- prettier
  yarn add prettier
※ なんでprettierを入れたか
eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
(逆にprettierは細かい命名規則や処理に関するエラーは出さない?)

設定ファイルを書く

.eslintrc.json

{
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier/vue"
    ],
    "plugins": [
        "vue"
    ],
    "env": {
        "jest": true,
        "browser": true,
        "es6": true,
        "node": true
    },
    "globals": {},
    "rules": {
        "camelcase": [2,{"properties": "always"}],
        "quotes": [2,"single", { "avoidEscape": true } ],
        "eqeqeq": [2, "always", {"null": "ignore"}],
        "prefer-const": 2,
        "vue/component-name-in-template-casing": "off",
        "vue/no-v-html": "off"
    }
}

.stylelintrc.json

{
    "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
    "rules": {
        "color-no-invalid-hex": true,
        "color-hex-case": "lower",
        "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
    }
}

.eslintignore, .stylelintignore
※ storybook-static、coverage は storybookやjestを導入していると生成されるファイル

# ビルドファイル
dist
storybook-static
coverage

# 設定、モジュール
.nuxt
.storybook
node_modules

.prtteirrc.json

{
    "printWidth": 85,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": true,
    "arrowParens": "avoid"
}

scriptsを追加

"scripts": {
    "lint-js": "eslint --ext .js,.vue .",
    "lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
    "lint-js:fix": "eslint --ext .js,.vue . --fix",
    "lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
    "lint:check": "yarn lint-js & yarn lint-style",
    "lint:fix": "yarn lint-js && yarn lint-style",
    ...
}

お好みでvscode設定を追加
保存時に勝手にlint処理が走るようになるので便利
(vscode/setting.jsonに記述)

{
    "comments": "保存時にeslint、stylelintを自動実行",
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
}

まとめ

eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。

また、eslintルールについても、気になるものがあればまとめてみようと思います。

有料のWebサービスをリリースするまでに取り組んだこと・知見をまとめました【個人開発】

2020-05-17T06:58:19+09:00

1. 作ったサービス

ツイ消し職人 | ツイ消しツールの決定版！
https://twikeshi.net/

ツイ消しツールの決定版！
ツイ消し職人は今までのツイートを全消しできる「ツイート一括削除ツール」です。
3200件を超える大量のツイートを全て削除できます。
無料のツールなどでうまく削除できなかった方は是非ご利用ください。
既存のフォロワーをそのままに、Twitterをやり直すことができます。

2. 自己紹介

こんにちは、ひろと申します。
現在はフリーランスエンジニアとして活動しています。

3. なぜ作ったのか

私は2020年4月にフリーランスとして独立しました。
それに伴い、学生時代から使っていたTwitterアカウントの運用を変えようと思い、今までのツイートを削除してやり直すことにしました。
アカウントを作り直す選択肢もあったのですが、フォロワーを減らしたくなかったため、ツイ消しの道を選びました。
調べてみるとツイートの一括削除ツールがいくつか見つかったため、それを使ってツイ消しをすることにしました。

しかし、既存のツールではツイートの削除ができませんでした。
私の今までのツイート数は19万件で、Twitterアーカイブをダウンロードしたところzipファイルのサイズは31GB。
私がツイ廃だったのが全ての原因です。

普通のツイ消しサービスは、API制限の関係で3,200ツイートが削除の上限となってしまいます。私の19万ツイートに対してはあまりに無力すぎました。

もちろん、API制限を回避するためにTwitterアーカイブをアップロードして削除を行うサービスもあります。
しかし、31GBのzipファイルを送りつけると必ず500エラーが返ってきてしまい、私の試した範囲では、まともに動くものはありませんでした。海外の有料サービスでさえダメでした。(具体的なサービス名は出しませんが、日本円で1,600円払いました。手痛い出費です)

そこで私は、「ツイ廃でもツイートを削除できるサービス」が必要だと思い、ツイ消し職人の開発を始めました。

4. リリースするまでに取り組んだこと

取り組んだ全てのことを記載しています。

一. サービスの命名

最初は「ツイートクリーナー」という名前にしていました。
開発中盤に「ツイ消し職人」という名前を思いつき、変更しました。
ランサーズなどで名前を募集するのも良いと思います。

二. ドメインの取得

ムームードメインでtwikeshi.netを取得しました。
欲しいドメインが埋まっている場合は、twikeshi-app.netのように工夫するのもオススメです。

三. 商標登録

登録しました。
今はToreruなどの便利なサービスがあり、ものすごく簡単に出願できます。
48,000円で5年間有効になります。
商標権の取る取らないを選択するのは自由ですが、後から商標を第三者に取得されて商標権の侵害警告を受けた場合、サービス名やドメインを変えなければならないリスクがあることは認識しておく必要があります。

四. プライシング

海外の同じようなサービスを参考に値付けを行いました。
現在は700円(税込)で提供しています。

その後、プライシングに関する本を3冊読んで(この本とこの本とこの本)考え方が変わったので、そのうち値上げするかもしれません。

間違っても、本来ターゲットでない人を取り込むために値下げするのはやめてください。
例えば、私は友人達に「ツイ消し職人の適正価格はいくらだと思う？」と質問をすると、2人が「100円」と答えました。
しかし、断言しますが彼らは100円でも絶対に利用しません。何故ならば、彼らはこのツールの価値を理解していないからです。ツイ消しをしようと思ったことがない人に相場感を聞いても意味がありません。
逆に、本っっ当にツイ消しをしたくて困っている人からすれば、このツールが例え1万円でも喜んでお金を払うはずです。

五. 技術選定

1. バックエンド

バックエンドはLaravelで開発しました。
Laravelはコードもドキュメントも読みやすいため、使っていて楽しいですね。

役割	技術
PHPフレームワーク	Laravel
データベース	MySQL
Twitterログイン	Laravel Socialite
Twitter APIライブラリ	TwitterOAuth
メール送信	SendGrid

2. フロントエンド

CSSフレームワークにはMaterializeを採用しました。初めて使ったのですが、ドキュメントが分かりやすく情報量も多いのでオススメです。
今回はフロントで処理をする必要が無かったので、基本的にJavaScriptは使っていません。ファイルアップロードの画面は、アニメーションを付けるためにVue.jsを使いました。Vue.jsは以前から使っていたので、特に困ることはありませんでした。
次はNuxt.jsに挑戦するために勉強中です。

役割	技術
CSSフレームワーク	Materialize
JavaScriptフレームワーク	Vue.js
決済	Stripe Checkout

3. インフラ

サーバーにはレンタルサーバーを採用しています。

役割	技術
レンタルサーバー	エックスサーバー

Heroku / VPS / AWS EC2 / GCP App Engineなどの選択肢もありましたが、主にコストと運用の観点から除外しました。個人開発は自分でインフラを選べるのが良いですね。
今後もどんどんサービスを作っていく予定なので、サーバー費がかさむのはイヤだし、サービスを作る度に環境を構築するのも避けたかったのです。

もちろん要件によってはレンタルサーバーが使えない場合もあります(ミドルウェアの設定変更や追加インストールが必要な場合など)。

例えば、FFmpegを使って動画のエンコード等を行う場合です。
まずrootが使えないのでインストールができません。自前でmakeして無理やり手動インストールすることも不可能ではなさそうですが、なるべく避けたいところです。また、動画のエンコード処理はCPUを食うので、運営に利用を停止される可能性があります。

このようにrootユーザーが使えないと困る場合は、状況に応じて各サービスを比較検討しましょう。
サーバーはHerokuだけどストレージにはS3を使って、DBにはCloud SQLを使うといったトリッキーなこともできます。柔軟な発想で最適な構成を作りましょう。

参考に、私の考える主なインフラサービスのメリット・デメリットをまとめておきます。
※App Engineは詳しくないので簡易的な記載になってます

インフラサービス	メリット	デメリット
VPS(IaaS)	・安い・root使える	・借りる度にお金がかさむ・環境構築や設定が必要
EC2(IaaS)	・root使える・マイクロサービス沢山ある	・高い・借りる度にお金がかさむ・環境構築や設定が必要
App Engine(PaaS)	・環境構築不要	・高い・借りる度にお金がかさむ
Heroku(PaaS)	・安い・環境構築不要	・借りる度にお金がかさむ・30秒タイムアウト辛い
レンタルサーバー(ほぼPaaS)	・安い・1台でアプリ沢山動かせる・環境構築ほぼ不要	・root使えない

六. 設計

小規模なサービスなので、ここにはほぼ時間をかけていません。
ワイヤーフレームなどは作らず、実際に画面をコーディングしてレイアウトを決めました。
DB設計もパパッと考えて終わり。
開発の中で必要になったときに都度、テーブルやカラム・画面を増やしていきました。
サービスによっては色々な機能を思いつくと思いますが、まずはスモールスタートでリリースすることをゴールにしましょう。

七. 開発

一番時間をかけたのはこの工程です。
他の仕事が並行していたため正確ではありませんが、全体で2〜3週間はかかったと思います。
伝えたい情報がある場合はコメントを書いています。
有料サービスのみ必要になる項目には「☆」を付けています。

1. サービスの機能開発

一. Twitterログイン

ツイ消し職人では、決済完了時とツイート削除完了時に確認メールを送信しています。
そのため、Twitter AppのAdditional permissionsとして、Request email addressにチェックを入れています。

二. ☆決済

Stripe Checkoutは神。
JavaScriptをちょろっと書くだけで決済を提供できます。返金もボタンポチるだけです。
週次で売上を銀行口座に入金してくれるところも良いですね。至れり尽くせり。
ツイ消し職人はクレジットカード、Google Pay、Apple Payに対応しています。

三. アーカイブアップロード

Twitterが生成したデータを読み取らないといけないので、アーカイブのどのファイルに何の情報があるのかを全て自分で調べました。
そして、ツイートの削除に本当に必要なファイルだけをアップロードさせることで、ファイルサイズを31GB→200MBまで減らすことができました。

アーカイブからはツイートの削除に必要な情報を正規表現で抽出する必要があります。
最初は、JavaScriptを使いフロント側で情報を抽出し、サーバーには最低限のデータだけ送るようにする予定だったのですが、少し時間がかかりそうだったので諦めました。

FileReader.readAsText()に100MBのファイルを食わせるとクラッシュしてしまうことが判明し、ファイルをチャンクして処理する必要が出てきたためです。
コンソールにエラーは出力されず、サイレントでクラッシュするので問題の特定に時間がかかりました。
サーバ側で抽出処理をやっても特に問題はないので、サーバ側で処理するようにしました。

四. ツイート削除

ノーコメント

五. 非同期処理

アップロードされてそのままツイートの削除を行うと、画面がタイムアウトしてしまいます。
そのため削除処理はLaravelのキューを使って非同期にしています。
失敗時の再実行もできるようになるので便利ですね。

六. メール送信

必ずユーザーに到達するようにSendGridを使っています。
返信や問い合わせを受けるためにはメールサーバーの設定が必要なので注意してください。
サーバーが用意できない場合は、G Suiteなどのホスティングサービスを利用しましょう。

七. ログ出力 + Slack通知

本番での例外発生時にはSlackにスタックトレースを飛ばすようにしています。
他にも、ツイート削除処理成功時など、正常系でも重要なものはSlackに通知を飛ばしてます。

ログは、出せる項目をなるべく出すようにしています。
Laravelのログ出力について記事書いてるので興味あったら読んでください↓
【Laravel】ログのフォーマットを変更してIPアドレスやユーザー名などを出力する

2. リリース準備

一. LP(トップページ)作成

ユーザーに効果的に訴求できる文言を考える必要があります。
デザイナーの人は腕の見せどころだと思います。
文字や画像・アニメーションを使っていい感じのレイアウトにしましょう。

ペライチなどのツールを使っても良いと思います。
コンバージョンに直結するので、一番力を入れるべき部分です。外注も考えましょう。

ツイ消し職人のようなツール系のサービスの場合は、そんなに凝らなくても結構コンバージョンします。

二. 利用規約・プライバシーポリシーの制定

この本が大変参考になりました。コピペできるひな形データも付いてくるのでオススメです。

三. ☆特定商取引法に基づく表示の作成

同上。
有料サービスの場合は必須です。
本名や住所、電話番号を晒さないといけないので、ここが一番の難関ではないでしょうか。
私の場合、IP電話アプリ(SMARTalk)を使い050から始まる電話番号を載せています。

四. Googleアナリティクス・Search Console設定

ノーコメント

五. meta description設定

Googleの検索結果でタイトルとともに出るやつです。
meta keywordは不要です。

六. ファビコン設定

GIMPで作りました。
サービスのロゴがある場合はファビコンにも活かせます。

七. OGP設定

GIMPで作りました。
OGP画像を動的に生成するサービスでは、トップページ用の画像を同じ方法で作るのも良いかも。
CTRに直結するので、ここも外注を検討しましょう。

八. サイトマップ設定

Search Consoleで送信します。
sitemap.xml Editorを使うと簡単に作成できます。
サイトが新しく、外部からのリンクが少ない場合はあったほうが良いみたいです。

九. SNSシェアボタンの設置

↓こういうのです。

ユーザーに拡散してもらえる仕組みを作っておくことは重要です。

十. お問い合わせフォームの設置

自分で作るのがめんどくさい場合は、Googleフォームやformrunなどを活用しましょう。
お問い合わせフォームの代わりに、チャットサポートツールを入れるのもオススメです。

3. リリース

一. デプロイ

Laravel + レンタルサーバーの場合はgit pullすればほぼ終わりです。
あとは.env書いてマイグレーションしてキャッシュ系のコマンドを叩くだけです。
もちろん、GitHub ActionsなどのCIを設定するのも良いと思います。

私の場合は、以下のようなデプロイスクリプトを用意しています。

#!/bin/sh

git pull

composer install --optimize-autoloader --no-dev

php artisan config:cache

php artisan view:cache

php artisan route:cache

二. テスト

本番環境で全ての機能がうまく動くことを確認しました。
中規模〜大規模サービスの場合は、検証環境の用意とテスト自動化がされていないと運用がしんどくなります。

八. リリース後

1. 知り合い・友人への拡散

LINE, Twitter, Facebookなどで拡散して使ってもらいましょう。

2. プレスリリースを出す

お金があればPR TIMESなどの有名サイトに出すのがオススメです。
(もしくは、法人ならスタートアップチャレンジの条件を満たすと無料になります)

私はお金がなかったので、valuepressのフリープランで配信しました。
配信は無料ですが、プレスリリースの内容を修正する場合はお金がかかるので気を付けましょう。
3,200件を超えるツイートを一括削除できるツイ消しサービス「ツイ消し職人」を提供開始

3. アプリ紹介サイトに登録

私の場合、AnyMakeやmakepost、Eggineer、Applishowを活用しています。

4. 新聞の広告枠に出稿する

リリース直後にスポーツ新聞の方から電話があり、新聞とサイトに広告を載せないかと打診がありました。
条件が合わなかったためお断りしましたが、人によっては選択肢になり得ると思います。

5. アフィリエイト広告に出稿する

検討しましたが、結局使いませんでした。
お金がある場合は、A8.netなどの大手ASPを使うのが良いと思います。
マネートラックならば初期費用0円・月額費用0円で始められるようです。

6. SNS広告に出稿する

以前利用していました。
私の場合はTwitterユーザーをターゲットにしたサービスなので、Twitter広告と相性が良いです。
月予算は安めでもかなりコンバージョンに繋がったので、広告費は普通に回収できています。

7. リスティング広告に出稿する

以前利用していました。
Twitter広告よりも予算が必要で効果が薄かったため、すぐにやめました。

8. 保守開発

本番環境でのエラーを監視し、新しく発現したバグがあれば修正しましょう。
手元で再現しないエラーは...ユーザー問い合わせを待つしか無い。。

もちろん、機能追加などサービス改善のための開発は怠らないようにしましょう。
大幅リニューアルや作り直しなどの選択肢もあります。

9. ブログなどでの発信

この記事のことですね。
Qiita, Crieit, Zenn, Note, ブログなどの選択肢があります。
サービスを知ってもらうだけでなく、転職活動などでも役に立ちます。

Noteに記事を投稿しているのでこちらも参考にしてください。
たった2週間で作ったWebサービスで月11万円の売上を達成した話

独学初心者がGoogle風の書籍検索サービスを作ってみた【個人開発】

2020-04-14T13:52:22+09:00

独学でプログラミングを学習しています。
「作りながら学ぶのがいい」ということでGoogle風の技術書検索サービスを開発しました。

アイデア的に似ているサービスはありますが、自分が欲しいものとは少し違っていたので作りました。

初学者なりに試行錯誤したので、アプリの仕組みや作った方法をまとめます。

プログラミング学習中の人や個人開発を考えている人のモチベUPに貢献できたらいいなと思います。

作ったサービス「技術書検索サービス」

作ったのは「Geekle（ギークル）」という技術書検索サービス。

-> Geekle（ギークル） | 技術書検索サービス

サービス概要

Geekleは、評価の高い技術書を検索できるサービスです。

例えば、「Pythonを勉強したい！どの書籍がいんだろうか！」ってなったときに「Python」というキーワード（キーワードはQiitaのタグにあるものに限定されます：サジェストで表示される）で検索すると、

その技術キーワードに対する「評価の高い書籍リスト」が検索結果として表示されます。検索結果の並びはQiitaでの言及記事数をはじめ、複数の要素から総合的に算出。

学びたい技術がある時に購入候補となる書籍を絞り込むのに使えます！

開発の動機

プログラミングを学習する中で、たくさんの書籍を購入してきました。

そのときに候補となる本をピックアップして、一つずつ評判を確認し、本屋で立ち読みして買ってたので、「○○という技術を学ぼう→その技術の評判の良い技術書がすぐわかるサービスがあったらなー」と思っていました。

Qiita上の書籍情報を見られるサービスはすでにいくつもありますが、既存のモノは「Qiita上の書籍情報を可視化すると面白い」というコンセプトであるため、キーワード（タグ）に対して関連性が薄い書籍も多く表示される仕様となっていました（それが書籍との偶発的な出会いになって面白いというコンセプト）。

自分の希望は「今、学ぶのに適した書籍の候補」をストレートに見つけられるサービスだったので、関連性の薄い書籍はない方がよかったし、なるべく情報が新しい評価の高い書籍が表示されて欲しかった。

そこで、自分の希望を実現したモノを作ってみました。

どう作ったか

使った技術とか

アプリ：Laravel + Vue.js
バッチ（DB作成）：生PHP
インフラ：AWS（EC2・RDS・Rout53・ALB）
制作期間：4ヶ月ちょっと

裏側の仕組みをどう作ったのか解説します。

自分なりに色々と考えて作りましたが、独学初心者なので生暖かく読んでください...。あと、「もっとこうすればいいのに！」とかあればアドバイスして頂けると嬉しいです。

書籍DBについて

書籍のDBは、QiitaのAPIで記事データを取得して、書籍へのリンクらしきURLを解析し、そこから書籍の識別番号(ISBN・ASIN)を抽出後、番号を使ってopneBDやGoogleBookApiなどで書籍データを取得して構築しています。

これらの方法は

の記事を参考にさせていただきました。

独学の自分がサービス開発できたのはこういったノウハウが公開・共有されていたからです。先人の皆様ありがとうございます。僕もこの記事でやったことを共有します(￣^￣)ゞ

書籍の順位付けを工夫

Qiitaの記事についているタグをそのまま書籍のタグとして、Qiitaで言及されている記事数をカウントすることでタグごとに書籍の順位づけを行っています。

しかし、Qiitaの記事数のみで順位付けを行うと、普遍的な名著（リーダブルコードなど）が多くのタグで上位を独占してしまるというデメリットがありました。

検索ワードが「PHP」でも「Ruby」でもリーダブルコードが一番上になってしまう。

また、出版から時間が経過している書籍の方が言及される記事数が多く、新しい書籍は言及される記事数が少ないため、新しい良本が上位に表示できなかったり、PHPとLaravelのように「言語」と「フレームワーク」の検索結果がほぼ同じになるという問題点がありました。

僕が作りたいのは「学習したい技術ごとに今選ぶべき良書がわかるサービス」だったため、なるべく情報の新しい良本が上位表示されて欲しいし、PHPなら生PHPの書籍が上位、LaravelならLaravelの書籍が上位という結果になって欲しかった。

そこで、Qiitaの記事数に加えて

・検索ワード(タグ）の文字が書籍のタイトルに含まれる場合はプラス点
・出版日時が古くなればなるほどマイナス点

などを加えて傾斜配点をかける事で検索結果を調整しています。

試行錯誤の結果、悪くない結果がでるようになりました。

(言語とフレームワークも異なる検索結果になってる)

今後も改良して精度を上げていきます。

デザインとか

デザインは、最初にカラー（紫・黒・白）を決めました。

柱となる色は紫をにしたのは、「プログラミングって現在の魔法っぽい→魔法は紫っぽい」という発想から。技術書を読んで勉強することを魔法を学んでる感じだと捉えると学習が楽しくなる気がします（中二心）。

レイアウトは、たくさんのサービスを並べて特徴を抽象化し、取り入れていくというやり方で考えました。

具体的に説明すると、書籍検索サービスは画像付きでコンテンツを表示するサービスになるよね→Amazonプライムビデオやネットフリックスなど画像付きでコンテンツを大量に並べてる有名サイトをいくつもみる→あ、横並びにしてスライドするUIがデフォルトっぽいなー（これが抽象化）→自分のサービスに取り入れるという流れ。

「基本となっている型を探す」という感じ。

今後の改良/グロース

やりたいことはたくさんあります。

・SEOに強い構成にする
・SPA化
・レビューを集める仕組み構築
・技術書のセール情報の掲載

などなど。自分の技術力向上やサービスグロースの実験の場としても使っていきたい。

振り返り

当初、2ヶ月くらいで作れるだろうと思っていたのですが、DBを作るのに時間がかかってしまい、想定の倍以上の時間がかかってしまいました。

開発中はわからないことだらけで苦しい時もりましたが、やっぱりプログラミングは楽しいですね！今回のアプリ開発を通してエンジニアになりたいという気持ちがより強くなりました。

もっともっと勉強して色々なアプリ作っていきたいです。

ここまで読んでくれた方ありがとうございます！
ぜひ試しに使ってみてください(≧∀≦)

Geekle（ギークル） | 技術書検索サービス

CodePenでVue.jsの最小アプリケーションを作成する

2020-03-01T08:40:20+09:00

CodePenを使うとブラウザで直接JavaScriptのコードを書いてアプリケーションを動かすことが出来ます。サーバーも不要ですし、ちょっとしたアプリケーションであればこれだけでも簡単に作成＆公開が可能です。

CodePenのトップページにCREATEメニューがあります。そちらでPenをクリックして新規作成します。

するとPenの設定画面が開きます。ここのJSメニューで、JavaScriptのライブラリなどのCDNを追加することが出来ます。例えば今回はVueで検索してVue.jsを追加します。

同様にCSSのフレームワークなども追加できます。設定できたら「Save & Close」で確定します。

あとは実際にHTMLとJavaScriptを書いていきます。ひとまずロジックもなにもない、単なる最小の表示を作ってちゃんと動作しているか確かめます。

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  }
})


  {{ count }}

これで下記のようにcountの値が表示されているので問題なさそうです。

次に値をかえるロジックを入れていきます。

new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count = this.count + 1
    }
  }
})


  {{ count }}

ボタンを押すと値が増えていくロジックを追加することが出来ました。

実際に試してみることも出来ます。

https://codepen.io/dala00/pen/oNXwzrx

あとはCrieitやQiitaなどは埋め込みも可能です。

CodePenの埋め込み

See the Pen Vue.js simplest application by dala00 (@dala00) on CodePen.

Vue.js+Netlifyで最小のアプリを作る

2020-02-06T23:52:50+09:00

Vue.jsで最小のアプリケーションを作成して、Netlifyにデプロイするまでを解説します。1週間以内くらいで1ページだけの簡単なWebアプリケーションを作ろう、と思ったらこれくらいで十分可能です。複雑なアプリケーションにしなければデータベースもブラウザ上のLocal Storageに保存する形であれば用意する必要もありませんし、とても楽です。

準備するもの

今回の最小のアプリケーションを作成するためには下記の準備が必要です。インストールやユーザー登録をしておきましょう。

npmのインストール
Yarn（好みで必要であれば）
GitHubのユーザー登録
Netlifyのユーザー登録

Vue CLI

まずはPCにVue CLIをインストールします。Vue CLIを利用すると、コマンドで簡単にVue.jsのプロジェクトを作成できるようになります。インストール方法は下記のどちらかのコマンドです。

npm install -g @vue/cli

もしくは

yarn global add @vue/cli

プロジェクトを新規作成

Vue CLIを使ってVue.jsのプロジェクトを新規登録します。下記のコマンドを実行します。

vue create hello-world

するとプロジェクトにどのような機能を入れるかを選択しながら作成することが出来ます。必要なものを選択していきます。よく分からない場合は最初にdefaultを選択しておけば良いと思います。

例として、僕はManually select featuresで下記を選択しました。

Check the features needed for your project

Babel, TypeScript, Linter/Formatter, Unit Testing, E2E Testing

TypeScriptと２つのTestingを追加しました。1ページの軽いアプリケーションなのでRouterは選択しませんでした。Testingは今回は使いませんが、もし使うことになった際に一から設定するのは面倒なのでとりあえず雛形を作ってもらっておいたほうが楽かなと思いいつも追加しています。とりあえずシンプルなアプリケーションを作るだけであれば不要でしょう。

Use class-style component syntax?

Vueコンポーネントの使い方が変わります。好きな形を選択しましょう。Vue.js3でまた新しいカタチも出てくるのですがまだ選択できませんのでとりあえず好きなもので良いと思います。シンプルなアプリケーション用ですのであまり考える必要はないでしょう。

Use Babel alongside TypeScript

TypeScriptの場合？　だけでしょうか。そのままYで良いと思います。

Pick a linter / formatter config

これもLinter/Formatterを選択している場合だけでしょうか。TSLintはもう使わないほうが良いのでそれ以外であれば好きなのを選べば良いと思います。僕はPrettierを選んでいます。

Pick additional lint features

いつLintするかの設定です。とりあえずLint on saveで良いと思います。

Pick a unit testing solution

Unitテストで利用するパッケージの選択です。GitHubでのスター数が多いので適当にいつもJestにしています。

Pick a E2E testing solution

同上でcypressを選択しました。

Where do you prefer placing config for Babel, ESLint, etc.?

いろんな設定がpackage.jsonに詰め込まれるのは嫌なのでIn dedicated config filesにしました。

Save this as a preset for future projects?

最後にこの設定を今後も使うかの選択です。怖いのでそのままNにしました。

これで完了です。待っていれば先程指定したアプリケーション名のフォルダにプロジェクトが作成されます。E2Eテストとかを入れているとかなり時間がかかるかもしれません。

問題なければ最後に表示されるように、cdコマンドでフォルダ内に移動し、serveコマンドを実行すればもうアプリケーションが実行できます。

cd vue-netlify-sample
yarn serve

問題なければURLが表示されるのでアクセスすれば表示されます。

Gitにコミットする

とりあえずプロジェクトを作成した直後の状態をGitにコミットしておくと良いでしょう。通常はgit initする必要がありますが、Vue CLIの場合はそれもやってくれているっぽいのでそのままコミットできます。git addも必要ですがそれもやってくれているっぽいので、例えばVSCodeの場合はそのままメッセージを入力してコミットできるっぽいです。

GitHubにリポジトリをpushする

さきほど作成したリポジトリとそのコミットを、GitHubのリモートリポジトリに登録します。まずは新しいリポジトリをGitHub上に作成します。

設定はこんな感じです。名前だけ入力するだけで大丈夫です。公開したくなければPrivateを選択しておきましょう。

新規作成できると、空のリポジトリが作成されます。この状態ではリポジトリの初期化方法が色々と書かれています。その中に既存のローカルリポジトリを使う方法が書かれていますので、それをローカルのプロジェクト上で実行します。

git remote add origin [email protected]:dala00/vue-netlify-sample.git
git push -u origin master

問題なければGitHub上の画面を更新するとpushしたファイル一覧が表示されるようになります。

Netlifyにデプロイする

続いてNetlifyで先程作成したGitHubのリポジトリを連携させて、簡単にデプロイできるようにします。まずは「New site from Git」ボタンを実行します。するとGitHub上のリポジトリ一覧が表示されます。

ただ、新規登録時やNetlify上でのアプリケーション作成時のGitHub連携方法によってはもしかしたら表示されていないかもしれません。すべてのリポジトリの連携を許可する設定であれば表示されていると思いますが、特定のリポジトリだけ許可する設定で連携した場合は作成したばかりのGitHubリポジトリは表示されていません。その場合は画面の下に

Can’t see your repo here? Configure the Netlify app on GitHub.

というメッセージのリンクがありますので、そちらでGitHubに移動して許可するリポジトリを追加する必要があります。下記のような感じで追加します。

問題なく選択できたらアプリケーションの新規登録画面に遷移します。Build commandにyarn build、Publish directoryにdistと入力して登録を行います。

登録が完了するとデプロイ一覧に下記のようにデプロイ中である旨のステータスが表示されています。完了すると緑色のPublishedというステータスに変わるのでしばらく待ちましょう。

問題なければ上部にURLが表示され、アクセスできるようになります。下記が実際にデプロイしたURLです。

https://eager-neumann-0e6dfa.netlify.com/

eager-neumann-0e6dfaの部分はSite settingsのsite nameという項目で変更することもできます。独自ドメインを持っていればそれを利用することもできます。

アプリケーションを更新する

アプリケーションに機能を追加してそれをデプロイしたい場合は、追加分をコミットしてGitHubにpushすると自動的にNetlify側も更新してくれます。

例えば試しに下記のようなよくあるインクリメントのテスト機能を書いてみます。例えばTypeScriptの場合はApp.vueを下記のように変更します。（主にcountを使ったところを追記しています）

問題なければ下記のようにボタンを押すと数値が増えていく機能が出来上がります。

あとはコミットしてpushすると再度Netlify上でデプロイが走りアプリケーション上に反映されます。

まとめ

このようにJavaScriptとGitHub、Netlifyを使うだけだと非常に簡単にアプリケーションを作ることができます。サンプルや、ずっと運用していくわけではない簡単なアプリケーションであればおすすめです。

今回作成したプロジェクトはGitHubで公開しています。

https://github.com/dala00/vue-netlify-sample

Laravel+Vue.jsでToastを使ったフラッシュメッセージを表示する

2020-01-31T21:28:18+09:00

LaravelとVue.jsで開発していると「更新しました」といったフラッシュメッセージを表示したい時があります。ただ、表示用のデザインが提供されているわけでもないし、全部のページに表示用の記述を入れたくないのでなるべく共通テンプレート内だけに書いておきたい、でもそれだと微妙に変な位置になってしまってかっこ悪くなる、というパターンもあります。

そんな時、トーストを使うと場所を気にしなくていいし、時間が経つと勝手に消えてくれるため、じゃまにならずにわかりやすいメッセージを表示することができるので便利です。

使用するプラグイン

今回は下記のVue.js用に作成されているプラグインを利用しました。

shakee93/vue-toasted: 🖖 Responsive Touch Compatible Toast plugin for VueJS 2+

まずはインストールします。

yarn add vue-toasted

そしてapp.ts等で利用するための設定を行います。

import Toasted from 'vue-toasted'

Vue.use(Toasted)

これで準備は完了です。あとはVueコンポーネント内で下記のような感じで呼び出すことが出来ます。

this.$toasted.show('hello billo')

TypeScriptを利用している場合はちゃんと上記も定義してくれているっぽいです。

表示用のコンポーネントを作成

さて、実際に $toasted.showを実行するだけのVueコンポーネントを作成します。そのようにすることで、通常のLaravelのフラッシュメッセージを表示するときと同様、そのフラッシュメッセージが存在する時にそのコンポーネントを配置するだけで勝手にメッセージを表示できるようになります。

今回は下記のようなToast.tsというファイルでコンポーネントを作りました。テンプレートは利用していないのでtsファイル等で構いません。（JavaScriptの場合は適宜型などを外せばそのまま使えると思います）

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class Toast extends Vue {
  @Prop(String) message!: string
  @Prop({ type: String, default: 'default' }) type!: string

  mounted() {
    this.$toasted.show(this.message, {
      type: this.type,
      duration: 5000,
      position: 'bottom-left'
    })
  }

  render() {
    return ''
  }
}

あとはapp.jsで new Vueする際にcomponentsパラメータの中に上記のコンポーネントを含ませれば利用できるようになります。

共通テンプレート内でVueコンポーネントを動作させられる箇所（例えば#app内など）に下記のように配置すればフラッシュメッセージが表示されるようになります。

@if (Session::has('success'))

@endif

typeはvue-toastedにそのまま渡しているだけですが、いくつかあるようなので増やしたい場合はvue-toastedのドキュメントを見てみてください。

フロント明るくないおじさんがWebアプリ作った話【悟空語ジェネレーター】

2019-09-29T11:28:32+09:00

2019年2月にQiitaへ投稿した記事のクロス投稿です。

はじめに

近年、個人開発がとても盛んになってきました。
クラウドサービスのリッチ化に伴い、個人でも簡単にWebサービスを運営できる時代となり、
個人開発者の熱意が更なる個人開発者の熱意を生む、素晴らしい連鎖が発生しています。

特に去年、2018年は爆発的な個人開発ブームでした。

「企業の一兵隊だった自分でも、何者かになれるんじゃないか」

「世界は俺のプルリクを待っているのではないか」

そう思わせてくれる1年でした。

かく言う私も、その熱意にあてられ去年1年間、
ひたすらQiitaを傍観していました。

私の業務はずっとサーバーサイドのJava開発。
フロント明るくないおじさんです。
はじめまして。きんみと申します。以後よろしくお願いします。

作ったもの

とは言え、私も兵隊の端くれ。
血湧き肉躍る開発は大好物なわけでして。
Web開発の真似事のような事はやっていました。年末頃から。
その集大成がこちらになります。

悟空語ジェネレーター
https://goku-lang.netlify.com/

日本語を入力すると、悟空語に変換します。
初回はブラックボックスなサービスとして遊んで頂きたいので、
変換ルールについては最後に書きます。

使った技術

Vue.js
JavaScript三大フレームワークの１つ。
公式ドキュメントの日本語がとても丁寧で、初学者の私でもとっつきやすいと感じたため使ってます。

kuromoji.js
JavaScript製形態素解析ライブラリ。
形態素とは文節の最小単位で、日本語文字列をこの単位で分解して、読み仮名や品詞情報を付与してくれます。
こちらのデモサイトが分かりやすいです。

Netlify
静的ホスティングサービス。
ちょー簡単にWEBサイト作れます。

ということで、このサービスは静的なサイトです。
冒頭に話した「リッチなクラウドサービス」は、ほぼ使ってません。
流行りのNetlifyを使ってますが、別にどこだろう動きます。
故・Yahoo!ジオシティーズでも多分動きます。

紆余曲折を経ての結果ですが、ちょっと後悔しています。
後述します。

仕組み

入力値をkuromoji.jsで形態素解析
各形態素の読み仮名情報をローマ字に変換
変換ルールに従い、正規表現でゴリゴリ変換
変換された形態素はひらがなへ戻す
変換されなかった形態素は元キーワードへ戻す
全形態素を文字列結合

たったこれだけです。

ハマったところ

1. フロントゼンゼンワカラナイ

学生時代にHP作った事ありましたし、少しですが業務でjQuery等をイジる事もあります。
しかし、いざ勉強をしてみるとそのカオスっぷりに腰が抜けました。
フロントなんて刺身にたんぽぽ乗せてるだけと思ってた自分を殴りたくなりました。

まずは基本となるHTML5、というより脱TABLEタグから入り、
ES6、Vue.js、React等の公式ドキュメントや入門記事をサーフィンして
Hello Worldな日々を4〜5日程続けました。
広く浅く現代の技術に触れて、無知の知を得る事に徹しました。

2. 形態素解析

React + Kuromoji を使ってブラウザ上で形態素解析
こちらを参考に、Vue.js上でkuromoji.jsを動かせるようにしました。

まずはnpm install kuromojiした後、辞書を公開ディレクトリへコピー。

$ cd project-directory
$ cp -a node_modules/kuromoji/dict public/

下記のようにしてVue.js上でkuromoji.jsを動かしました。

ポイントは下記です。

var vm = this

通常、単一コンポーネント内ではthisでプロパティを参照するが、

builder内でも参照できるようにグローバル変数に格納する。

async / await

builder.build は非同期処理の為、async / awaitを使う。

vm.outputToken = token

形態素解析後のトークンをプロパティへ格納する。

この勘所が全く分からずハマり、Vue.js上でkuromoji.jsを動かす事は一度諦めて、下記を検討しました。

代替品としてRakuten MAの使用
GoogleCloudFunctions（GCF）にkuromoji.jsを置いてAPI化
GCFにPykakasi（Python製形態素解析ライブラリ）を置いてAPI化
MecabをPythonで叩くAPI作成
外部APIサービス（Yahoo!JAPAN テキスト解析WebAPI等）の使用

箇条書きで書きましたがそれぞれ、調査して、コードを書いて、ハマって、諦めてを繰り返してます。
1行につき1〜2日は費やしています。
もっと頑張れば、いずれも実現可能だったかもしれませんが、最終的に「ブラウザ上でkuromoji.jsを実行」に回帰しました。
選定した訳ではなく、現段階の私の技術力ではこれしか出来なかったのです。

3. ローマ字変換

今回の処理は、
入力値をローマ字に変換 → 解析 → ひらがなへ戻す
というフローになります。
便利なJS製のカナ/ローマ字変換ライブラリがいくつかありましたが、
どれもヘボン式で不可逆でした（とうきょう → tokyo → ときょ）
また、解析は正規表現で行うため[sa,shi,su,se,so]のような不規則な変化は避けたく
可逆なローマ字変換処理を自前で作成しました（とうきょう → toukyou）

4. CSSフレームワーク

このアプリはドラゴンボールのネタアプリです。
もちろん、CSSフレームワークはBulma（ブルマ）を使ってます（ﾄﾞﾔ

言いたかっただけです。特にハマってません。

BootstrapからjQuery依存を省いた軽量なCSSフレームワークです。
公式ドキュメントや、下記記事を参考にサクっと導入出来ました。素晴らしい。
CSSフレームワーク BULMA チュートリアル①

マーケティング

フロント技術の学習が目的だった為、開発以外の何かを行うつもりはなかったです。
しかし、せっかくWebアプリを公開するならば、使ってもらえるよう努力したい。
これもまたWebの学習。「やらない」はただの機会損失、と思い

悟空なりきりアカウントをフォローしてみました。

やったぜ！！！よろしくな！！ https://t.co/kVgRtneAMp
— きんみ / 🎍ついぎり🎍リリースしました🎉 (@_kinmi) 2019年1月21日

今のところ、使って頂いた形跡はありません。

2019/4追記
いつの間にかこちらのなりきりさん、アカウント削除されてました。。

しかし、Twitterで公開したことで、多くのフォロワーさんに使って頂き、バグ報告も多数頂戴しました。
テスト不足が露呈した結果ですが、ローカルで動かしていただけじゃ気付かず終わっていたと思います。
公開して得られる学びの多さを痛感しました。

公開後のバグ対応

① iPhoneでは表示されない問題

Twitterで公開した直後の出来事でした。

見れないです・・・iPhoneだからですかね(´・ω・｀)
— 無職やめ太郎（本名） (@Yametaro1983) 2019年2月2日

はい、Chromeでしかテストしてません。。。
Safariで開いてみたところ、ブランクページが表示されました。

変換処理で多用していた正規表現の「後読み」が原因でした。
2019/2現在、対応しているブラウザはChromeだけのようです。
ここでJSが落ち、レンダリング自体されない事態に陥ってました。

先読みは使えるとの事だったので下記を参考に、文字列を反転させてマッチさせるという荒技を使いました。
Javascriptでの正規表現の後読みの代替

② ぱい◯いでか美さん対応

ぱいぱいでか美 https://t.co/ESyx59epVx #悟空語ジェネレーターこれは「ぺぇぺぇでか美」にならへんのかいw
— 無職やめ太郎（本名） (@Yametaro1983) 2019年2月3日

想定外です。ワケが分からない。
ぱい系ワードは沢山テストしたのに、何故でか美さんだけ変換されないのか、、、

原因は「ぱいぱいでか」を識別不可なワードとして解析され、
本来カタカナである読み仮名情報がひらがなになっていました。
私の仕様把握不足です。
前提としていた仕様が崩れ、デスマーチが始まります。

やべぇ…でか美さん手強い…原因っぽいの直したら「ぺぇぱいでか美」ってなった、、どんな処理通ったらこうなるんや… pic.twitter.com/gwF0SffzKS
— きんみ / 🎍ついぎり🎍リリースしました🎉 (@_kinmi) 2019年2月3日

ぐあぁぁあ！！！ちくしょーーーー！！！ pic.twitter.com/oLCeRtNyD9
— きんみ / 🎍ついぎり🎍リリースしました🎉 (@_kinmi) 2019年2月3日

現在は正常に「ぺぇぺぇでか美」となるのでご安心ください。

やらなかった事/やれなかった事

1. バックエンド開発

当初の学習目標は「Firebase Hosting + Cloud Functionsを使ったサーバレス開発」でした。
しかし、結果としてはバックエンド処理の無い、文字通りのサーバレスとなってしまいました。

辞書ファイルをキャッシュするため、初回の変換は超絶重いうえに、挙動のクライアント環境依存が強すぎます。。
友人はスマホの速度制限が来ていたのか、５分かかったと言っていました。
別の友人はAndroid版Edgeなるものを使っていて「動かないよ」と言ってました。
やはり、コアな処理は裏に持たせるべきですね。

また、ユーザが変換したワードの収集が出来ません。
リリース後のメンテナンス作業を見越した場合、生きたデータは貴重です。
こんな小さなネタアプリでも、バックエンド処理は作るべきでした。

2. OGP作成

ここは捨てました。ついでにファビコンもVueデフォルトのままです。
作り出すと拘ってしまい、リリース延期に繋がると思ったからです。
バズを狙う場合は必須ですが、、、

ただ、こちらの記事を拝見して
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう
OGPとしてSNSに共有するのは技術的にも面白そうと思ったので、近いうち導入するかもしれません。

モチベーション管理

私のモチベ傾向として、完成までの道筋が見えたら熱が冷めます。
手探りでやっている時が一番楽しいんですよね。
過去にはリリースまで行かず、中途半端に終わったスマホアプリが幾つかあります。
今回も二の舞になるのではないか、という懸念があったので、
完成が見えた段階で@jabbaさん作のmobet を使いました。

週末振休含めて４連休なので٩(๑òωó๑)۶今お遊びで作ってる「悟空語ジェネレーター」を公開する。 https://t.co/Nuhjm7PCtp #モベット @_kinmiさんから
— きんみ / 🎍ついぎり🎍リリースしました🎉 (@_kinmi) 2019年1月23日

しかし、残念ながらこの４連休にインフルエンザにかかるという痛恨のミスを犯してしまい未達成です。
「未達成と判定するまで（期日から判定まで五日間の猶予があります）には完成させる」をモチベーションにリリースまで漕ぎ着けました。

変換ルール

最後に変換ルールです。
当アプリの発想は下記ブログエントリーからです。
野沢雅子語の活用けぇ（活用形）
変換ルールはこちらを肉付けした形になります。

1. 母音[a, i] + [i, e] => 母音[e] + 'ぇ'
e.g.) 最初 → さいしょ → saisyo → selesyo → せぇしょ

2. 品詞：動詞に含まれる 'る' => 'っ' 文末の場合は 'っぞ'
文末かつ、動詞＋助動詞の場合は後続の助動詞を削除しています。
kuromoji.jsでは単語の原型（サ行変格活用前、等）のワードも取得でき、そちらもチェックしています。
e.g.) するから → surukara → sultukara → すっから
します(する + ます) → suru → sultuzo → すっぞ
帰ります（かえる + ます） → kaeru → keleltuzo → けぇっぞ(ルール1と2の併用)

3. 一人称 => 「おら」、二人称 => 「おめぇ」
Wikipediaから一人称と二人称の一覧を作り、固定値で変換かけてます。
「貴様」が代名詞として判断されなかったので、「品詞＝代名詞」の条件はつけてません。
ベジータの台詞を悟空語に変換したかったので。

上記がデフォルト挙動であり、なまりレベル：普通です。
なまりレベル：強い/超は上記に加えて固有の変換ルールが加わります。

強い：母音[o] + [i, e] => 母音[e] + 'ぇ'
e.g.) におい → nioi → niele → にえぇ

超：3文字のローマ字(ltu 等)以外の母音全て => 母音[e]
e.g.) オッス！おら孫悟空！→ oltusu！orasongokuu！ → eltuse！eresengekee！ → えっせ！えれせんげけぇ！
(※1)

なまりレベル：超は文字だとよく分からないですが、声に出すと意外と読めます。
他のルール発見された方は教えてください！

おわり

次は、すげぇＷＥＢせぇとつくっぞ。
（次は、凄いWEBサイト作る。）(※2)

その他参考サイト

JavaScriptで正規表現（文字列置換え編）

※1 :「孫悟空」だと大丈夫ですが、「悟空」は「さとるそら」と読んでしまいます。
※2 : なまりレベル：強

Laravel 6 でVue.jsやReactを使う

2019-09-12T21:30:14+09:00

Laravel 6 が先日リリースされました。Laravel 5 との違いとして、プロジェクトの初期化時にVue.jsのリソースが自動生成されなくなりました。そのため、引き続きLaravel 6でも使用したい場合は追加で導入する必要があります。

laravel/uiをインストール

まずはフロントエンドの初期化を行うためのパッケージとしてlaravel/uiというものがありますので、それをインストールします。

composer require laravel/ui --dev

JavaScriptとCSSの生成

uiライブラリを使って各種JavaScript、CSSのファイルを生成します。

Vue.jsを使う場合

下記のコマンドで生成します。

php artisan ui vue

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド＆リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。appというIDの要素内でVue.jsを有効化させているため、その中にコンポーネントを配置しています。

これで画面の端っこに表示されます。

Reactを使う場合

下記のコマンドで生成します。

php artisan ui react

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド＆リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。また、コンポーネントはexampleというIDの要素に挿入されるように指定されているため、その要素も表示したい場所に追加しておきます。

これで画面の端っこに表示されます。

参考リンク

公式の説明
JavaScript & CSS Scaffolding - Laravel - The PHP Framework For Web Artisans

Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみた

2019-09-04T18:29:26+09:00

先日、開発中の積読用の書籍管理アプリの新機能として、
Markdownで書ける読書メモを追加したので、その時の備忘録。

✅読書中のメモが残せる読書メモ機能✨読書メモを残せる機能を追加しました‼️マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍(続く pic.twitter.com/K3pjr4noVo
— めもらば@公式 (@MemoryLoverz) September 1, 2019

全体の流れ

やりかたとしては、こんな感じ
1. Markdownの文字列をmarkedを使ってHTML化
2.

の部分は、markedでhighlightjsを使うように設定

3. Markdown用のCSSを追加して見た目を調整

VueのSFCで書くとこんな感じ






ポイントとしてはこんな感じ。


created()内でmarkedの設定。ハイライト処理にhighlightjsを使うように。
computedのmarkedHtml()内でmarkedを実行
でHTMLを表示


マークダウン用のCSSを追加する

上記のままだと、Webサイトに適用しているCSSがそのまま適用されてしまうので、

こんなになってしまい、あまりよい感じではない...



なので、.markedというクラスは以下の要素にマークダウン用のCSSを設定して調整する。

0から作ると大変なので、@skkzshさんのQiita記事に書いてある、

simonlc/Markdown-CSSやkottkrig/Markdown-CSSを参考に設定していく。

できたのがこんな感じ。

あとはサイトのデザインと合わせて、少しずつ調整〜

// ****************************
// * Marked
// ****************************
.marked {
  p {
    margin: 1em 0;
  }

  img {
    max-width: 100%;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1em;
  }
  h4, h5, h6 {
    font-weight: bold;
  }
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.2em;
  }
  h5 {
    font-size: 1em;
  }
  h6 {
    font-size: 0.9em;
  }

  ol {
    margin: 1em 0;
    padding: 0 0 0 2em;
  }

  ul {
    margin: 1em 0;
    padding: 0 0 0 2em;
    list-style: disc;
  }

  dd {
    margin: 0 0 0 2em;
  }

  table {
    margin: 10px 0 15px 0;
    border-collapse: collapse;
  }
  td, th {
    border: 2px solid #ccb8a3;
    padding: 3px 10px;
  }
  th {
    padding: 5px 10px;
  }

  blockquote {
    padding-left: 1em;
    margin: 0;
    color: #666666;
    border-left: 0.3em #f6f0e5 solid;
  }
}


このCSSを適用するとこんな感じに!!

いい感じになった(´ω｀)



いろいろ便利なライブラリがあるのでサクッとできてステキ♪

こんなのつくってます！！

上記の読書メモ機能を追加した、積読用の読書管理アプリ「積読ハウマッチ」！

積読ハウマッチは、Nuxt.js+Firebaseで開発してます!



もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、

公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト


大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog
React＋marked＋highlight.jsでマークダウンエディタをつくる - Qiita
コードのハイライト表示 JS ライブラリ ３種 - Qiita
JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会
Markdownでスタイルシート - Qiita

積読を解消をうながすWebサービス『積読ハウマッチ』をリリースしました!!!

2019-08-09T08:49:16+09:00

4月くらいから作っていたWebサービスをついにリリースしました♪
積んでる本の総額がわかる読書管理サービスです！

積読が多い自分を戒めるためのWebサービス( ﾟдﾟ)!

■積んでる本の総額がわかる書籍サービス｜積読ハウマッチ
https://tsundoku.site

思いついたときのツイート

思い返すと、完全にネタ的なおもいつきではじまった感(´ω｀)

おもしろそうなアプリを思いついてしまった。。自分がダメージを受けるが作りたい。。
— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) April 12, 2019

ちなみに、おもしろそうっていうのは、「くだらない！！」的なおもしろさで、すごい！とかイケてる！とかはまったくない
— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) April 12, 2019

こんなサービスです

メインの画面はこんな感じ。
本を登録して、ステータスを変更していく、積読を管理するサービスです。

ほかとちがうのは、本の総額がわかるところ
いま、いくら積んでいるかがわかってしまうおそろしさ((((；ﾟДﾟ))))ｶﾞｸｶﾞｸ

コンセプト

おもいつきではあるんですが、もともと積読が多いなと。。

本で買うのですが、積み上がっている本を見て、ふと、
**「これっていくらなんだろ？」 **
とおもったのが発端。読まないとお金を積んでるだけだなと。。

使い方のかんたんな説明

使い方はシンプル

検索して、

持ってる本を積んで、

総額を見て、現実を受け止め、

積読を減らすことをがんばる！

持ってる本を登録して、読みはじめたり、
読み終わったりしたらステータスを変える感じです！

積んでる金額を見るだけだとつらいので。。

ランキング機能もついています(´ω｀)

「こんなに積んでるけど、ほかのひとはどれくらいなんだろ？」

っていうのが発端。

他の人のをみて「まだまだ積んでも大丈夫(´ω｀)」と思いたいなと。。

読まれてる本、買われてる本のランキングもあるので、
どんな本が人気かもわかるように♪

新着もあるので、新しく積まれたり読まれたりした本を、
ぼーっとながめるのも楽しい感じに(´ω｀)

Twitterでシェアして積読金額を晒せる...

SNSでシェアした時の画像も力をいれてみました(´ω｀)
積んでる金額を晒すと、さらに読まないといけない感が出るかも(・・?
(積んでるのに、ドヤ顔のおじさんが...)

もちろん、読んだ本も共有できるので、
「こんなに読んだんだ！がんばった！」
もシェアできます♪　独学や自己研鑽をがんばってるひとにも！

(こっちはすっきりしたおじさん...)

まだまだ作れてないところはたくさん。。

とりあえず、ファーストリリースができたんですが、
まだまだ作りたい部分はたくさん。。!!

読んだ感想やメモを記録できるようにしたい
どれくらい読んだかを日々の進捗を記録できるようにしたい
読み終える目標の日を決めて、アラートしてもらいたい

積読の消化を促すような機能をどんどんいれれたらとおもっています！

見てるだけでも楽しいので、まずはちらっとみてもらえたら♪
おもしろそうだなと思ったら、ぜひ一緒に積み比べしましょう！

良い積読ライフを(´ω｀)

■積んでる本の総額がわかる書籍サービス｜積読ハウマッチ
https://tsundoku.site

Laravel+Vue.jsでユーザーのフォロー機能を作る

2019-06-21T22:04:13+09:00

LaravelとVue.jsを使い、TwitterやQiitaのように画面を切り替えずにボタンクリックでユーザーのフォローとフォロー解除をできるようにしてみます。

今回は下記の構成で作ってみます。

Laravel5.8
Vue.js2.5
Bootstrap4.2

LaravelとVue.jsはもうちょっとバージョンが低くても大丈夫だと思います。Bootstrapについては、今回通信中のローディング表示にspinnerを使っているため最新のものが望ましいです。（4.0だと動きませんが、そこの部分のCSSをコピペしてくれば一応動きます）

テーブルの作成

ユーザーはLaravelのデフォルトのもので大丈夫です。ただし今回の例はモデルをapp/Modelsに移動していますので、同様の構成にしておく必要があります。ただ、他の設定ファイルの修正などもあり面倒ではありますので、逆に当記事に書いているuse App\Models\User等をuse App\User等に読み替えて試していただいたほうが楽かもしれません。

あとはフォローするユーザーとフォローされるユーザーを繋げるための中間テーブルを作ります。

マイグレーションは下記のような感じです。普通の命名規則としては双方のテーブルの単数名を組み合わせるのですが、そうするとuser_userになってしまい変な感じとわかりにくい感じがしたので適当に変えています。

Schema::create('follow_users', function (Blueprint $table) {
    $table->unsignedInteger('user_id');
    $table->unsignedInteger('followed_user_id')->index();

    $table->unique(['user_id', 'followed_user_id']);

    $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
    $table->foreign('followed_user_id')->references('id')->on('users')->onDelete('cascade');
});

モデルの準備

中間テーブル作成

直接テーブルを操作したいので一応モデルも作っておきます。中間テーブル用のPivotを継承し、今回のテーブル構成に合わせて設定もいくつか行っています。

namespace App\Models;

use Illuminate\Database\Eloquent\Relations\Pivot;

class FollowUser extends Pivot
{
    protected $table = 'follow_users';
    public $timestamps = false;
    protected $guarded = [];
}

リレーションの設定

ユーザー（User）中間テーブル（FollowUser) フォローされるユーザー（User）

という構成のリレーションを設定します。具体的にはLaravelのマニュアルでいうところのMany To Manyで、belongsToManyで設定します。

ユーザーのモデルに下記のメソッドを追加します。

    public function followUsers()
    {
        return $this->belongsToMany(self::class, 'follow_users', 'user_id', 'followed_user_id')
            ->using(FollowUser::class);
    }

普通はこんなに設定は不要でマニュアル通りで良いのですが、今回は同じテーブル同士のMany To Manyのためちょっと設定が増えています。

フォロー、フォロー解除処理作成

FollowUserControllerに下記のフォローとフォロー解除用のメソッドを追加します。

    public function store(Request $request)
    {
        $followedUser = User::findOrFail($request->input('id'));
        FollowUser::firstOrCreate([
            'user_id' => Auth::id(),
            'followed_user_id' => $followedUser->id,
        ]);
        return response()->json(['result' => true]);
    }

    public function destroy($id)
    {
        $followedUser = User::findOrFail($id);
        $user = Auth::user();
        $user->followUsers()->detach($followedUser->id);
        return response()->json(['result' => true]);
    }

ファイルの戦闘のnamespaceのあとに上記で利用しているクラスのuseも追加しておきます。

use App\Models\FollowUser;
use App\Models\User;

上記のような感じで、attach, detachを使うことで割当と解除を行うことができます。上記だとattachを使っていませんが、複数のタブを開いていて変な操作をした場合などに重複エラーが出てしまい、わざわざそのための処理を入れるのも面倒だったためfirstOrCreate呼び出しで完結するようにしています。

各メソッドの最初のユーザー取得も実際には不要ですが、一応変なデータが出来ないようにユーザーの存在チェック代わりに入れています。

Vue.js側でボタン作成

サーバー側は出来たので、あとは実際にフォローをトグルするためのUIをVue.jsで作っていきます。

スクリプトの定義部分

ひとまずコンポーネントのスクリプトの定義周りは下記のような形にしました。（TypeScriptで書いているので、JavaScriptの場合は適宜置き換えてください）

import { Vue, Component, Prop } from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class UserFollow extends Vue {
  @Prop({
    type: String,
    required: true
  })
  id!: string

  @Prop({
    type: Boolean,
    default: false
  })
  following!: boolean

  currentFollowing = this.following
  sending = false

最初のフォロー状態はプロパティで受け取りますが、あとはボタン操作によって切り替えるため、コンポーネント内ではcurrentFollowingを使っていきます。ローディング表示や、ボタンの連打などを防ぐためsendingフラグを入れています。

フォロー、アンフォローの実行

フォローボタン、フォロー解除ボタンを押した時のメソッドを追加します。（エラー処理は省略しているため適宜入れてください）

  async follow() {
    if (this.sending) {
      return
    }
    this.sending = true
    const data = { id: this.id }
    await axios.post('/follow-users', data)
    this.currentFollowing = true
    this.sending = false
  }

  async unfollow() {
    if (this.sending) {
      return
    }
    this.sending = true
    await axios.delete(`/follow-users/${this.id}`)
    this.currentFollowing = false
    this.sending = false
  }

ボタンの配置

あとは上記を呼び出すためのボタンを配置します。

sendingがtrueの場合はspinnerのくるくるローディングが表示されます。また、フォロー状態によってボタンも切り替わります。

まとめ

以上のような感じでスムーズに使えるフォロー、フォロー解除ボタンを作ってみました。参考にできる部分があれば是非利用してみてください。その他何かこんなものの作り方を教えて欲しい！　みたいなあればお気軽にコメントいただければと思います。

nendの広告を表示するVueコンポーネント

2019-04-15T22:03:32+09:00

nendの広告をVueコンポーネントとして作成し、Nuxt.js上で表示してみました。AdSenseの審査が通らない間使っていたのですが、通ったので必要なくなりました。そのためせっかくなので晒しておきます。

ただ、nend広告の貼り付けタグは癖があるので結構めちゃくちゃなことをやっています。場合によっては怒られる可能性もあるのでご注意を。

そもそもSPAでは使えない

nend広告の貼り付けタグはそもそもSPAでは使えません。

scriptタグで構成されている

全てscriptタグで構成されています。こんな感じです。

Vueコンポーネント上にscriptタグを貼っても基本的に無視されてしまいますので動きません。ただ、JavaScriptのcreateElementでスクリプトタグを作って配置することで動作させる事は可能ですので今回もそのようにしました。具体的にはこんな感じです。

    const script = document.createElement('script')
    script.src = 'URL'
    const container = this.$refs.container
    container.appendChild(script)

nend_paramsが無いと怒られる

そう、見れば分かるのですがnend_paramsがグローバルに配置されています。そのため、Vueコンポーネント内に隠蔽ができません…。

window.nend_params に入れ、その直後にscriptタグを配置する、という連動するのかどうかも良くわからない流れでやらなければいけなくなっています。

document.writeできないと怒られる

そう、一番の問題はこれでした。document.writeを使っているのですが、Vueコンポーネントはdocumentとは全く関係ない場所で動いているので、そもそもdocument.writeが不可能です。nend広告はSPAを完全に切っていて時代錯誤すぎます。

仕方ないのでdocument.writeを一旦置き換え、終わったらもとに戻す、という方法をとりました。

    const write = window.document.write
    window.document.write = str => {
      container.innerHTML += str
    }
    container.appendChild(script)

ここまでしてようやく表示することができました。もう正直この時点で正式な方法で貼っているとは思えない状態です。

ひとつしか配置できない

前述の方法で表示できるようにはなったのですが、そもそもscriptタグの配置で実行しているので、いつ処理が完了しているのか誰にも分かりません。そのため、１ページに二つ以上広告を配置すると１つ目の処理が終わってない状態で二つ目の処理が動いてしまい、どこのinnerHTMLに値が追加されていくのか全くわからないカオスな状態となります。

キューを使った

とにかく、ひとつずつ処理をしなければならないのでキュー方式で動かすことにしました。

他のキューがあったら待つ
配置する
読み込みが完了するまで待つ

という流れです。コールバックは当然無いので、containerの中にimgタグが現れるまで待つ、という手法を取りました。最大５秒にしていますがwhile & await setTimeoutしてるのでどんな感じで処理が積まれていっているのか謎です。

同じ広告を配置できない

同じ広告を配置できないことが分かりました。本番であればまあ広告枠を作ればいいので問題ないのですが、テスト広告も同じものを配置できないため、１ページ内に複数の広告枠がある場合は仕方がないので大きさも無視して別のものを表示していかなければなりません。

当然、１ページ内にたくさん広告がある場合はテスト表示できません。

成果物

下記が全容になります。ぐちゃぐちゃですので参考にはしないでください。

waitForはこんなのです。

export async function waitFor(
  conditionFunc: (() => boolean),
  maxMilliSeconds: number
) {
  let waited = 0
  while (!conditionFunc() && waited < maxMilliSeconds) {
    await wait(1000)
    waited += 1000
  }
}

export function wait(milliSeconds: number) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, milliSeconds)
  })
}

まとめ

こんな感じでとりあえず表示することはできましたが常時心配で仕方がないです。ページ切り替えの際に問題が出るパターンなどもありそうですし。（まあ広告なのでそんな厳密に動かなくても良いのですが）

とりあえずはやく設置タグを変えたほうがいいように思いますね。せめて関数呼び出し方式にしてくれないと厳しい…。

エイプリルフールはじめました

2019-04-01T07:14:06+09:00

リリースしてからはじめてのエイプリールフールだったのでちょっと遊んでみました。ふわふわと飛んでいるのはくりえいとくんです。

元々

Crieit

という文字が顔に見えたのでそれをそのまま絵にしてみたらおばけになった、という感じです。クリックすると色々喋ります。

特筆することも無いので動き回らせているプログラムでも貼っておきます。

おばけクラス

move()で動かし、getX()とgetY()で表示するための位置を取得しているだけのよくあるクラスです。

Goast.ts

const ymax = 50
const width = 100

export default class Ghost {
  id: number
  private x = 0
  private y = 0
  private basey = 0
  private ax = 0
  private angle = 0

  constructor() {
    this.id = Date.now()

    if (Math.round(Math.random()) === 0) {
      this.x = -width
      this.ax = Math.floor(Math.random() * 2 + 2)
    } else {
      this.x = window.innerWidth
      this.ax = -Math.floor(Math.random() * 2 + 2)
    }

    this.basey = Math.floor(Math.random() * window.innerHeight)
    this.calculateY()
  }

  calculateY() {
    this.y = this.basey + Math.sin(this.angle) * ymax
  }

  move() {
    this.x += this.ax
    this.angle += Math.PI / 50
    if (this.angle >= Math.PI * 2) {
      this.angle -= Math.PI * 2
    }
    this.calculateY()
  }

  finished() {
    if (this.ax < 0 && this.x < -width) {
      return true
    }
    if (this.ax > 0 && this.x > window.innerWidth) {
      return true
    }
    return false
  }

  getX() {
    return this.x
  }

  getY() {
    return Math.floor(this.y)
  }

  getAx() {
    return this.ax
  }
}

おばけたちの管理コンポーネント

これも特に特筆することのない単なるゲームループ的なコンポーネントです。おばけを管理して画面からはみ出したら削除したりしています。

おばけコンポーネント

もう動きはおばけクラス、管理は前述のコンポーネントで行われているので、ここでは表示したりクリックイベントを処理したりするだけです。これで一通り完了です。面倒だったので表示はfixedにしてスクロールは考慮しないようにしています。

まとめ

さあ、みなさんも新元号のことは忘れてエイプリールフールやりましょう。今からでも間に合います！！！！！（？）

TypeScriptでVueのクラスを継承する

2019-01-22T09:15:07+09:00

TypeScriptでVue.jsの単一コンポーネントを作る場合、Vueクラスを基底とした継承クラスを作る。ただ、似たようなコンポーネントは同じメソッドなどが並ぶため使いまわしたいと思う時がある。

試してみると特に問題なく継承用の共通クラスを作って使うことができたようなのでメモ。（適当にやってみただけなので問題があれば教えてください）

ベースとなるクラスを作成する

まずはベースとなる、共通メソッドを含めたクラスを定義する。テンプレートは書かないのでtsファイルに書く。

import { Vue, Component } from 'vue-property-decorator'

@Component
export default class BaseEditor extends Vue {
  isiPhone() {
    if (window.navigator.userAgent.match(/iPhone/)) {
      return true
    }
    return false
  }
}

継承する

あとは継承して使うだけ。

これを、実際に描画するテンプレートの最後に配置するだけ。配置したページにだけ、配置したコンポーネントの処理が実行される。

ただまあ、特にhighlight.jsの場合など、ディレクティブを使ったほうが良さそうだったりするので、これは雑なやり方になる。仕事とかでやると「なんで何もしてないのに勝手にコードハイライトされてんだー！？」みたいになる場合もありそうな感じ。

また、本番では何も言われないが開発中はコンソールに「テンプレートもrenderもないよ！」というエラーが出ている。

Vue.jsで謹賀新年（失敗作）

2019-01-01T23:26:06+09:00

なんか面白いものを作ろうと思ったけどだめだった…。失敗作だけどとりあえず投稿…。

See the Pen VueYear by dala00 (@dala00) on CodePen.