Yoyogi Jotaro の何だかよく分からないブログ

主にゲームブックについて語ります。他、北海道ネタ、ホリエモン、雑談など

初心者がPHP学習でつまづくのは導入のところ。いくら説明を見ても実践なしに理解できないからサーバー借りたほうが早い説。

こんにちは。

さあみなさん、選択肢を創りましょう。

ゲームブック投稿サイトの管理者です。

ただいま筆者はPHPを学習中です。

f:id:oniisann:20171201201528j:plain

今は大変良い時代で、わざわざ本屋で書籍を買わなくとも、ある程度ネットを散策すればPHP入門の情報は山ほどあります。

でもその記事を書く人はプロ。

だから初心者の立場を理解するのが困難です。

初心者がPHPでつまづくのは初めの一歩。

そもそも環境を導入出来ず、PHPのサンプルコードを走らせたくとも走らせることができないと言う状態なのです。

本日はその辺のところと、素直にレンタルサーバー借りたほうがローカル環境を構築するより早いと言うことを訴えたいと思います。

 

目次

仮想環境を構築できない

例えば、PHPはHTMLなどのようにテキストエディタでコードを書いて、ブラウザで表示させる、と言うことができません。

サーバー上で動くプログラミング言語だからです。

PHPを試すにはサーバー環境が必要ですが、多くのPHP入門サイトでは

仮想環境を用意しましょう!

だの

ローカル環境を作りましょう!

とあります。

で、例えばVagrantと言う仮想環境を使いましょう、とあるんですよ。

www.vagrantup.com

でもですねー。

まずこれを理解するのが難しいのですよ。

よしんば理解したことにして進もうにも仮想マシンを作るソフトウェア自体が別途必要なんですよね。

VirtualBoxというフリーのツールだったりVMwareやAmazon EC2と言うのを導入しなきゃいけないようなんですね。(筆者は理解してません)

本来PHPを勉強したいんですよ。

それなのにわけのわからんツールの羅列で一体いつになったらたどり着くのかと初心者は途方に暮れるのです。

ハッキリ言ってこれらは無駄な勉強です。

ドヤ顔したいの?

あとねー。

結構多くのサイトでMac環境をお使いなんですよ。

MacとWindowsでは使うツールがかなり異なります。

なので記事そのままでは理解できないし、どうすればWindowsに当てはめて動作確認できるか道筋も提示されてない場合がほとんどです。

でも、ご存知ですか?

ユーザーは圧倒的にWindowsの利用が多いことを。

news.mynavi.jp

↑この記事によると、まだWindowsXPのほうがMacよりシェア多いんすよ。

もう〜〜〜〜。

ハッキリ言ってMacなんてスタバでドヤ顔するくらいしか使い道ないのに!

(嘘です。iPhoneユーザーですし、Macほしいけどお金なくて買えなくて妬んでるだけです)

初心者なんてWindowsユーザーのほうが多いんだからWindowsでもわかるように記述してくれないと意味無いじゃん!

普通にサーバー導入すれば?

そうなんですよ。

例えば家入一真さんが立ち上げたロリポップ!

lolipop.jp

↑このエントリ執筆時点で、料金プランは初期費用1,500円、月々250円から(ライトプラン)と言うプランがあります。

それならPHPが動きますし、データベースのMySQLやSQLiteも動作可能で、WordPressも導入できます。

さらには最初の10日間は無料でお試しできるんです。

他にはさくらのレンタルサーバなどがあります。

www.sakura.ne.jp

こちらも二週間お試し無料ですし、初期費用1029円で月々515円から(スタンダードプラン)のプランがあります。(このエントリ執筆時点での価格です)

普通にこれらのレンタルサーバーを借りて実践したほうが早いです。

お金がかかると言っても最初の1ヶ月ベースで数千円で済みますからね。

ちょっとした書籍を数冊買うような感覚で払えるのでは?

しかもどのみちサーバーを借りないとPHPをネット上に展開できないですからね。

多かれ少なかれサーバーが必要になるから借りたほうが早いすよ。

レンタルサーバーで実践

ではここで、ロリポップのライトプランで実際にPHPのサンプルコードが動くさまをご紹介したいと思います。

ご契約の方法はロリポップのページでご確認頂ければと思います。

lolipop.jp

f:id:oniisann:20171201195853j:plain

↑契約完了後、ロリポップのFTPログイン画面でログインします。

 

f:id:oniisann:20171201195859j:plain

↑まあ、適当に新規でフォルダを作ってもいいですし。

 

f:id:oniisann:20171201195903j:plain

↑そして新規ファイル作成を押して……。

 

f:id:oniisann:20171201195910j:plain

↑適当なファイル名にphpの拡張子をつけて、サンプルコードを下の欄にコピペとかします。

 

f:id:oniisann:20171201200251j:plain

↑URLをブラウザに貼り付ければサンプルコードをブラウザ上で実行出来ます。

まとめ

そんな感じで、プロの方は初心者の気持ちを理解するのが困難って事です。

なのでPHPのはじめの一歩ででつまずいている皆様、  

はじめの一歩(119) (講談社コミックス)

はじめの一歩(119) (講談社コミックス)

 

このさいレンタルサーバーを契約してしまうことをお勧めします。

よほどVagrantなどを導入するよりも楽ですよ。

 

以上、北海道からでした。

 

ゲームブック制作ツール「Twine」の利用方法その3。変数と乱数とif文でバトルシステムも夢じゃない!

こんにちは。

さあみなさん、選択肢を創りましょう。

ゲームブック投稿サイトの管理者です。

今回はTwineのマクロ機能にも切り込んでいきます。

マクロと言えばExcelのマクロを思い浮かべる方もいらっしゃるでしょう。

それに似たようなもんです。

あとタイトルで「if文」と謳っていますが、それもExcelのif関数をご存知であればご理解が早いと思います。

今回からちょっとややこやしくなりますが、慣れれば簡単です。

習うより慣れろなので、ぜひおつきあい下さい。

バトルシステムも盛り込めるんですよ!

f:id:oniisann:20171127203210j:plain

↑今回作るプログラムはCPUとあなたでサイコロを振り合い、出目の大きい方が10点ゲットするというちょっとしたゲームもどきです。

 

目次

変数

プログラミングではしばしば出てくる変数という概念。

中学生のとき数学で方程式とか覚えていますか?

x=0

とかってやりましたね?

それに近い感覚です。

TwineのHarloweフォーマットでは、アルファベットの前にドルマーク $ をつけて変数として扱うことが出来ます。

そして、数値を代入しておくことが出来ます。

その命令が下記のとおりです。

(set: $アルファベット = 数値)

具体例はこんな感じです。

(set: $a = 0)

上記を実行すると、$aと言う変数に0が代入されます。

Twineが$a0だということを覚えていてくれると考えてもいいでしょう。

$aがいくつであるか表示させるには単純に

$a

と表記するだけでOKです。

$a10加算させたい場合は下記のように記述します。

(set: $a = $a + 10)

以上を踏まえ、リンクをクリックすると10点ずつ加算するプログラムを書くと次のとおりになります。

f:id:oniisann:20171127203224j:plain

それを実行するとまず点数が0と表記され、

f:id:oniisann:20171127203234j:plain

1度「増加」のリンクをクリックすると10になります。

f:id:oniisann:20171127203305j:plain

以下、押し続けると20,30,40、……と果てしなく加算されます。

乱数

ゲームブックといえばバトルシステムが盛り込まれている作品もあります。

そのなかで、あなたは何回サイコロを振りまくったことでしょう。

あるいは振ったことにして出目はあなたが勝ったことにしていたことでしょう。

そんな煩わしい作業もTwineなら簡単にできてしまいます。

デタラメな数字を発生させる命令があるのです。

(random: 整数値)

↑この命令は0から整数値までのデタラメな数字をひとつ発生させます。

数字の幅を指定したいんならこちら。

(random: x,y)

↑こちらは整数値xから整数値yまでのデタラメな整数値一つを発生させる命令です。

実際にこちらのコードを記述して実行してみましょう。f:id:oniisann:20171127204009j:plain

f:id:oniisann:20171127204007j:plain

↑筆者が実行したときは上記のとおりとなりましたが、皆さんは違った数字の結果になったかと思います。

リンクをクリックすると数字が変わるさまをご確認下さい。

サイコロバトル

変数乱数

そして冒頭に触れたif文

それがあればサイコロバトルのプログラムを作成できます。

出目を決める

では最初に、CPUの出目を決めましょう。

例えば変数$cpuに1から6までの乱数を代入したい場合、どうしたら良いのでしょうか?

いろいろあるでしょうが、順当には下記の様な記述が考えられます。

(set:$cpu = (random: 1,6))

setrandomそれぞれでカッコを用いるので、最後カッコカッコで締めくくりです。

同様にあなたの出目は変数$youを使いましょう。

場合分け

そして

  1. あなたの出目がCPUより大きければ「あなたの勝ち」と表示し、あなたの点数を10点加算
  2. あなたの出目とCPUが同じなら「引き分け」と表示し、点数はそのまま
  3. それ以外なら「あなたの負け」と表示し、CPUの点数に10点加算

という条件判断と作業を行うとしましょう。

CPUの点数を$cpu_score、あなたの点数を$your_scoreと言う変数をあてがいます。

Twineのif文は下記の文法をとります。

(if:真偽)[表示する内容や命令]

1の条件判断を文法に当てはめると下記の様に記述できます。

(if:$you > $cpu)[あなたの勝ち(set:$your_score = $your_score + 10)]

同様に2の場合はこうです。

(else-if:$you is $cpu)[引き分け]

else-ifは、if文の条件に当てはまらないけど、さらに確認が必要な場合に用いる命令です。

さて、3の場合はどう書きますか?

(else:)[あなたの負け(set:$cpu_score = $cpu_score + 10)]

↑今回の場合分けで$you<$cpuはそれ以外という意味になります。

その場合の命令はelseと言う命令を使うと便利です。

コード

サイコロバトルのコードをまとめると、下記のとおりとなります。

f:id:oniisann:20171127210038j:plain

実行したら次の通り。

f:id:oniisann:20171127210043j:plain

↑のっけから負けてますね。

バトルシステム

今回サイコロバトルをご紹介したのは他でもありません。

これを応用して

  • 体力点
  • 技術点
  • 武器による加点

などを加味すれば往年のゲームブックのバトルシステムが出来上がるのです。

つまりはクリック一つでサイコロを転がしたり、出目を計算したり、どちらがかって体力を引いたり……と言う面倒な作業が解決するのです。

読者に優しいUIとなりますよ。

もちろんTwineを使ってダンジョン作成などもお茶の子さいさいなんですよ。

まとめ

そんな感じで、今回は今までと比べて多少しち面倒くさい内容だったかとは思いますが、慣れてしまえばひらめいてもっとすごい作品が出来上がると思いますよ。

はじめは乗れなかった自転車が、いつの間にか乗れるようになるようなものです。

焦らずじっくりと、Twineを楽しんで下さい。

 

以上、北海道からでした。

 

ゲームブック制作ツール「Twine」の利用方法その2。色を変えたり画像を挿入したりも簡単!

こんにちは。

さあみなさん、選択肢を創りましょう。

ゲームブック投稿サイトの管理者です。

前回に引き続き、世界的に知名度のあるゲームブック制作ツール”Twine”の利用方法のご紹介第二回目です。

今回は

色をいろいろ出すにはどうしたら良いのでしょうか?

画像とかも表示したいんだけど出来るんですかい?

という事に触れていきたいと思います。

もしまだ前回のエントリを御覧頂いていない場合は、先にこちらを見ていただくほうがご理解が早いかと思います。

blog.gamebook.xyz

それでは早速参りやしょうッ!

 

目次

色を変えたい!

そうですね。

筆者も印刷業に居ましたからデザイナーの方やクリエイターの方が色に拘るのはよくわかります。

デフォルトのTwineのフォーマットはHarloweです。

意味がよくわかりませんが、赤ちゃんにつける愛称っぽいですね。

まあとにかく初心者向けのフォーマットなんです。

Harloweは文字が白で背景が黒っぽい色です。

f:id:oniisann:20171126203645j:plain

黒板じゃないんですから、もっとカラフルにしたいですよね。

そんなあなたにはこんな命令があります。

(enchant: ?page, (text-colour: ) + (background: ))

「色」の部分は文字列と言う種類の文言を入れます。

つまり赤にしたければ"red" (ダブルクオーテーションで囲う)ですし、#をつけてRGBの表記にすることも出来ます。

例えば文字色を赤、背景をグレーにしたければ下記の様に記述出来ます。

(enchant: ?page, (text-colour: "red") + (background: "#888"))

 redの代わりに#e61919でもいいですし、#888の代わりにgrayでも当然OK。

f:id:oniisann:20171126203742j:plain

実行するとこの通り。

f:id:oniisann:20171126203706j:plain

あと、部分的に文字の色を変えたい時がありますね。

たとえばこんなコードがあり、 

f:id:oniisann:20171126203810j:plain

このような実行画面があるとしましょう。 

f:id:oniisann:20171126203820j:plain

「マンティコア」をもっとカラフルにしたくありませんか?

そんなときにはこれ!

(colour:)[テキスト]

今回はなぜかダブルクオーテーションで囲わなくて大丈夫なんです。

何故text-colourやbackgroundと違うのか突っ込みたいところですが、細かいところは気にしないでいきやしょう。

f:id:oniisann:20171125221232j:plain 

マンティコアの文字だけ赤に変えたい場合はこの様に記述します。

f:id:oniisann:20171126203835j:plain

実行画面を確認しましょう。

f:id:oniisann:20171126203844j:plain

はい。

見づらくて配色のセンスが問われますが、思い通りにはなっています。 

文字の特殊効果

じゃ、文字を太くしたり、斜体にしたり、エンボス加工もしたくなりますね。

さらにそれだけでは物足りないので、点滅させたり震えさせたりもしてみましょう。 

コードはこんな感じです。 

f:id:oniisann:20171126203902j:plain

実行するとこの通り。

f:id:oniisann:20171125225228g:plain

いかがですか?

このツールはテキストに多くの装飾が出来るようになっており、ディベロッパーの意気込みを感じます。

安心してゲームブックを制作して下さい。

画像や音を入れたい

文字だけのゲームブックもいいですが、たまに挿絵があると乙なもの。

TwineのHarloweでは、画像や動画、音声などはHTMLをそのまま挿入できます。

画像

HTMLをご存じの方はそのままの文法で挿入できます。

<img src="画像のURL">

↑このようなタグを思い出して下さい。

例えば↓こちらの画像。

f:id:oniisann:20171125225752j:plain

この画像のURLは

https://cdn-ak.f.st-hatena.com/images/fotolife/o/oniisann/20171125/20171125225752.jpg

です。

なので、下記のように記述しますと 

f:id:oniisann:20171126203920j:plain

このように画像を表示できます。 

f:id:oniisann:20171126203929j:plain

これで物語の世界観が広がりますね。

音楽

音楽や音も設定できます。

ただ、サーバーにデータを保存しておく必要があるので、レンタルサーバーなどを利用できる場合に限りますので要注意。

レンタルサーバーのことについては今回割愛しますので、興味はあるけどよくわからない方はググって下さいまし。

<audio src="音楽データのURL">

<audio src="http://gamebook.xyz/wp-content/uploads/2015/09/devil.mp3" autoplay>
</audio>

f:id:oniisann:20171126205854j:plain

 音楽素材提供:Music-Note.jp
 URL:http://www.music-note.jp/
 運営:株式会社ピクセル
 URL:http://pixel-co.com/

 

実行するとこの通り。

f:id:oniisann:20171126210134j:plain

って、画像だけですが、よく見るとブラウザに音が出ている事を示すスピーカーアイコンが確認出ますよね?

音は出ています!

動画

実は動画も貼れるんです。

普通にYouTubeの埋め込みコードを入れればいいんです。

例えばこちらの動画↓


YouTubeテーマソング/ヒカキン&セイキン

埋め込みコードは下記のとおりなので

<iframe width="560" height="315" src="https://www.youtube.com/embed/WJzSBLCaKc8" frameborder="0" allowfullscreen></iframe>

f:id:oniisann:20171126203950j:plain

ご覧のとおりです。

f:id:oniisann:20171126204001j:plain

まとめ

そんな感じで、Twineはブログエントリを認めるような感覚でゲームブックを作成可能なのです。

そして懸命な皆さまならお気付きの通り、画像や音を出せるので、ノベルゲームに近い作品も作成可能なのです。

様々な媒体で自由にゲームブックを作成出来るツール。

それが無料で使え、商用利用も認められているのです。

前回お伝えしたパラグラフ遷移と今回のマルチメディア出力の記述だけでかなり面白いゲームブックが作れるはずですよ。

もちろんTwineの機能はまだまだ計り知れないのですが!

ぜひ作品を認めて下さい。

f:id:oniisann:20171124193352j:plain

http://twinery.org/

 

以上、北海道からでした。

 

さて、あなたはどうする?
GameBook.xyzへもどる→1
Googleへ行く→14