WordPressから自分でフレームワークを使用したWebサイトへの移行【Laravel】~第2回 機能編~

どうも、sh0です。

前回からに引き続き

  • WordPressから自分でフレームワークを使用したWebサイトへの移行

を進めていきたいと思います。

今回は、第二回の機能編として、必要な機能について検討して行きたいと思います。

まだ、1回目を見ていないという方は、こちらからどうぞ

 

必要な機能の洗い出し

機能の洗い出しの前に前提を少しだけ。

このサイト「1日1本アプリ開発」は、3人で作成しています。

  • sh0・・・エンジニア(私)
  • moza・・・エンジニア
  • オザワ・・・エリートサラリーマン(非エンジニア)

エンジニアでないオザワさんもいるので、記事更新の際にもWordPressのように管理画面のようなものは、必須となります。

では、洗い出しを始めていきましょう。

まずは、ズラズラズラと、書き出します。

  • 記事を表示するための画面・機能
  • 記事を投稿・編集するための画面・機能
  • コメント画面・機能
  • お問合せ画面・機能
  • 全ての画面のデザイン
  • SEO関連の機能
  • その他固定ページ(プライバシーポリシー等)
  • カテゴリー機能 etc

何も考えずに書き出しましたが、一旦こんなものでしょうか。

何か抜け漏れありそうな気もしますが、まずはこれで全てと考えましょう。

(ちゃんとしたウォーターフォール型モデルで進めるんなら、ここでアウトっぽいですが、作業は私一人でやるんで、気にせず行きます。思い出したら付け足せばええよ)

さあじゃあ、機能は洗い出せた!では、作業に移ろうか!!

とは、流石になりませんね。

 

優先順位付け

何せ、そこまで時間はありません。これら全てを一から作っていたら、いくらなんでも時間が足りなくなります。(第100回とかまでかかってしまいます)

なので、先ほど洗い出した機能について、ちょっとだけ補足していきます。

  • 記事を表示するための画面・機能→必須
  • 記事を投稿・編集するための画面・機能→必須
  • コメント画面・機能→必須でない
  • お問合せ画面・機能→広告関係で必須
  • 全ての画面のデザイン→Laravelのデフォルトで一旦いいや
  • SEO関連の機能→必須でない
  • その他固定ページ(プライバシーポリシー等)→広告関係で必須
  • カテゴリー機能→必須でない

これで必須と必須でないものにいったん分けられましたので、

必須でないものは後回しにします。

まずは残ったこちらを考えていきます。

  • 記事を表示するための画面・機能
  • 記事を投稿・編集するための画面・機能
  • お問合せ画面・機能
  • その他固定ページ(プライバシーポリシー等)

 

1つ1つの詳細を考えていく

1.記事を表示するための画面・機能

これに関しては、基本的に作るしかないんですが、どこまでを1から作るかを考えなければいけません。

  • これまでの記事はどうするか
    • wordpressのDBはそのままに参照するか
    • DBから作り直してコンバートするか
  • デザインは一旦、Laravelのデフォルトを使用する

ここでは、検討内容については答えを出しません。

第3回の着手編でやりながら答えを出していきます。

2.記事を表示するための画面・機能

1に関連するので、被りますが、

  • これまでの記事はどうするか
    • wordpressのDBはそのままに参照するか
    • DBから作り直してコンバートするか
  • 管理画面を1から作るのは手間なので、wordpressのダッシュボード(記事の更新)だけは利用できないか

下側を利用する場合は、wordpressから脱却できていませんが(笑)、この辺は時間との相談ということで。

3.お問合せ画面・機能

これは、もうLaravelで作っているのがあるので、そのまま流用します。

4.その他固定ページ(プライバシーポリシー等)

これは、正直考える必要もないレベルです。1を作る際に、固定ページも一緒に考えようってだけですね。

 

まとめ

少し長くなってしまいましたが、まとめとしては、とりあえず

  • 記事を表示するための画面・機能
  • 記事を投稿・編集するための画面・機能
  • お問合せ画面・機能
  • その他固定ページ(プライバシーポリシー等)

を作って、後は一旦後回し!徐々にやっていこう。です。以上!

 

 

次回の私の更新は、2019/12/23です。

第3回目では、着手編について考えて行きます!

是非見てください!

WordPressから自分でフレームワークを使用したWebサイトへの移行【Laravel】~第1回 検討編~

どうも、sh0です。

今回から今月5回に渡って、

  • WordPressから自分でフレームワークを使用したWebサイトへの移行

の検討・実施を行っていきたいと思っています。

*2019/12/15の現在このサイトはWordPressで作成しております。

第1回目の今回は、実施を行う前に、

を記載して行きたいと思います。

 

 

なぜWordPressをやめようと思ったのか

まず、1番の理由をキッパリと書きます。

WordPressは、使っててなんかつまらない

はい、すみません。結局理由なんて、こんなものです。

ただの私の気持ちが原因な感じです。

細かい理由も念の為、上げておきます。

  • WordPressを使用していることがすぐにさとられる
  • デザインが似たりよったりのものになりがち
  • 更新が頻繁にくる
  • プログラムが不要
  • 自分でサイトを作っているといってもWordPressだと成果とは言いづらい
  • 細かいJSでのカスタマイズなどがやりづらい etc…

といった感じでしょうか。まあ、これら逆を言えば、全てメリットとも言えるんですがね。

今回は、まあ記事のネタも兼ねて(本音)、やっていこうと言うことです。

 

 

移行先にLaravelを選んだ理由 

ご存知の方も多いと思われますが、LaravelはPHPのフレームワークです。

ここ最近では、PHPのWEBフレームワークとしては、1番の人気を誇っていると思われます。

私自身も仕事として、Laravelを使用したサイト作成をいくつもやってきましたが、とても使いやすいと思います。

個人で運用しているサイトでもLaravelを使用して作成しているものがいくつかあります。

え?つまり、簡単で慣れているからと言う理由だけで、Laravelにしたと言うことかって?

それもあります(それしかありません)

ですが、念の為、他の候補とそれらの検討結果だけ記載しておきます。

候補検討から外れた理由
CakePHP(PHP)・(筆者個人が)Laravelの方が慣れている
・世の中の使用頻度もLaravelの方が増えている(今後も安定した更新、使ったことのある人が増えることが見込まれる)
django(Python)・Pythonの勉強にもなるが、どうしてもPHPより慣れていない分、作業に手間がかかる
・Webフレームワークとして使用するには、CakePHPやLaravelに比べると用意されていない機能が多い

どれも大した理由ではないです。

好みと思ってもらっても良いかしれません。

  

 

まとめ

WordPressをやめる理由→好み

Laravelにした理由→慣れている

 

以上!

 

 

次回の私の更新は、2019/12/19です。

第2回目では、機能の設計について考えて行きます!

是非見てください!

【1日1本アプリ開発】同時にこなせ!【19本目】

どうもsh0です。

開発19本目のアプリです。

今日のアプリ

【1日1本アプリ開発】同時にこなせ!【19本目】

アプリ解説

今回は1つのアプリで同時に二つのゲームをこなすアプリを作成しました。

17本目

左側のアプリは、17本目に作成したパズルゲームを配置しております。

そして、右側の画面には、横スクロールゲームとして、
猿に対して落ちてくる岩にあたらないように逃げるというゲームを配置しました。

どちらが失敗したとしても、
GameOverになってしまい、うるさい猿のページに飛ばされます。

ゲームとしては、どちらも単品だとそんなに難しくないと思いますが、
どちらも同時にとなると、意外に難しくなるんですね!

なんか昔、脳トレとかで、同時に何かをこなす!みたいなのがあったような、なかったような…
からヒントを得て、作成しました!
(脳トレではなかったかもしれませんが)

今日のちょっとソース。


後日記載致します


使用ミドルウェア

【使用ゲームエンジン】
Unity2018.3.5.f1

【プロジェクト管理】
git(Bitbucket使用)

【Unity】SE音の設定【正解音・ハズレ音】

今回のソースは、SE音の設定についてです。

使用するのはAudio Sourceコンポーネントです。

SE音だけでなく、BGMなんかもこいつの設定で簡単に出来ますね。

まずは、Hierarchy内にあるオブジェクトに対して、Audio Souceをアタッチします。

そして、流したい音楽を、AudioClipに設定するだけ。

なんとこれだけで、音楽が流れ出します。

BGMなんかは本当にこれだけの設定で完了ですね。

今回の様な正解音やハズレ音といったSE音は、
ゲーム開始にすぐなってもらって、
終わりでは困ります。

ユーザの選択によって、

あっている→正解音
外れている→ハズレ音

と流れて欲しいわけです。

ですので、第一段階として、
まずはゲーム開始時にならない様にします。

画像の中にある、
Play On Awake
これのチェックを外しましょう。

次の動作としては、
ユーザのタップで正解音・ハズレ音のいずれかを鳴らす必要があります。


 // クリック処理(正解時) 
Collect = GameObject.Find("Collect");
Collect.GetComponent<AudioSource>().Play();

 // クリック処理(ハズレ時) 
Fail = GameObject.Find("Fail");
Fail.GetComponent<AudioSource>().Play(); 

コードはこれだけです。

やっていることは、AudioSourceのPlay()という関数を呼ぶだけなんですね!

とてもわかりやすく用意されていますね!
(私はすぐ忘れるのでメモです )

【1日1本アプリ開発】大きくしろ!【17本目】

どうもsh0です。

開発17本目のアプリです。
(けっして下ネタではありません)

【1日1本アプリ開発】大きくしろ!【17本目】

今回は表示される数字の中から大きな数字を選択していき、
100を目指すパズルゲームです。

  
 
表示される9つの数字は前回選択した数字から
ランダムで-10から+4位までの値が表示されます。

 ですから間違って、前回より小さい数字を選んでしまうと、
かなりの時間ロスになってしまうので、
クリアがとても難しくなります。

 
 (というか、多分一回でも間違うとクリアできないのでは、ないかと思います)

・今日のちょっとソース。


【Unity】SE音の設定【正解音・ハズレ音】


【使用ゲームエンジン】
Unity2018.3.5.f1

【プロジェクト管理】
git(Bitbucket使用)

【1日1本アプリ開発】漢字を作れ!【14本目】

どうもsh0です。

開発14本目のアプリです。

【1日1本アプリ開発】】漢字を作れ!【14本目】

今回は漢字選択パズルゲームです。

問題はいろいろ用意しましたが、一旦1問だけ…
(すみません。時間に間に合わず…)

1問だけですが、正直結構難しいと思います。

一発でクリアできる人は、結構頭いいと思います。

私には無理です。

・今日のちょっとソース。

オイスターソース


すいません。改めて更新します。


【使用ゲームエンジン】
Unity2018.3.5.f1

【プロジェクト管理】
git(Bitbucket使用)

【1日1本アプリ開発】謎を解け!【12本目】

どうもsh0です。

開発12本目のアプリです。

【1日1本アプリ開発】謎を解け!【12本目】

今回は謎解きゲームです。

と言っても解く謎は2つのみです。

2つの仕掛けを解けば、クリアの超シンプル謎解きです。

作っていて思いますが、謎解きは1つの謎を作るのに1時間くらいかかるのに、
解くのは本当に一瞬ですよね。

脱出ゲームとか作られている方はすごいなと思わされます。

もっと色々複雑に考えて実装しないと、面白いと思ってもらえるものは難しんだろうなあ。
と痛感させられました。。。

次くらいも謎解きでもっとストーリーとかを絡めたアプリを作ってみたいなと思います。

・今日のちょっとソース。

Animatorのトリガーパラメータ処理


AnimatorとAnimationって、慣れると分かり易いなーって思うんですが、正直すぐに忘れてしまうんですよね。

コールバック関数もきっちり用意されているし、他のAnimationに遷移させるトリガーやフラグも簡単に設定出来ますし。
(すぐ忘れます。全部笑)

今回のアニメーションでは基本的にトリガーパラメータで遷移させています。

wakeとlargeというトリガーパラメータを用意し、
クリックでトリガーをセット、アニメーション実行という非常にシンプルなものです。


 // クリック処理(wake Animation実行)     
 Image.GetComponent().SetTrigger("wake");

(ImageはAnimatorがセットされているオブジェクトです)

やっぱりこれくらいシンプルなことでないと覚えてられないですね…


【使用ゲームエンジン】
Unity2018.3.5.f1

【プロジェクト管理】
git(Bitbucket使用)

 

【知り合いに実際にプレイしてもらった感想】

今回は本サイト初めての謎解きゲーです。私個人的には好きです。

色々ケチをつけたらいくつも出てきそうですが、1日で作ったににしてはしっかりと

謎解きがあって楽しめました。ただ、最初はゲームスタートしてすぐにゲームオーバ

になったのでバグか?と思ってしまったのでアプリの最初にルール説明が有るといい

かも知れないですね。続編に期待です。

 

グラフィック :★★☆☆☆

ボリューム  :★★★☆☆

操作性    :★★★☆☆

ゲームバランス:★★★☆☆

独創性    :★★★★☆

クリアタイム :10分

【1日1本アプリ開発】子猿を救え2!【10本目】

どうもsh0です。

開発10本目のアプリです。

【1日1本アプリ開発】子猿を救え2!【10本目】

横スクロールゲームになりました。(今年2度目、二日ぶり)

せっかく8本目に作った横スクロールゲームなんですが、
あまりにもさっくりとしていたので、色々利用して10本目でも同じ形で
出してみました!

ただし、難易度は本当に別格です。

正直デバッグの最後の方は、
クリアできなくて、まあ良いやろ!的な…
(実際にクリアできることは、端末で確認済みなんで、ぜひ遊んでみてください!)

・今日のちょっとソース。

画面の切り替え

・canvasを使用した画面表示をしているのですが、なんかカメラをうまく動かせない…。
と、煮詰まったので、それならCanvas複数作っちまえ!

と、3面ステージがあるので、3面分Canvasを作りました。

・初めのステージのCanvasだけactiveにして、右端までたどり着いたら、
Canvasのアクティブを切り替えて、ステージ移動です!

該当ソースは下記となります。


    void OnCollisionEnter2D (Collision2D col)
	{
		if(col.gameObject.name == "RightWall")
		{
                            Canvas2.SetActive(true);
                            Destroy(Canvas1);
		}
	}

うーん、正直邪道なのだろうなあとわかりつつ….

すみません。

後この方法をとると、なぜかステージ移行で、キャラのポジションが必ず0,0になるんですよね。
これなぜなんでしょうか。

どなたかお教え頂けると助かります。

【使用ゲームエンジン】
Unity2018.3.5.f1

【プロジェクト管理】
git(Bitbucket使用)

 

【知り合いに実際にプレイしてもらった感想】
8日目ゲームファン待望の続編がリリースされました。以前の操作性はそのままと言う激ムズ仕様に
変更は無いままステージが3ステージまで追加されております。本当に暇な人のみがプレイを許され
るゲーム。一日のやる事が無くなった方はぜひプレイしてみてください。

グラフィック :★★☆☆☆
ボリューム  :★★★☆☆
操作性    :★☆☆☆☆
ゲームバランス:★★★☆☆
独創性    :★☆☆☆☆

クリアタイム :15分

 

【1日1本アプリ開発】子猿を救え!【8本目】

どうもsh0です。

開発(1年プラス)8日目です。

結構時間かかりました。
まさか1年かかるとは…。

(すみません。ずっとやってませんでした…)

【1日1本アプリ開発】子猿を救え!【8本目】

横スクロールゲームになりました。

今年からチームになったのでバンバン作っていきますよ!

・今日のちょっとソース。

・ウイスターソース!

8なんで子猿!

明日も、頑張るぞ!

【使用ゲームエンジン】
Unity2018.3.5.f1

【プロジェクト管理】
git(Bitbucket使用)

【工夫内容】
子猿のジャンプ!

【知り合いに実際にプレイしてもらった感想】
本ゲームはルールや操作方法がとてもシンプルでプレイヤーを選ばない仕様。
内容は親猿が子猿を救うだけだが操作性のせいで難易度が跳ね上がっている。
暇な方はぜひ

グラフィック :★★☆☆☆
ボリューム  :★☆☆☆☆
操作性    :★☆☆☆☆
ゲームバランス:★★★☆☆
独創性    :★★☆☆☆

クリアタイム :40分

【1日1本アプリ開発】スロットこれで安泰だ!【7本目】

どうもsh0です。

開発7日目です。
1週間!今日は辛かった。

時間もギリギリ。

とりあえず眠いです。

もう眠ります。

あー、これか。

【1日1本アプリ開発】スロットこれで安泰だ!【7本目】

結構ゲームになりました。
やっと1つのゲームって感じです。

・今日のちょっとソース。


Active offのcomponentをonにする

GetComponent().enabled = true;

そのまんまです。


7なんでギャンブル関係アプリ。
17本目はART付きとかにしたいな!

明日も、頑張るぞ!

【使用ゲームエンジン】
Unity5.6.3p4

【プロジェクト管理】
git(Bitbucket使用)

【工夫内容】
眠い中頑張った