Windows 10でSourcetreeを使う

開発環境は、Windows 10 Pro(64bit)。

GUIで、Gitが使用できるSourcetreeをインストールする手順のメモ。

1.公式サイトへアクセスする
https://ja.atlassian.com/software/sourcetree

2.Windows向けダウンロードボタンをクリック
f:id:k01ken:20190414112935p:plain

3.Atlassian Softwareライセンス契約~にチェックを入れて、
ダウンロードボタンをクリックすると、ダウンロードが開始される。
f:id:k01ken:20190414112947p:plain

4.ダウンロードしたファイルを起動すると自動的にインストールが始まる。

※事前にBitbucketに登録しておくこと

5.Bitbucketをクリック
f:id:k01ken:20190414120038p:plain

6.Googleアカウントでログインするか、Bitbucketのメールアドレスを入力して、
Continueボタンをクリック
f:id:k01ken:20190414120053p:plain
※Bitbucketのメールアドレスとパスワードを入力することに抵抗があったのですが、どうやら、BitbucketとSourcetreeは同じ会社が運営しているようです。

7.パスワードのフォームが表示されるのでBitbucketのパスワードを入力して、Log inボタンをクリック

8.連携が完了するので、次へボタンをクリック
f:id:k01ken:20190414120245p:plain

9.GitとMercurialにチェックを入れて、詳細オプションを押して、改行の自動処理を設定するにチェックを入れて、次へボタンをクリック
(自分の場合はすでにGitはインストールしています)
f:id:k01ken:20190414120257p:plain

10.インストールが完了したら、次へボタンをクリック
f:id:k01ken:20190414120312p:plain

11.その後は、無視して、インストーラ自体を消してよい。

Githubと連携する

デフォルトではBitbucketとしか連携できていないので、Githubと連携する方法をメモ。

Githubアカウントを作成していることが前提です

1.Sourcetreeを起動

2.ソフトウェア上部のRemoteアイコンをクリック

3.左部分のアカウントを追加をクリック

4.Hostの欄のホストティングサービスをGithubに変更し、Credentialsの欄の認証をOAuthにして、OAuthトークンを再読み込みボタンをクリック

5.ブラウザが起動するので、Authorize atlassianボタンをクリックして連携する

6.Githubのパスワードを入力して、Confirm passwordボタンをクリック

7.Sourcetree側に戻ってOKボタンをクリック

8.これによってリモートリポジトリの欄に自分のGithubアカウントが連携されていると思います。

Windows 10でcurlを使う

開発環境は、Windows 10 Pro(64bit)。

curlLinuxMacでは最初からインストールされていますが、Windowsにはないので、Windowscurlを使いたい場合は、chocolateyというものを使います。


The package manager for Windows
https://chocolatey.org/
1.公式サイトへアクセスする

2.Install Chocolatey Nowボタンをクリック

3.コマンドプロンプトを右クリックし、
その他 - 管理者として実行をクリック

4.以下のページの欄をコピペして実行する
https://chocolatey.org/install#install-with-cmdexe
・エラーは出たが、

choco -v

とコマンドを入力すると、

0.10.11

と表示されたので、一応、成功したと思います。

5.curlも、きちんとインストールされているか、以下のコマンドでチェックします。

curl -V

f:id:k01ken:20190407214343p:plain

問題なく表示されました。試しに、Googleの日本語版のページへアクセスしてみたいと思います。

curl --http1.0 https://www.google.co.jp/

と入力すると、
f:id:k01ken:20190407215124p:plain
が表示されました。

『電卓アプリで学ぶReact/Redux入門(実装編)』をやって詰まったところ

開発環境は、Windows 10 Pro(64bit) + node 10.15.0 + npm 6.4.1。

下記のReact/Reduxの実装編をやっていて、途中で詰まったところをメモしておく。

電卓アプリで学ぶReact/Redux入門(基礎知識編)
https://qiita.com/nishina555/items/affcb3684e67cd0ee897
電卓アプリで学ぶReact/Redux入門(実装編)
https://qiita.com/nishina555/items/9ff744a897af8ed1679b

全部のコードを書いて、実行してみると、以下のようなエラーが表示された。

../node_modules/react-redux/es/components/Provider.js
Module not found: Can't resolve 'react' in 'c:\react_test\node_modules\react-redux\es\components'

そこで、node_modulesディレクトリを確認すると、react-reduxが入っていない状態だったので、

npm install react-redux

と入力したら、以下の警告メッセージが出現した。

npm WARN react-redux@6.0.1 requires a peer of react@^16.4.0-0 but none is installed. You must install peer dependencies yourself.

なので、以下のコマンドを続けて入力する

npm install react@^16.4.0
npm install react-redux@6.0.1
npm list

で、インストールしたパッケージのリストを見ると、react-reduxが入っている。そして、1回別のディレクトリへ移動してから、もう一度、node_modulesディレクトリへ戻ると入っていた。

パッケージをインストールしたので、すでに、組み込みサーバーを立ち上げていたら、一度、停止してから、再び、

npm start

をすると、うまく動作した。

Windows10(64bit)にDockerをインストールする

開発環境は、Windows10 Pro(64bit)。


1.公式サイトへアクセスする
Enterprise Application Container Platform | Docker

2.右上のGet Startボタンをクリック
f:id:k01ken:20190406172912p:plain

3.ちょっとスクロールして、Download for Windowsボタンをクリック
f:id:k01ken:20190406173017p:plain

4. Please Login To Downloadボタンをクリック
f:id:k01ken:20190406173849p:plain

5.Docker IDを作成するために、Create Accountリンクをクリック
f:id:k01ken:20190406174025p:plain

6.Docker IDとEmailとPasswordを入力し、チェックボックスにチェックを入れて、規約に同意し、reCAPCHAを入力して、Continueボタンをクリックする
f:id:k01ken:20190406174938p:plain

7.メールが送信されるので、メールを開く

8.メールを開いたら、Confirm Your Email With Dockerボタンをクリックする
f:id:k01ken:20190406175208p:plain

9.Get Dockerボタンをクリック
f:id:k01ken:20190406175434p:plain

10.ダウンロードが開始されるので、インストーラをダウンロードする

11.ダウンロードしたDocker for Windows Installer.exeを実行する

12.Configurationの2つにチェックを入れて、Okボタンをクリック
f:id:k01ken:20190406182037p:plain

13.インストールが完了したら、Close and log outボタンをクリック
Windows自体が再起動するので、ほかのプログラムはすべて終わらせておくこと
f:id:k01ken:20190406182238p:plain

CakesのUI

CakesへTwitterのリンク経由で個別記事にアクセスした時に、なぜか、タイトルはあるけれど、記事の中身のないページに飛ばされる。
f:id:k01ken:20190320134248p:plain
リロードすると、変わるかな?と思って、リロードしても変わらない。
だから、1回その連載のトップページ(目次ページ)へアクセスしてから、もう一度、個別ページへ飛ぶという手間が増えてしまう。
そうすると、以下のように記事の中身がきちんとあるページが表示される。
f:id:k01ken:20190320134404p:plain
2つのページを見てみると、どちらも、
https://cakes.mu/posts/24970
となっていて、リンクとしては変わらないのに、なぜ、一方は、記事が表示されなくて、もう一方は記事が表示されるのだろうか?

これは、意図的に手間を増やしているのか、それとも、気づいていないだけなのか。

Candy Crash FriendsのUI

Candy Cransh Friendsというゲームをやっていて、ゲームに失敗すると、出現する画面で、自分では、ギブアップを選択しようとしたが、間違えて、アイテムの金塊を10個支払って、続けるボタンを押してしまった。一度、押してしまうと、キャンセルができない。

このゲームで、金塊というアイテムは、初期の段階で、進めると、無料で50個もらうかどうか選択できるものだ。

f:id:k01ken:20190302165316j:plain

そこで、よく見てみると、続けるボタンをギブアップボタンよりも大きいサイズにしていて、かつ、視線の動きを上から下へ動かす段階で、どうしても目に入るように配置していて、さらに、画像だと分からないけれども、アニメーションで、続けるボタン→ギブアップボタンの順番で出現するようになっていて、間違えて押しやすくなっている。

ゲーム上では、金塊が減ると、再び入手するためには、お金を出して、買うしか手段がない。そして、金塊がちょっと減ってしまうと、(最初に与えられたものを取られると)精神的に気持ちが悪くて、初期の満タンの数である50個まで貯めたくなる。そこを狙っている。


他にも、ライフがゼロになった状態で出現する画面を見てみると、
f:id:k01ken:20190302165509j:plain
ライフを追加するボタンが大きく表示されていて、ステージへ戻るための×ボタンを押す過程で、視線が、どうしても、ライフを追加するボタンに目がいってしまうし、それだけじゃなくて、片方は、「ライフを追加する」と、文字で表現している一方で、ステージへ戻る方のボタンは×の絵で表示されているだけで、この違いも、ライフを追加するボタンをクリックする方へ誘導している気がする。
何となく、そっちのほうが、それが何なのかを認知をするための脳への負荷が小さいので、クリックしてしまうのを狙ってるんじゃないか?


最後に紹介したい事例として、このゲームでは、1ステージクリアするたびに、金塊が溜まっていくが、最大30個までしか溜まらず、それ以上は、捨てられるアニメーションを毎回見せられる。これによって、金塊を取り出さなければ、もったいないという心理を植えつけようとする。
f:id:k01ken:20190303132750p:plain

しかし、このゲームでは、金塊を取り出すには、課金しなければならない。
f:id:k01ken:20190303131338p:plain


ステージ画面の右上の金塊ボタンをクリックすると、下は230円から、上は、11700円までの金塊を含めた課金アイテムがずらりと並び、いつでも買えるようになっている。
f:id:k01ken:20190303133829p:plain


他の仕組みとして、ゲーム内では、全プレイヤーの総合ランキングみたいなものは表示されていない。これによって、プレイヤーのやる気が削がれないような仕組みにしているのかもしれない。
ただ、ステージ別のランキングはある。でも、そのランキングは、そのステージの歴代ランキングなのか、それとも、そのステージをクリアした、直近、10名のランキングなのかは不明。ランキングにはメリット/デメリットの両方があって、デメリット(自分と相手の差がありすぎたり、上位の顔ぶれが変わらなくて、やる気が削がれる)を減らして、メリット(競争心を煽り、やる気を出す)を増やす仕組みになっている気がします。


今まで紹介してきたように、Candy Crashのゲーム運営者はいかに、金塊をユーザーに買わせようとしているかという事例でした。

CakePHP3でルーティングを行う

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.7.2 + XAMPP Control Panel v3.2.2。

今回は具体的な事例として、トップページを、PostsController内のindexアクションにしたい場合の書き方を説明。

1. /config/routes.phpを開く

2.以下の部分を変更する

<?php

    $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);

?>

<?php
    $routes->connect('/', ['controller' => 'Posts', 'action' => 'index']);
?>

に変更する。
また、ユーザーが、/posts/indexや、/postsにアクセスしてきたときもトップページに飛ぶように設定しておくには、

<?php
$routes->redirect('/posts/', '/',['persist' => true]);
?>

を、config/routes.php内のRouter::scope('/', function (RouteBuilder $routes) { ~ });ブロック内に追加する。

名前付きルーティング

名前付きルーティングとは、その名前のコントローラを作っていなくても、好きな名前をURLに設定することができるものです。Togetterの個別記事ページのようなルーティングを実現したい場合(/li/12345678のようなTogetterの個別記事ページのようなルーティングを書く場合)で、それを、PostsControllerのviewアクションで実現したい場合は、

<?php
$routes->connect('/li',['controller' => 'Posts', 'action' => 'view'],['_name' => 'li']);

$routes->connect('/li/:id',['controller' => 'Posts', 'action' => 'view'])
->setPatterns(['id' => '\d+'])
->setPass(['id']);

?>

を、config/routes.php内のRouter::scope('/', function (RouteBuilder $routes) { ~ });ブロック内に追加する。
逆に、/posts/view/234のようなアクセスをリダイレクトするためには、

<?php
$routes->redirect('/posts/view/:id', ['controller' => 'Posts', 'action' => 'view'], ['persist' => true])
->setPatterns(['id' => '\d+'])
->setPass(['id']);
?>

を、config/routes.php内のRouter::scope('/', function (RouteBuilder $routes) { ~ });ブロック内に追加する。

※設定を変更したのに、それが反映されない場合の解決法

この部分で、かなり時間を食ってしまったのでメモ。
解決法としては、
1.ブラウザ側のキャッシュを削除する
2.CakePHP側のキャッシュを削除する
/tmp/cache/myapp_cake_routes_route_collection
を削除する。(削除しても、変更すると、新しく生成されるので大丈夫)

自分のケースでは、1.をしても変わりはなくて、2.をしたら変更が反映されました。できれば、両方やっておいたほうがいいでしょう。


■参考リンク
https://book.cakephp.org/3.0/ja/development/routing.html
CakePHP3でルーティングを設定し、URLをカスタマイズする | (株)シャルーン