はこねのはこ

はこねさんの備忘録

Atomエディタでカラーコードを楽に指定したい

はじめに

AtomCSSのカラーコードを入力するときに、 いちいち調べるのは面倒です。

できるだけ楽したいのでパッケージを使用しています。

color-picker

atom.io

[cmd]+[Shift]+[C]でカラーパレッドのような画面が出てきます。 f:id:hakonebox:20181019223915p:plain

また、入力しているカラーコード選択時にcolor-pickerを起動すると、
選択していた色から変更ができ、
変更前との色を比較しながら選択することができます。

PIGMENTS

atom.io

エディタ上のカラーコードの背景をその色にできます。

以前はatom-color-highlightというパッケージを使用していたのですが、 いつの間にか削除(?)されてしまい、

他で見つけたのがこのPIGMENTSでした。

f:id:hakonebox:20181019224703p:plain

おわりに

カラーコードを調べるときにAtom上で完結するので便利です。

Buefyの環境構築(mac,Buefy_v0.7.0,vue-cli)

はじめに

個人的にリスペクトしているMさんから 「Buefyはいいぞ」と話を聞きました。

なるほど。Buefyはなんのことかわからないですが、
いいものなら使ってみようと思い、とりあえず何か動かしてみようと思います。

Buefyとは

buefy.github.io

BulmaとVue.jsを組み合わせたモダンなUIコンポーネントのようです。

公式サイトを見てみると、 チェックボックスラジオボタン、入力フォーム等がありました。

レイアウト面はBulma、動作はVue.jsで行なっているそうです。
それぞれのいいとこ取りなんですね。

Documentationのcodeをコピペで使えるとのことなので、
導入も簡単そうです。

Bulmaとは

bulma.io

Vue.jsとは

Buefyの利用にはVue.js ver2.5以降が必要とのことです。

vuejs.org

Buefyの環境構築

PC環境

node.jsのインストール

推奨版の8.12.0 LTEにしました。

$ node -v
v8.12.0
$ npm bin -g
/usr/local/bin

nodejs.org

vue-cliのインストール

$ sudo npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

WARN deprecatedとありますが、将来的にcoffee-scriptがcoffeescriptのハイフン無しになるという警告のようです。無視します。

プロジェクトの生成

適当なディレクトリに移動します。

vue init webpack demoBuefy

? Project name (demoBuefy)←プロジェクト名(大文字はダメとのことです。)
? Project description:←プロジェクトの説明
? Author: ←著者名
? Vue build:←矢印キーで選択(Runtime + Compiler: recommended for most usersにしました)
? Vue router:←vue-routerを使いますか(Y)
? Use ESLint to lint your code:←静的解析ツールのようです。(n)
Setup unit tests:←Jestを選択しました
Setup e2e tests with Nightwatch? ←ブラウザテストを自動化するフレームワーク(n)
? ? Should we run `npm install` for you after the project has been created? (recommended) ← Burfyの公式サイトをみるとNPMかYarnのようです(NPM)

...いろいろあって...

# Project initialization finished!
# ========================

To get started:

  cd demoBuefy
  npm run dev

画面の通りに入力すればNPMが立ち上がります。

$ cd demobuefy
$ npm run dev

http://localhost:8080にアクセスするとvue-cliの開発画面が立ち上がりました。 f:id:hakonebox:20181018233627p:plain

Buefyのインストール

package.jsonのdevDependenciesの配列に次のコードを追加しました。
"webpack-merge": "^4.1.0",
"buefy": "^0.7.0"

  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
...いろいろあって...
    "webpack-merge": "^4.1.0", 
    "buefy": "^0.7.0"
  },

保存したらインストールを始めます。
demobuefyディレクトリ内で以下のコマンド。

$ npm install

バンドルを追加します f:id:hakonebox:20181018235204p:plain

Buefy/demoBuefy/src/main.jsに貼り付けます。こんな感じ

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)
import App from './App'
import router from './router'

再度NPMを立ち上げます。

$ npm run dev

f:id:hakonebox:20181018235729p:plain

文字が細くなりました。成功のようです。
これでBuefyが使えるようになりました。

使ってみる

CollapseのPanelを使ってみようと思います。

buefy.github.io

< > Show codeで開き、Copyを押します。
以下のコードがコピーされます。

<template>
    <section>

        <div class="block">
            <button class="button is-medium is-primary"
                @click="isOpen = !isOpen">
                Toggle
            </button>
        </div>

        <b-collapse class="panel" :open.sync="isOpen">
            <div slot="trigger" class="panel-heading">
                <strong>Title</strong>
            </div>
            <p class="panel-tabs">
                <a class="is-active">All</a>
                <a>Public</a>
                <a>Private</a>
            </p>
            <div class="panel-block">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
                Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br/>
                Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
            </div>
        </b-collapse>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                isOpen: true
            }
        }
    }
</script>

この文章を
Buefy/demoBuefy/src/components/HelloWorld.vue
に貼り付けて上書きします。

f:id:hakonebox:20181019005354p:plain

文章が消えて、ボタンが表示されました。

無事にBuefyが動作しているようです。

課題

vue-cliについて、何も知識がないので、 使い方を学習して行こうと思います。

さいごに

Bulmaもvue-cliもBuefyも初めて聞いた状態からここまで進めることができました。
Vue.js面白そうですね。

参考にさせていただきました

tonyo.design

qiita.com

HTML_CSSで使ったタグを追記していく

はじめに

HTMLわからん状態なので、調べて使用した機能を追記していきます。
自分用のメモを作ってみたい。

見出し

<h1>見出し1</h1>
<h2>見出し1</h2>
...
<h6>見出し1</h6>

見出し6まで使えるみたい。

段落

<p>自動で改行されます</p>

改行

<br>行できました


行できました

グループ化

<div>
このグループは
同じグループです。
</div>

id属性

要素に対してID(固有の識別名)を付けることができる。
同じ文章内には一つのみ存在できる。
大文字小文字を区別する。

id='name'

class属性

要素に対してクラス名(分類名)を付けることができる。

class='name'

CSS適応

idに対してCSS適用

CSSで#ID名とする。

<h1 id='title'>ラーメンが食べたい!!</h1>
#title{
  color:#116ecf;
}

classに対してCSS適用

CSSで.クラス名とする。

<div class="parent">
    ブロック要素
</div>
.parent{
    color:#116ecf;
}

センタリング

<div style="text-align:center">センターに表示されるよ</div>
センターに表示されるよ

表を作る

tableはテーブルは表を作成するタグ。
tr:縦方向
td:横方向

<table>
  <tr>
    <td>日付</td>
    <td>名前</td>
    <td>タスク</td>
    <td>補足</td>
    <td>完了日</td>
  </tr>
  <tr>
    <td>18/10/15 19:14</td>
    <td>YYY</td>
    <td>コーディング</td>
    <td>-</td>
    <td>未完了</td>
  </tr>
</table>
table {
    border-collapse: collapse;
}
td {
    border: solid 1px;
    padding: 0.5em;
}
日付 名前 タスク 補足 完了日
18/10/15 19:14 YYY コーディング - 未完了

リンク

<a href='https://hakonebox.hatenablog.com/'>はこねのはこ</a>

はこねのはこ

背景色を変える

body {
  background-color:#39C;
}

太文字にする

.ex1{
  font-weight: bold;
}
.ex2{
 /* 100-900で設定 */
  font-weight: 900 ;
}
.ex2{
/* 親要素の文字の太さに対して、1段階太く 
 * 逆の場合はlighter
 */
  font-weight: bolder;
}

フォントの種類を変更

.font{
  font-family: 'arial black';
}

さいごに

調べるたびに増やして行こうと思います。

Railsの開発環境をAtomでまとめた

はじめに

やっとローカルでRails開発始められるようになりました。
開発に必要なものをできるだけ1画面に収めたかったのですが、 いい感じにできたので使ったパッケージをメモ。

前回の話はこちら hakonebox.hatenablog.com

見た目

こんな感じになりました。 f:id:hakonebox:20181017221245p:plain

入れたパッケージ

browser-plus

ブラウザの機能を追加してくれます。
macの場合は'ctrl + option + o'で起動。
f:id:hakonebox:20181017221653p:plain
このLiveボタンを押していると、html等を変更した時にすぐに反映してくれます。
HTMLがどう表示されるのか試しながら書いているのですごい助かります。

atom.io

platformio-ide-terminal

Atom上にターミナルを表示できます。
macの場合は'shift + command + t'で起動。
複数開けました。 AtomのAdd Project Folderで指定したフォルダをカレントディレクトリにしてくれるようです。

atom.io

おわりに

環境が整えられるとやる気出てきますね。

Railsの開発環境を用意するメモ(Mac)

はじめに

macbookpro2012から2018に乗り換えたのでRailsの環境構築します。 (いまさら)

Dockerで完結しようと思いましたが、ローカルにも作っておきます。

環境

手順

rbenvのインストール

rbenvでrubyバージョンを切り替えることができます。

$ brew install rbenv

$rbenv --version
rbenv 1.1.1

インストールできました。

rubyのインストール

バージョン一覧を確認

rbenv install -l
2.4.3
2.4.4
2.5.0-dev

Progateで学習したバージョンに合わせて2.4.4にします。

$ rbenv install 2.4.4

パスの設定をします

$ touch ~/.bash_profile
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

全てのシェル内で使用されるRubyのグローバルのバージョンを設定します

$ rbenv global 2.4.4
$ ruby --version
ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]

2.4.4に変更することができました。

bundlerのインストール

rubyのライブラリ’gem’を管理できます

$ sudo gem install bundler
$ rbenv rehash
$ bundler --version
Bundler version 1.16.6

MySQLのインストール

$ brew install mysql
MySQL --version
MySQL  Ver 8.0.12 for osx10.13 on x86_64 (Homebrew)

Railsのインストール

$ sudo gem install rails --version "5.0.3"
$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

うまくできなかったのかな。 ググった結果以下のコマンドの入力

$sudo gem install railties && rbenv rehash
$ rails -v
Rails 5.2.1

5.2.1が入ってしまった。
Gemfile作る時になんとかしようと思います。

プロジェクトフォルダの作成

$ mkdir 08_Ruby_Rails
$ cd 08_Ruby_Rails/

Railsアプリケーションの準備

$ rails new mussle_logger
Errno::EACCES: Permission denied @ dir_s_mkdir -

エラーが出たので権限の確認

~/.rbenv/versions/2.4.4/lib/ruby/gems/2.4.0/extensions:ls -la
total 0
drwxr-xr-x  3 username  staff   96 10 16 21:42 .
drwxr-xr-x  8 username  staff  256 10 16 22:10 ..
drwxr-xr-x  3 root    staff   96 10 16 21:42 x86_64-darwin-17

権限がrootになっているのが問題らしいです。

sudo chown username x86_64-darwin-17/
ls -la
total 0
drwxr-xr-x  3 username  staff   96 10 16 21:42 .
drwxr-xr-x  8 username  staff  256 10 16 22:10 ..
drwxr-xr-x  3 username  staff   96 10 16 21:42 x86_64-darwin-17

しかしこれでも同じようなエラーが発生

$ sudo gem update
Updating installed gems
Updating did_you_mean
ERROR:  Error installing did_you_mean:
    did_you_mean requires Ruby version >= 2.5.0.
Gems updated: did_you_mean
$ rbenv install 2.5.0
& rbenv local 2.5.0
$ gem update
rbenv local 2.4.4
rails new mussle_logger --skip-bundle
bundle install --path vendor/bundle
bundle exec rails s

http://0.0.0.0:3000/

f:id:hakonebox:20181016231349p:plain

さいごに

やーーーっとYayできました。 恐ろしいほど疲れた。

追記20181017

次の日もう一度rails new mussle_loggerを実行したら何事もなかったかのように通りました。 PCはスリープだったし、ターミナルの再起動? なぜかわからないのが逆に怖い。

参考

参考にさせていただきました。

prog-8.com

ruby.studio-kingdom.com

qiita.com

qiita.com

qiita.com

Ruby - sqlite3のエラーでサーバーが建てられません|teratail

バッチファイルを作成して起動するだけでその日の日付のフォルダを作成する

はじめに

小さなことから楽したいと考えていた時に、このbatファイルを作成しました。

batファイルは食わず嫌いで全く興味なくて調べたことなかったけど、 結構気軽に動かせそうです。

環境

Windows10

なぜつくったの

仕事厨二、その日の日付でフォルダを作ることがよくあるのですが、
毎回作成することがものすごく面倒に感じたので、
ダブルクリックでbatファイルを叩けばその日の日付ファイルが作成できるようにしました。

できたもの

: エコー機能無効
@echo OFF

: 日付を取得し'/'を取り除く
set dirname=%DATE:/=%

: 西暦の千の位、百の位を取り除く
set today=%dirname:~2,6%

: ディレクトリの作成
mkdir %today%

cd %today%

mkdir 01_todo
mkdir 02_done

おわりに

日常の作業を楽できる方法をもっと知りたい。

Unity 画像の向きを反転させる

はじめに

2Dゲームを作っていて、右向きの画像を左向きにするなど、反転させたい時があります。 その時の実現方法のメモです。

動いてる様子

f:id:hakonebox:20181014203254g:plain

実現方法

transform.のScaleのXを1と-1で切り替えると良さそうです。

public class ActorManager : MonoBehaviour
{
    public enum DIR
    {
        NONE,
        LEFT,
        LEFT_UP,
        UP,
        RIGHT_UP,
        RIGHT,
        RIGHT_DOWN,
        DOWN,
        LEFT_DOWN
    }
    public static Vector3 SetObjectDir(DIR dir)
    {
        Vector3 vector3 = new Vector3(1, 1, 1);
        switch (dir)
        {
            case DIR.RIGHT: 
                vector3 = new Vector3(-1, 1, 1); //右方向を向く
                break;
            case DIR.LEFT: 
                vector3 = new Vector3(1, 1, 1); //左方向を向く
                break;
            default:
                //do nothing
                break;
        }
        return vector3;
    }
}
        switch (charMoveSi)
        {
            case MOVE_DIR.STOP:
                break;
            case MOVE_DIR.LEFT:
                transform.localScale = ActorManager.SetObjectDir(ActorManager.DIR.LEFT);
                break;
            case MOVE_DIR.RIGHT:
                transform.localScale = ActorManager.SetObjectDir(ActorManager.DIR.RIGHT);
                break;
        }

おわりに

実現できるようにはなりましたが、なんだか納得できていません。
戻り値にVector3つかって、transform.localScaleに入れるのはどうなんでしょう?
もっとスマートにかけるような....