2018-07-30

Dockerでphpの開発環境整備など（開発報告）

かねてからやらないとやらないと、とおもっていた、あいこんくらぶ ( https://iconclub.jp ) ・ぴこぴよ ( https://picopiyo.iconclub.jp ) の開発環境整備（改善）をいい加減やらねばなーと思っていたので、週末をつかってガッとやってしまったのでした。（これやらないといろいろと捨てられなかったりするので、、、）

そのときの作業のメモを残しておきます。

phpのDocker ImageをつかってDockerfileをつくる

まずはphpのDocker Imageをとってきます。公式のイメージがありますが、利用バージョンや目的に応じていくつかの種類があります。今回は開発環境ウェブサーバ用としたいので、 Apacheとセットのものを使います。

最終的なアプリサーバのDockerfileはこんな感じ。

FROM php:7.0-apache
RUN docker-php-ext-install pdo_mysql
RUN a2enmod headers
RUN a2enmod rewrite
COPY config/php.ini /usr/local/etc/php/

MySQLをデータベースとして使いたいので pdo_mysql をインストールします。pdo_mysql が入っていないことに気づかずにずいぶん時間をつかってしまった...。（こちらの記事を参考にしました: PDO MySQL driver not found · Issue #62 · docker-library/php · GitHub）

さらにさらに、Apacheで有効になっていないモジュールは有効にしてあげる必要があるので、a2enmod をつかって有効にしたいモジュールを設定します。これをやらないと mod_rewrite 等が使えないのでした。

データベース周りと接続する

データベースにはMySQLを使いますが、MySQLまわりも公式イメージをつかいます。このイメージは各種環境変数を設定することで、ルートユーザーのパスワードを設定したり、ユーザーを作成したりすることができます。

MYSQL_USER, MYSQL_PASSWORD でユーザー名とパスワードを、 MYSQL_DATABASE でデータベース名を設定しておくと、ユーザーとデータベースが1つずつ作成され、作成されたデータベースに対して GRANT ALL 権限でアクセスすることができます。開発環境として簡単にDBアカウントを用意できて便利。

最終的な docker-compose.yml は概ねこんな感じ。これで docker-compose up で開発環境が起動できるようになりました。

version: '3'
services:
  app:
    build: .
    hostname: hoge.local
    container_name: app
    ports:
      - '8000:80'
    volumes:
      - ./app/:/var/www/html/
    links:
      - db

  db:
    image: mysql:5.7
    container_name: db
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: piyo
      MYSQL_USER: user
      MYSQL_PASSWORD: piyo
      MYSQL_DATABASE: foo

もうちょっと様子を見て、これでよさそうならよしとしたいぞ。ではではー。

2018-07-24

今週のだらりんぴっく(7/16の週)

さてさて、今週のだらだらの記録をば。とはいいつつも、今週はだらだらのほうも、週末開発のほうもあまり捗らなかったのでした。

とりあえずだらだらのお供にしたまんがをぺたり。

bookwalker.jp ひさびさに少女漫画っぽいやつを買ってみたのですが、絵も話も好みでよかったです。

www.comic-ryu.jp ずっと積読していたやつをようやく読んだのでした。最新刊が出てからしばらく続刊が出てない（休載している）みたいですが、いまは連載されているのかな...。単行本は続きが気になるタイミングで終わっているので、首を長ーくして続きを待ちます。

積読しているまんがが溜まりつつあるので、そろそろ消化していきたいぞー。

雑記その1

そういえば、Amazon Primeのセールがこの間ありましたが、11インチくらいの液晶ディスプレイを思わずポチってしまったのでした。（たしか1.2万くらいだったような...。同じものがAmazonでみつけられなかった。リンク先はちょっとだけ大きいバージョンのディスプレイ。） https://www.amazon.co.jp/ELECROW-11-6インチディスプレイ-最大解像度1920X1080-PS4WiiU-Raspberry/dp/B07871VPCS/

紹介ページの日本語が若干怪しかったりしていたこともあり、あまり大きな期待はしていなかったのですが、シンプルでよさそうな感じです。いまのところ動画を見ながら作業するのに重宝しています。

雑記その2

SUZURIでアクリルブロックが作れるようになったので、手持ちの絵をちょっと書き換えてつくってみました。

suzuri.jp

届いたらブログにアップしたりしてみるつもりです。

ではではー。

2018-07-22

（自分用めも）背景画像の無限スクロールをCSSアニメーションでつくる

この手の話題はいろいろなところで既出だとは思いますが、自分用にメモをば。

CSSアニメーションをつかって背景画像の無限スクロールをする方法です。画像の横スクロールをしたくなったのですが、以下のようにしてみました。

CSSアニメーションのキーフレームに background-position （背景画像のオフセット量）を設定して、背景画像を3秒で画像1枚分だけ横スクロールさせます。

.toppage-header__bg {
    width: 100%;
    height: 1000px;
    background-image: url('images/top_bg.png');
    animation-name: scroll-header-bg;
    animation-duration: 3s;                  /*3秒で画像1枚分スクロールする*/
    animation-timing-function: linear;       /*再生速度を一定にする*/
    animation-iteration-count: infinite;     /*アニメーションの無限再生*/
}

@keyframes scroll-header-bg {
    0% {
        background-position: 0 0;            /*初期値を設定する*/
    }

    100% {
        background-position: -2464px 0;      /*画像サイズに合わせて変更する（負号で左スクロール）*/
    }
}

CSSアニメーションとかトランジションとか、毎度プロパティ名とか忘れちゃうのですよね。というわけでメモしてみたのでした。ただいまみんなでつくるダンジョンの紹介ページを作っているのですが、CSSアニメーションをちょいちょいと使ってみようと思っています。アニメーションを入れるのは楽しいなぁ。

ではでは。

2018-07-16

開発報告（7/16）

製作報告みんなでつくるダンジョン

さてさていつもの開発報告をばをば。今週はアニメーション作成部分や素材登録まわりの見た目をちょっと整理していたり、認証系をごにょごにょしていたりしました。

アニメーション登録からマップに貼り付けるまで

せっかくアニメーション登録と利用の流れをお見せできる段階まで出来てきたので、まずは動いている様子をば。概ねこんな感じにアニメーションがつくれます。アニメーションに使いたい画像を一枚選び、ちまちまとコマを追加していきます。もちろんアニメーションの速度も変更できます。

f:id:piyorinpa:20180716221500g:plain — アニメーション作成のようす

このようにして作られた「フレーム」情報を用いて、都度画像から絵を切り出して表示することで、アニメーションを表現しています。この辺の処理はWebGLが効いているはずなのでそんなに重くないはず。。。

私はマップチップ文化な人なのでアニメーション作成はこのようなインタフェースとしたのですが、「gifを取り込めるようにしたほうがよかったかなぁ」など、ちょっと悩んだりもしたのでした。（まあgif->フレーム情報に変換すればgifの取り込みもできなくはないですが...実際のところどのようなUIが好まれるのかは、いまいちピンと来ていないところがあります。）

つくったアニメーションはこのように適用します。動かない絵も「アニメーション」として登録し、「オブジェクト」に適用します。

f:id:piyorinpa:20180716220815g:plain — アニメーションを適用しているようす

（くるくるまわっている画像はあいこんくらぶ::八面体クリスタル（bunaguchiさんの作品）から拝借しました）

こんなかんじに「オブジェクトを置き->アニメーションを適用」のながれでマップを作っていきます。実際に使ってみると、もうちょっと調整の余地がありそうなので、ちまちまと手を入れる感じにしようと思っています。

テクスチャの認証系まわりの処理の作成

アニメーションに使う画像は「テクスチャ」と呼びます。他の人のテクスチャを勝手に使われないように、基本的にはテクスチャの持ち主とマップの持ち主が一致していることを条件としたいので、そのあたりを確かめるための処理を作っていたりしました。おためしでJWT（JSON Web Token）をつかってテクスチャ利用の認可トークンをサーバ側で発行し、必要に応じて検証するようにしてみています。

雑記

「テストプレイどうしようかなー」と思い始め、ふとTwitterのアンケート機能を使ってみることに。どうでもいいですが、いつも「1票も入らなかったら落ち込むなー」と思いながらアンケート機能を使うことを躊躇しているのですが、今回は思い切ってみました。結果は以下の通り。

f:id:piyorinpa:20180716222910p:plain — 結果はこんなかんじでした

テストプレイ「やってみたい」という方がいらっしゃってうれしいです。まだぜんぜん何も決めていませんが、公開前に一回クローズドなテストプレイ環境をつくってもよいかもしれないなーと思ったのでした。

ではではー。

2018-07-09

開発報告（7/9)

製作報告みんなでつくるダンジョン

きょうは「みんなでつくるダンジョン」の開発報告をば。消化したタスクリストを眺めながら「何を紹介できるかな～」と思っていたのですが、そういえばログインの様子とかマップ上を動く様子とかを未だに動画でお見せしていないなと思ったので、きょうはその辺の様子を紹介しようと思います。

（ようやっとこの一連の流れをお見せできる程度には出来てきたのでした。）

マップを読みこんでテストプレイする様子

さっそく即席のgif動画をぺたり。なんだかカクカクしていますが、動画編集している余裕がなかったので今回は許してください。（ほんとうはちゃんとスムーズに動いていますが、gifのフレームレートを上げるとファイルサイズが大きくなってしまうので。。。）

f:id:piyorinpa:20180709210858g:plain — ログイン->マップ読み込み->テストプレイまで

ログインすると、「マップであそぶ」もしくは「マップを作る」を選択できます。今回は「マップを作る」を選択し、適当なマップを読み込んでみます。（動画中のマップチップは墨cmさん、bunaguchiさんのものをお借りしています。）

テストプレイボタンを押すと、予め登録したアバターをつかってマップ内を移動できます。もちろんマップを接続する「コネクタ」が適切に設定されていれば、他のマップに移動することもできます。

ロゴを走らせるようにしてみた

ログイン時に表示されるロゴを走らせるようにしてみました。

f:id:piyorinpa:20180709211742g:plain — ロゴが走るよ！

みんなでつくるダンジョンのウェブサイトは、なるべくわくわく感がでるデザインにしたいなぁと思っていたので、サイトに動きをつけたかったのでした。そこで、とりあえずキャラクターを走らせるようにしてみたのです。この走るキャラクターは3コマで構成されているのですが、普段絵を描かないので、ほぼ1日がかりで描きました。たいへんだった。。。

ログインまわりのデザインはもうちょっと手を加えて、うるさくない程度にわくわく感が出せればよいかなと思っています。私にはデザインの知識がないので、やっぱりこの辺で触りだけでもお勉強しておいたほうがいいのかな。

雑記

やっぱり動画のほうがわくわく感が伝わるかなぁと思うので、これからもなるべく動いている様子をお伝えできればなーと思っています。しかし、今は「とりあえず動く」段階から「ちゃんとサーバに上げて使えるようにする」段階になってきているのですが、進捗としてお伝えしづらい（目に見える機能の実装ではない）分部が多いので、なかなかやる気の維持が大変なのでした。

ではでは～

2018-07-03

今週のだらりんぴっく

雑記

今週（と先週）は風邪をひいてしまった関係で、だらだらがいつにも増してはかどってしまいました。たまには日記っぽいことも書いてみようと思ったので、この記事に需要があるのかはさておき、だらだらの記録を残しておきます。今週の開発の進捗はいまいちだったので、進捗報告のほうはのちほど。。。

まずはだらだらのお供にしたまんがをば。

bookmeter.com 水上先生の作品は「惑星のさみだれ」や「スピリットサークル」を読んだことがあり、とても好きなまんが家さんの一人です。放浪世界はいつか買おうと思っていたのに、本屋さんでなかなかお目にかかれず、ようやっと購入できたのでした。この単行本に収録されている「虚無を行く」というお話がすき。

sonorama.asahi.com 街中にある、ちょっと怪しいけど気になるあの店に入って堪能するはなし。私的気になりスポットの「浅草観音温泉」も載っていました。

つぎに「ポポロクロイス物語」を購入した話をば。

最近は作業用BGMとしてゲーム音楽を聴いたりすることもあります（Amazon Musicにそれなりにある）。ゲーム音楽はループして再生しておくにはちょうど良く、集中したいときにそれなりに重宝しています（といってもそのへんに詳しいわけではありませんが）。たまたまポポローグのゲーム音楽に出会ったのがきっかけでちょっと調べてみると、ジャケットの絵が好みかつ、ゲームタイトルの響きが良い感じだったので遊びたくなり、中古ゲーム屋さんでポポローグの前作に当たる「ポポロクロイス物語」を購入したのでした。

どうでもいいけど、PS1のゲームはもはや「レトロゲーム」カテゴリなんだなーと、久々に中古ゲームショップに訪れて思ったのでした。

クォータービューなRPGでかわいい感じの画面で、さほど難易度も高くなく（いまのところは）、疲れていても遊べそうなのでなんとか最後まで楽しく遊べそうです。（疲れていても遊べるというのは大事で、疲れている時期に歯ごたえのあるものを買ってしまうと高確率で積みゲーにしてしまうので... Cities Skylinesとかガンヴォルトの2作目とか、完全に買って満足してしまったので、そろそろ遊ばないと...）

ではでは。

2018-06-28

HTML5のバリテーション機能を使っておてがるバリデーションを試してみている

プログラミング JavaScript

今日も今日とてちまちまと趣味開発のほうを進めているのですが、各種値を入力->チェック->OKかどうかを確かめる実装を各所に行わなければならず、めんどい～となっていました。

たとえば以下の画面の入力欄は「編集画面のグリッド（点々）の幅を決める」ためのものですが、プログラム上では「数値かどうか」「最小値を下回っていないか」「最大値を超えていないか」を検証しなければなりません。

f:id:piyorinpa:20180628223450p:plain — グリッドサイズを変更するメニュー画面

そして、検証の結果、不正な値とみなせば、ユーザーにその旨伝えなければならないですが、そのための表示領域を設けたり、表示させたり、などなど面倒です。

そこで、HTML5のバリデーション機能を使ってこのような確認をやらせると楽だなと思い、今作っている趣味開発のものにおためしで実装したりしてみています。

例えばこんな感じ。最大値（max）最小値（min）必須入力項目（required）を設定しています。

<form id="confirm-form">
  x: <input type="number" class="size-input" min="5" max="300" required>
  y: <input type="number" class="size-input" min="5" max="300" required>
  <div class="bottom-buttons">
    <input class="button" type="submit" value="適用">
    <a class="button" href="#" @click.prevent="close">閉じる</a>
  </div>
</form>

<script type="text/javascript">
  document.getElementById("confirm-form").addEventListener('submit', function(e) {
    alert('値の検証に成功しました！');
    e.preventDefault();
  });
</script>

最小値や最大値に収まらない値を入力して「適用」ボタンを押すと、数値が間違っている旨メッセージが表示されます。このメッセージはブラウザが勝手につくって表示してくれるので、別途表示領域を設けたり、警告文を作ったりする必要がないのでらくちんです。ルールに沿った値を入力して「適用」を押せば、alertが表示されます。

f:id:piyorinpa:20180628223748p:plain — 数値がルールから外れたまま「適用」ボタンをおすとメッセージが表示される（Chromeの場合）

（表示はブラウザによって異なります。上記はGoogle Chromeの場合）

form要素とsubmitボタンを置くことでバリデーションをさせることができますが、検証に成功するとページ遷移してしまいます。ふつうにFormでPOST送信する場合はそれでもいいですが、JavaScriptで入力された値を使ったり、Ajaxで値を取りに行くような実装にしたいときは困ります。そこで、e.preventDefault() をしてあげることでデフォルトの挙動を停止し、ページ遷移を防ぐことができます。

Vue.jsで同様のことをする場合は、 @submit.prepend としてあげることで、「適用」ボタンが押されてもフォーム送信によるページ遷移を防ぐことができます。（唐突にVue.jsが出てきたのは、今作っている趣味開発のものがVue.js製のためです）

以下のような記述をした場合、検証に成功したら @submit で設定したメソッド（以下の場合だと appendSettings）が呼ばれます。

<form @submit.prepend="appendSettings">
   x: <input type="number" class="size-input" min="5" max="300" required>
   y: <input type="number" class="size-input" min="5" max="300" required>
  <div class="bottom-buttons">
    <input class="button" type="submit" value="適用">
    <a class="button" href="#" @click.prevent="close">閉じる</a>
  </div>
</form>

さきほどの「グリッド間隔を変更するメニュー」画面に適用するとこんな感じになりました。「適用」ボタンが隠れてしまっていますが、値を再入力することで警告ふきだしは消えます。

f:id:piyorinpa:20180628224704p:plain — グリッド間隔を変更しようとして失敗した様子

警告文を示す吹き出しはブラウザが勝手に作ってくれる分、警告文の文言や表示位置、デザインに融通を効かせたい場合は不都合ですが、おてがるな点が良いと思っています。

ちなみに、ブラウザによっては、この手のバリデーションに対応していなかったりしますが、趣味開発なので気にしないことにしています。

ではでは～