Cocos Creatorのインストールからデバッグ環境の作成まで行う！

＜今回やること！＞

• Cocos Creatorをインストールします。
  
• VS Code（Microsoft Visual Studio Code）をインストールします。
  
• デバッグ環境を作成します。

　
　この記事を読めば、『Cocos Creator』のゲーム開発環境が構築出来（るはず！）ます。Macで作業していますが、インストール以外はWindows版とほぼ共通です。
　
　まずは『Cocos Creator』を紹介から。
　
　Cocos Creatorは、2Dゲーム開発向けのゲームエンジン（開発環境）です。
　無料で利用出来ます。作成したゲーム・アプリを販売した場合にロイヤリティが発生することもありません。
　Mac版、Windows版があります。
　
　ゲーム作成中の画面はこんな感じです。

　ビジュアルエディタで画面のデザイン、プレビュー、デバッグが可能です。
　
　コードエディタは、VS Code（Microsoft Visual Studio Code）の利用が推奨されています。VS CodeもMac版、Windows版があり、無料で使用出来ます。
　開発に使用するプログラミング言語は、JavaScriptとTypeScriptです。
　
　作成したゲームは、iOS、Andoroid、デスクトップ（Mac、Windows）、Webを始め様々なプラットフォーム向けに出力することが出来ます。

　
　現在は様々なゲームエンジンがあります。それぞれを比較した訳ではなく、あくまで個人的な感覚ですが、Cocos Creatorを使うメリットを挙げてみました。

• 完全に無料で使える
  
• 実行ファイル（パッケージ）のサイズが小さい
  
• Web向けに作成したゲームの動作が軽い
  
• UI、アニメーション、物理演算等のライブラリが一通りそろっている
  
• マニュアル、公式フォーラム、サンプルプロジェクト（各ライブラリのデモ）を参考にできる
  
• 古くからあるcocos2d-xの流れを組むので、対応している外部ツールがそれなりにある
  Tiled（タイルマップエディタ）、DragonBones・Spine（2Dのボーンアニメーション）、ParticleDesigner（パーティクル）、bmGlyph（ビットマップフォント）等
  
• Cocos Creator自体が現在も定期的に更新されている
  
• 様々なプラットフォーム向けにパッケージを出力できる
  
• 人気、汎用性の高い、JavaScript、Typescriptが使用できる

　　
　作成したゲームのパッケージサイズが小さく、ブラウザ上でも軽快に動くことが特に良い点だと思っています。Githubページ等を利用すれば、はてなブログに載せる事も出来ます。
　
　3D盛り盛りのゲームを作るには他のゲームエンジンに遅れを取るかもしれませんが、2Dのゲームを作るにはCocos Creatorは割と良いのではないでしょうか？
　
　開発環境を構築して『Hello World』プロジェクトを実行するところまでを説明します。

金・銀・銅のようなマテリアルを設定（Blenderレンダー）：Blender

＜今回やること！＞

• 『Blenderレンダー』で金・銀・銅っぽく見えるマテリアルを設定します。

　
　リアルさは『Cyclesレンダー』が上ですが、レンダリングの速さで『Blenderレンダー』を使っています。
　金・銀・銅は、ベースとなる色が異なるだけで作り方は同じです。

テキストオブジェクトで日本語を使用する！：Blender

この記事の内容

• 日本語のフォントファイルを入手します。
  
• Blenderのテキストオブジェクトで、入手した日本語フォントを使用します。
  
• テキストオブジェクトにオフセット（太・細字化）、ベベル（面取り）、押し出し（立体化）を設定します。

　
　日本語のフォントファイルを入手してからBlenderで立体化するまでの作業を行います。

iMac 2019のスペック・価格を比較する！

＜今回やること！＞

• iMacの気になる点を書き出します。
  
• iMac 2019の各モデルのスペック・価格を比較します。
  
• 同程度のスペックのWindows PCと価格を比較します。

　
　2019年3月19日に新型のiMacが発表されました。

• iMac - Apple（日本）
  

　iMac 2017（2017年6月6日発売）から、CPUやGPU（グラフィック）等の処理系が更新されています。外見や接続ポートに変更はないようです。
　
　ちなみに下記がiMac 2017の仕様です。

• iMac のモデルを識別する - Apple サポート (日本)
  

　
　この記事では、私が欲しいiMacのモデルを中心に、スペック・価格・気になる点をまとめました。
　また、同等スペックのWindows PCに比べて価格が高いかどうか比較します。
　
　なお、いろいろな商品とその価格を掲載していますが、価格は変動しますし最良の選択をしている訳ではないので、参考程度に御覧下さい。

はてなブログにデザインテーマのBrooklynを適用＆カスタマイズ！

＜今回やること！＞

• はてなブログにデザインテーマの『Brooklyn』を適用します。
  『Brooklyn』はテーマストアで適用出来ます。＊"ストア"ですが無料です。
  
  
• さらに、CSSを使って見た目をカスタマイズします。

　
　以前、私が使っていた公式テーマは、記事の幅が狭いことが気になっていました。
　Brooklynは記事の幅が広い上に、ブラウザの幅に合わせて記事の幅が変わります。
　また、スマホからでもPCと同じデザインでブログを表示させることが出来ます。
　
　CSS等を使ったカスタマイズでは、下記を始めとした各部の設定を行います。

• タイトル画像の表示幅を変更します。
  
• タイトル下のメニューバーを設置します。
  
• 記事・サイドバーの見出しのデザインを変更します。
  
• ブログのフォントの種類、文字サイズ、行間を変更します。
  等など・・・

　
　以降で、詳しいやり方を紹介します。

Visual Studio Codeでコード編集＆デバッグする！：Cocos Creator

＜今回やること！＞

• Cocos CreatorのコードエディタをVisual Studio Code（以下、VSCode）に変更します。
  
• VSCodeでWeb向けのデバッグするための設定を行います。

　
　Cocos Creatorに最初から組み込まれているコードエディタはデバッグ機能がありません。
　また、なぜか文章の『切り取り』→『貼り付け』が出来ません。
　
　今までデバッグは、Chromeのデベロッパーツールとコードエディタを行き来しながら行っていましたが、VSCodeではコードエディタ上でデバッグ出来ます。
　
　以降で、詳しいやり方を説明します。

読み上げ機能でデータを音声でチェックする！：Excel

＜今回やること！＞
　Excelのデータを音声で読み上げさせます。
　例えば、紙からExcelに書き写したデータをチェックする際に、耳でExcel、目で原本をチェックできるので、交互に見比べる必要がなくなります。
　
　Excelの『セルの読み上げ』を使う方法と、フリーウェアの『棒読みちゃん』を使う方法を説明します。
　
　この２つをざっくりと比べる下記のような感じです。

	Excelの『セルの読み上げ』	『棒読みちゃん』
インストール	不要	必要
読み上げ方向の変更	できる （１行ずつ、１列ずつ）	できない
読み上げ速度の変更	できない （やり方不明）	できる
数字の読み	少し賢い	少し賢くない
読み方の教育	できない （やり方不明）	できる

　Excelは読み上げ速度の変更は、ググると下記の方法が見つかりますが、私の環境では速度が変更出来ませんでした。

• 『コントロールパネル』の『時刻と言語』の『音声認識』の『音声合成』の『スピード』を変更する

　
　数字の読み上げは、デフォルトだとExcelのほうが少し賢いです。
　12/34を、Excelは『さんじゅうよん ぶんの じゅうに』、『棒読みちゃん』は『じゅうに さんじゅうよん』と読みます。
　ただし、『棒読みちゃん』は、読みを変更することが出来ます。
　
　Excelの読み上げ機能は、すぐに使えて簡単です。
　読み上げの速度や読み方を変更をしたい場合は『棒読みちゃん』も選択肢に入ると思います。
　
　以降で、詳しいやり方を説明します。