はこねのはこ

はこねさんの備忘録

Unity1週間ゲームジャム[10]ラーメン屋"十秒魂"公開しました。

はじめに

今回も参加しましたUnity1week(20181119-25)。
忘れないうちに振り返っておきます。 イラストははいき丸さんです。 はいき丸(@haikimaru)さん | Twitter

f:id:hakonebox:20181128205022g:plain

今回も素敵なイラストです。

URL

下記URLから遊べます。 ぜひ遊んで見てください。

ラーメン屋 "十秒魂" | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

制作過程

プロトタイプ作成

今回の作品はラーメン職人です!!
ラーメンの硬さに10秒でハリガネという硬さがあるようですね。
(世の中には粉落としとか生麺があるそうですが...)

10秒の湯切りにこだわりを持つ職人が
10秒きっかりに湯切りをするゲームにしました。

アイディアがだいたいまとまってきたので、プロトタイプを作成しました。

イラスト作成

プロトタイプを元にはいき丸さんと打ち合わせ。 可愛い絵に仕上げてもらいました。

このカットイン、何かに使いたかったのですが、実装しきれませんでしたね。
時間的にも難しかったですし、ルールが複雑化する懸念もあったで、 泣く泣く断念しました。

コアになる処理(茹でる/湯切り)の作成

できたイラストを組み込みながら、コアとなる茹でる/湯切りの処理を作成

材料を切る処理の追加

ただ10秒カウントするだけであれば物足りない気がしたので、
材料を準備する動作を追加しました。

体内時計で2つ同時に10秒測りながら材料の準備をしていると激ムズになりました。
意識が材料に向いちゃうとカウントがわからなくなりますね。

そこそこ注意を向けないとできないけど、
そこそこ10秒カウントにも意識を向けられるような動きにしました。

上から下、または下から上にドラックすると切れるようにしました。

公開へ

安定の遅刻。

一時間ほど遅刻して投稿しました。

今回ゲームを作成する上で考えていたこと

今回のゲームは、
"初めは動作が難しいけれど、動作になれたり動きが最適化されて高得点になっていく"
を考えていました。

10秒数えている間にする最中に食材を切る操作があるのですが、
操作に慣れてくると、リズミカルにできるようになるといいなと考えました。 例えば、
残り時間を見る→茹始める→材料を切る→準備を整えたら残り時間からタイミングを測って湯切り...
と、自分の中の最適化パターンを見つけることができれば、脳とマウスをリズミカルに動かして楽しめることを狙いました。

プレイしていただい方いかがだったでしょうか。

自分としては、良い難易度にできたと思いました。 ただ、操作方法がわかりにくいとの声も聞きました。

リズミカルに動かせるようになるまで遊んでもらいたかったので、 チュートリアルや練習モードを作れれば良かったですね。

さいごに

1時間ほど遅刻してしまいましたが、
今回も開発楽しかったです。

さーてアドベントもガンバルゾー

Pythonチートシート

はじめに

Pythonチュートリアルを見ながら実際に動きを試しながらチートシートを作成しました。

Python チュートリアル — Python 3.6.5 ドキュメント

どこでも見ることができるように載せておきます。

文字の入出力

print('hello python')
num = str(input('文字を入力してください:'))
print('入力した文字は['+num+']です')

a = 7
b = 3
print('a+b='+str( a + b ))       # a+b=10
print('a-b='+str( a - b ))       # a-b=4
print('a*b='+str( a * b ))       # a*b=21
print('a/b='+str( a / b ))       # a/b=2.3333333333333335
print('a//b='+str( a // b ))         # a//b=2
print('a%b='+str( a % b ))   # a%b=1
print('a**b='+str( a ** b )) # a**b=343
c= 2+3j   # おまけ 複素数を表す場合jまたはJ

文字列型

'または"で囲むと文字列になる。 ¥でエスケープする

print('single')        # single
print("double" )  # double
print('esc¥"')        # esc"

¥に続く文字を特殊文字としてされたくない場合はraw stringsを利用

print('C:¥dir¥name')
# ¥dir
# ame
print(r'C:¥dir¥name') 
# ¥dir¥name

3重で囲むと複数行にまたがって表示可能

# 最初の改行文字を含まない
print("""¥
Usage: thingy [OPTIONS]
     -h                        Display this usage message
     -H hostname               Hostname to connect to
""")

文字の連結

+で結合、*で反復

print( 3 * 'abc' +'de')  # abcabcabcde

連続している複数の文字列リテラルは自動的に連結

print('abc' 'de') # abcde

print(   'くぁwせdrftgyふじこ'
        'lp;「’」」')   # くぁwせdrftgyふじこlp;「’」」

インデックスによる取得

word = 'teizinitaisya'
print(word[0])              # t
print(word[3])              # z
print(word[-1])             # a
print(word[-8])             # n
print(word[0:5])           # teizi
print(word[7:13])          # taisya
print(word[:5]+word[5:])   # teizinitaisya
print(word[-6:])            # taisya

リスト型

editors = ['VSC','Atom','Vi','Emacs']
print(editors)       # ['VSC', 'Atom', 'Vi', 'Emacs']
print(editors[1])   # Atom
print(editors[:])    # ['VSC', 'Atom', 'Vi', 'Emacs']
print(editors[2:])  # ['Vi', 'Emacs']

# 連結が可能
editors+=['Mifes','秀丸']
print(editors)       # ['VSC', 'Atom', 'Vi', 'Emacs', 'Mifes', '秀丸']

# 入れ替えが可能
editors[0] = 'Visual Studio Code'
print(editors)       # ['Visual Studio Code', 'Atom', 'Vi', 'Emacs', 'Mifes', '秀丸']

# 追加
editors.append('sakura')
print(editors)       # ['Visual Studio Code', 'Atom', 'Vi', 'Emacs', 'Mifes', '秀丸', 'sakura']

# All clear
editors[:] = []
print(editors)       # []

# split()でリスト化する
editors = 'VSC,Atom,Vi,Emacs'
print(editors)       # VSC,Atom,Vi,Emacs
list_editors = editors.split(',')
print(list_editors)  # ['VSC', 'Atom', 'Vi', 'Emacs']

条件式

if

num = int(input('1‾5の数字を入力してください:'))
if num > 5 or num < 0:
    print('範囲外')
elif num <= 3 and num >= 0:
    print('まだまだだね')
else:
    print('やるじゃん')

繰り返し処理

for

# list型
# list
foods = ['curry', 'hamburg', 'deep-fried']
for food in foods:
    print(food)

# range
print('range(5)')
for num in range(5):
    print(num)
print('range(-2,3)')
for num in range(-2,3):
    print(num)
print('range(0,10,3)')
for num in range(0,10,3):
    print(num)
print('range(-10,-30,-5)')
for num in range(-10,-30,-5):
    print(num)

組み込み関数

len()

文字列の長さを返す

s = 'madamadadane'
print(len(s))     # 12
print(len(s)+10)     # 22 (計算が可能)

range()

イテレートした時に望んだ数列の連続した要素を返すオブジェクト

# 0‾4(増加量1)
range(5)
# -2‾2(増加量1)
range(-2,3)
# 0‾10(増加量3)
range(0,10,3)
# -10‾-30(増加量-5)
range(-10,-30,-5)

pass

文を書くことが構文上要求されているが、プログラム上何の動作もする必要がない時に使われます.

print( 'Busy-wait for keyboard interrupt (Ctrl+C)')
while True:
    pass

モジュール

random

import random

for i in range(5):
    num = random.randint(0,10)
    print(num)

おわりに

チュートリアル試しながらチートシートまとめてたら覚えてしまったっぽい

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