ダッシュで奪取

自分用のメモ

【作成中】あつ森アイテムチェッカー作った

f:id:kyoruni:20200814222855p:plain

カタログ埋めたい人なので、自分用に↑こんな感じのチェックリストを作成しました。

特に壁・床・傘あたりは何を所有しているのか忘れがちなので、手元でサッと確認したいな〜とずっと思っていました!

似たようなものは結構ありましたが(スプレッドシートになっているもの、画像付きのものなどなど)、所有状況だけ確認できれば良かったので画像は不要だし、Switchで遊んでいる時はPCを閉じていて、スマホでスプレッドシートはちょっと見にくい……なら自分で作ればいいじゃない。

まだ全てのデータを入れることはできていませんが、隙を見てちょこちょこ追加しています。結構すごい量&最近仕事の方が結構忙しくてやや停滞気味ですが、頑張ります。

自分の趣味&勉強用に作ったものなので、突然仕様が変わったり消えたりするかもしれませんが……それまでよろしければ触っていただけると嬉しいです!

kyoruni.github.io


今後やりたいこと

  • 持っていないアイテムだけワンクリックで表示

  • 所有率を%表示(自分で見てニヤニヤするため)

【Rails】Railsはじめから:プロジェクト作成できずに詰まった

最近サーバーサイド全然触っていないな……と思ったので、CRUDアプリを作りながら復習です。

軽い気持ちで始めたら、最初からめちゃくちゃ詰まってしまいました。

環境
  • Ruby 2.7.1

  • Rails 6.0.3.2

目次

  1. プロジェクト作成
  2. DB作成
  3. DB作成(2回目)
  4. DB作成(3回目)
  5. 参考URL

1. プロジェクト作成

  • 今まで Rails 5 使っていましたが、せっかくなので最新版で遊んでみます!

    • プロジェクト名 「rails-crud」 、MySQLで作成
$ rails new rails-crud -d mysql

2. DB作成

$ rake db:create
  • ここで盛大に怒られる……セグメンテーションエラー?
/Users/UserName/.anyenv/envs/rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/mysql2-0.5.3/lib/mysql2/client.rb:90: [BUG] Segmentation fault at 0x0000000000000000

[IMPORTANT]
Don't forget to include the Crash Report log file under
DiagnosticReports directory in bug reports.

3. DB作成(2回目)

  • 一旦 gem をアンインストール
$ bundle exec gem uninstall mysql2
$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"
  • Gemfile に mysql2 追記
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.5.3'
  • もう一回インストール
$ bundle install

4. DB作成(3回目)

  • 別のエラーになった
Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
  • こちら を参考に

    • openssl インストールし直してみる
$ brew install openssl
  • openssl パッケージのバージョンを 1.0.2s に切り替える
$ brew switch openssl 1.0.2s

Cleaning /usr/local/Cellar/openssl/1.0.2s
Opt link created for /usr/local/Cellar/openssl/1.0.2s
  • できた!

  • rails s でローカルのサーバーも立った(良かった……)

$ rake db:create
Created database 'rails_crud_development'
Created database 'rails_crud_test'

5. 参考URL

【Vue.js】Vuetifyを使ったプロジェクトで、scssがビルドできない

目次

  1. 事象
  2. 解決方法
  3. 参考URL

1. 事象

  • Vuetify で遊んでいたプロジェクトで、scss ファイルを使おうとしたら下記のエラーになる
SassError: semicolons aren't allowed in the indented syntax.
  • セミコロンが使えないのかな?と思い外してみると、また別のエラーになる
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
環境
  • Vue.js 2.6.11

  • Vue CLI 4.4.1

  • Vuetify 2.2.32

  • Vuetify-loader 1.4.4

2. 解決方法

  • scss ファイルはこんな感じにしています
src
├── assets
│   └── scss
│     ├── main.scss
│     └── _variables.scss
│
vue.config.js
scss とは別に、sass ファイルを読み込む記述を追加
  • sass ファイルの方はセミコロンなし
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/main.sass"`
      },
      scss: {
        prependData: `@import "@/assets/scss/main.scss";`
      }
    }
  },
  "transpileDependencies": [
    "vuetify"
  ]
}
src/assets/scss/main.sass
  • 中身が空っぽのファイルを作る

  • これでビルドが通る → ヤッター

3. 参考URL

【Vue.js】scssファイルを使いたい

やりたいこと

  • 色設定等を共通で使えるようにしたい
環境
  • Vue.js 2.6.11

  • Vue CLI 4.4.1

目次

  1. 構成
  2. 各ファイルの記述
  3. 参考URL

1. 構成

  • こんな感じにします
src
├── assets
│   └── scss
│     ├── main.scss
│     └── _variables.scss
│

2. 各ファイルの記述

src/assets/scss/main.scss
  • 個別に import しなくても良いように、まとめて読み込むためのファイル
@charset "UTF-8";
@import "variables";
scr/assets/scss/_variables.scss
  • 色設定を記述するファイル

    • 他、必要に応じてファイルを作ったら main.scss で import してあげる
@charset "UTF-8";
$mainColor: #ff99cc;
src/main.js
  • ファイルごとにいちいち import なんとか〜 しなくても良いように記述
require('@/assets/scss/main.scss');
vue.config.js
  • vue-loader に読み込んでもらう
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/scss/main.scss";`
      }
    }
  },
}
scr/App.vue
  • こんな感じで使えるようになる
<template>
  <div id="app">
    <span class="hoge">hoge</span>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss" scoped>
  .hoge {
    color: $mainColor;
  }
</style>

3. 参考URL

【Phalcon】Phalconことはじめ

Phalconで遊びたかったものの、日本語の参考記事があんまり出てこない!ドキュメントの翻訳も中途半端だ!と絶望していたのでメモです。

翻訳に参加してみたかったのですが、GitHubで受け付けてくれていないのがなんとなくハードル高い……。

この記事の目標
  • Phalconで新規プロジェクトを作成
環境
  • PHP 7.4.6

  • Phalcon 4.0.6

  • Phalcon DevTools 4.0.3

目次

  1. Phalconをインストール
  2. Phalcon開発者ツールをインストール
  3. プロジェクト作成
  4. 画面を表示してみる
  5. 参考URL

1. Phalconをインストール

  • 公式 の通りにインストール
$ brew tap phalcon/extension https://github.com/phalcon/homebrew-tap
$ brew install phalcon

2. Phalcon開発者ツールをインストール

  • このままだと phalcon コマンドが使えなくてしんどいので、開発者ツールも入れる

  • こちらも 公式 の通りに

$ composer global require phalcon/devtools

3. プロジェクト作成

  • phalcon-crud という名前で新規プロジェクトを作成
$ phalcon create-project phalcon-crud

4. 画面を表示してみる

  • 作成したプロジェクトのディレクトリ内で実行

  • 簡易webサーバーを、.htrouter.php をルートとして localhost:3000 で立てる

$ php -S localhost:3000 -t ./public .htrouter.php

ヤッター!

f:id:kyoruni:20200523195229p:plain

5. 参考URL