JUN-NIKKI

現役プログラマーのFXとプログラミングのアウトプットブログです

【PHP7.x Laravel 5.8 入門】初めてのapi　getの使用方法、手順など

プログラミング

f:id:jun1221:20190416232821p:plain

今回はLaravel 5.8を使用した、APIの作成方法について説明していきます。

因みにインストール方法については、以下を参照してください。
jun-nikki.hatenablog.com

目次

作るもの

・ブラウザでhttp://127.0.0.1:8000/sampleを叩いたら、jsonデータが返ってくる

設計

  1. コントロールを作成して、jsonデータをコントール側に持たせます。
  2. Routeでデータを取得します。

f:id:jun1221:20190422202839p:plain

準備：プロジェクトの作成

ドキュメントルート配下で以下のコマンドを実行してください

% laravel new hajimeteno_api

実行結果

Crafting application...
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 76 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (v1.3.0): Loading from cache
  - Installing doctrine/lexer (v1.0.1): Loading from cache
：　　～　中略　～
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
Application ready! Build something amazing.

hajimeteno_apiフォルダが作成されるので、移動します。

cd hajimeteno_api

次に、以下のコマンドを実行しましょう。

% php artisan serve

実行結果

Laravel development server started: <http://127.0.0.1:8000>

ここまで出来たら一旦、以下でLaravelを実行してみましょう。
http://127.0.0.1:8000/
こんな画面が出たらOKです。
f:id:jun1221:20190422200302p:plain

コントローラの作成

次にコントローラを作成します。

php artisan make:controller PagesController
routes/web.api

以下の様にphpファイルが作成されます。
このファイルを開いてください。
hajimeteno_api\app\Http\Controllers\PagesController.php

以下の様にindex()関数を追記してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    //
    // ↓↓ 追記
    public function index()
    {
        $testData = [
            ["id" => "1", "title" => "AAA"],
            ["id" => "2", "title" => "BBB"],
            ["id" => "3", "title" => "CCC"]
        ];
        return $testData;
    }
}

web.phpでget
次に、以下のファイルを開いてください。
hajimeteno_api\routes\web.php

以下をファイルの末尾に記載してください。

Route::get('sample', 'PagesController@index');

ブラウザでhttp://127.0.0.1:8000/sampleを叩いてください。
以下の様に表示されましたでしょうか？
f:id:jun1221:20190422201811p:plain

まとめ

基本的なプロジェクト作成方法からコントローラを使用したgetの使用方法まで紹介しました。
今後はもう少し具体的なプログラムについてもふれていきます。

【Bootstrap 4】Sassを使用する理由と始め方！～導入編～

プログラミング

f:id:jun1221:20190412215220p:plain

 

今回はBootstrap4 + Sassの始め方について説明します。

Bootstrap 4については下記の記事をご覧ください。

jun-nikki.hatenablog.com

 

Bootstrap · The most popular HTML, CSS, and JS library in the world.

 

 

Bootstrapをそのまま使用すると、Bootstrapのデザインでホームページを作成することになります。そうするとBootstrap臭のするデザインになってしまいます。見る人にはわかる、「あ～Bootstrapそのまま使ってるな、このサイト・・・」感。そこでデザインを変更したくなるのですが、デザインを変更するには、CSSをそのまま上書きする方法とSassで変更する方法の2パターンが存在します。両方必要ですが、Bootstrapのデザイン部分はSassでやった方が断然楽ですよというお話です。

 

そもそもSassって？

SassとはCSSを一括で変更できる仕組みのことです。Sassの中に、sassとscssがあり、それぞれ記載方法が異なりますが今回は割愛します。Bootstrapではscssを採用しています。

 

CSS使用とSass使用の比較：例題画面の導入

今回は、Bootstrap 4のExampleからAlbumを使用して説明します。

このサイトに対して、以下を変更します。

 https://getbootstrap.com/docs/4.3/examples/album/

f:id:jun1221:20190421172208p:plain

サイトを右クリックでソースを表示すると下記の様なソースが出てくるのでコピーして下さい。index.htmlファイルを作成し、ソースを貼り付けましょう。

f:id:jun1221:20190421174303p:plain

 

 次に、Bootstrapのcssのパスを変更しましょう。

元「index.html」

<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

変更後「index.html」

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 

ブラウザで表示すると綺麗に表示できていると思います。

  

CSSをそのまま上書きする方法

上書きする場合はcustom.cssファイルを作成して以下を記載しました。

「custom.css」

.btn{
border-radius: 0;
}
.btn-primary {
background-color: #138891;
border-color: #138891;
}

そして、index.htmlにcustom.cssを追加しました。

「index.html」

<link href="custom.css" rel="stylesheet">

 

結果は以下の様になりました。上手く変更できましたね！

f:id:jun1221:20190421175609p:plain

今回はこれだけなので簡単なのですが、他にもprimaryってありますよね。text-primary、bg-primary。。。。。

それはどの様になるかというと、ダークグリーンにはなりません。

試しに<body>の下にbg-primaryを入れてみてください。

「index.html」

<body>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

 

一番上に青色のバーが表示されましたね。つまりはprimaryという言葉でもそれぞれで色が違います。これでは統一感がないですよね。

そして、primaryを統一しようと思ったら全て調べて、全てに対してダークグリーンを設定しなければなりません。大変ですし、やっぱりワインレッドにしてくれと言われたらすべて修正しなければなりません。この方法はデザインの統一感がない・メンテナンスが大変ということが分かります。

f:id:jun1221:20190421180039p:plain

 

Sassを利用する

※ Sassのインストール方法はこの後に載せておきます。

 

この様な問題を解決するためにSassを使用したデザインのカスタマイズです。SassではBootstrap側がscssファイルを提供しており変数が定義されているため、それを変更して使用します。ですが、変更後はコンパイルが必要です。１行でできます。

main.scssを新規に作成して、以下を入力します。

「main.scss」

$theme-colors: (
"primary": #138891,
);

$enable-rounded: false;
@import "node_modules/bootstrap/scss/bootstrap";
 
コンパイルをします。
「ターミナル（コマンドプロンプト）」
sass .\main.scss .\main.css

custom.cssとbootstrap.min.cssの宣言は削除して、以下を記載してください。

「index.html」

<link href="main.css" rel="stylesheet">

 

保存後、ブラウザで見るとこうなります。

f:id:jun1221:20190421180736p:plain

primary句は全てダークグリーンに変更されていますね！この様に一括で変更できるので、変更対応工数が劇的に少ないです。

 

sassのインストール方法

gemコマンドが必要なので、Windows の方はRubyをインストールしてください。（macの方は不要です）

https://rubyinstaller.org/downloads/

左端の欄から太文字になっているURLをクリックするとインストーラがダウンロードできます。

f:id:jun1221:20190421182906p:plain

 

npmも必要なので、node.jsもインストールしましょう。Windows、mac両方です。

https://nodejs.org/ja/

推奨版をインストールしてください。

f:id:jun1221:20190421184948p:plain

 

その後に、ターミナル（コマンドプロンプト）を開いて以下を実行すると、bootstrap一式とsassをインストールできます。

npm init
npm install bootstrap --save
gem install sass

ホームページの表示とcssのカスタマイズ用に、htmlファイルとscssファイルが必要です。今回のindex.htmlとmain.scssがそれにあたります。

 

 

まとめ

Sassを使用すれば

  1. デザインの統一性の担保
  2. コードの肥大化抑制
  3. メンテナンス性が強い

につながります！

 

Sassを利用して快適なプログラミングをやりましょう！

 

  

【FX】エントリーしてから逆行を少なくする方法

FX

f:id:jun1221:20190421100455j:plain

 


エントリーしてからレンジにはまってしまって損切した！

損切した後、思っていた方向に進んでしまった！

 

 

 

 

 

 こういう方向けにお話ししていきます。

 

目次

 

 

大きく動くチャートは大体決まっている

想像してみてください。

上がりやすい・下がりやすいはどういう状況でしょうか？

水平ラインが遠い時ですね。水平線が遠い時はチャートがどのような形をしているでしょうか？チャートの左を見て、空白がある場合に動きやすいですね。

 

GBP/JPY 15分足

f:id:jun1221:20190421105335p:plain

 

どっち向きに動きやすい？

もちろんトレンド方向です。

先ほどのチャートを見ていただくと、200EMAの下にローソク足があることが多いですね。これは下降トレンドを示しています。が、それだけでエントリーすると痛い目見るので上昇を失敗して、下降してきた所を狙うのが良いですね。

 

エントリーするタイミングは？

  1. 上位足で、トレンドラインを描いてトレンドライン内のどの位置にいるかを把握する
  2. 下位足で、トレンドラインを描いてトレンドライン内のどの位置にいるか把握する
  3. 直近の高値・安値を更新しているか確認する。
  4. 高値・安値を更新しなさそうになっているか確認する。

です。

 

まず、上位足でトレンドラインを描いてトレンドライン内のどの位置にいるかを把握します。

GBP/JPY 1時間足

f:id:jun1221:20190421110333p:plain

上昇のトレンドラインが描けました。トレンドの上値が形成されているので大きな戻りが発生しそうですね。

 

次に、下位足で、トレンドラインを描いてトレンドライン内のどの位置にいるか把握します

GBP/JPY 15分足

f:id:jun1221:20190421111325p:plain

 

1つ目の内側のトレンドラインで引き付けてエントリーできないですね。

エントリーしようにも、ローソク足が汚いですし安値も更新できていないため落ちる見込みはないです。もし、このまま下値をブレイクしたとしたら戻りを待てばいいです。負けないトレードが重要ですね。

 

ここまでの考察では、4時間足で引けた上昇トレンドの戻りが大きいと思われる状況です。

 

次に、直近の高値・安値を更新しているか、高値・安値を更新しなさそうになっているか確認します。

GBP/JPY 15分足

f:id:jun1221:20190421112545p:plain



上昇して高値更新していますね。ただし200EMAを少し超えたところです。また、超えたということで、ダブルトップまたはトリプルトップを待つことになります。

 

上がった後にダブルボトムが発生しているため、その後にダブルトップを狙うのが定石になります。高値・安値は2回以上試されるため、1度目で入らない様にしてください。

広く見たらトリプルトップになっています。

この場合どこでエントリーするかというと、24EMAを抜けた場所ですね。抜けた瞬間は戻りがあるので陽線が確定したタイミングが良いと思います。または、下値を抜けたタイミングです。

f:id:jun1221:20190421113143p:plain




でも、全く逆行しないエントリーができるわけではない

残念ながら、確実に逆行しないエントリーできるわけではありません。FXのチャートは綺麗なことが多いですが、少し水平ラインからずれたりもしますし、経済指標などもあるためです。

ただし、上位足の環境を踏まえてどちらにエントリーするのが良いかを考察するのが精度高いと思いますし、ローソク足が汚い場合はエントリーしない様に心がけるだけでも逆行は少なくて済むのではないでしょうか。

 

まとめ

逆行は減らせないですが、逆行すると思われる範囲を減らすことが可能です。そのためには上位足と絡めて環境認識の練習が必要です。また、高値・安値・ダブルトップ・ダブルボトムは認識してからエントリーすることが逆行を減らせます。確認は大変ですが、逆行を減らす努力はするべきです。その方が損切幅も少なくてすみますし、pips幅も増やせます。

 

 

 

プログラミング勉強の始め方、手順など

プログラミング

f:id:jun1221:20190418210516j:plain

 

首をかしげる人

 

 

ドットインストールやprogateなどで勉強して基礎はついたけど、次に何をしよう？

 

 

 

という方に向けてお話します。

 

目次

 

1人ではどう考えてもハードルは高い

 1人でプログラミングの勉強なんてどう考えても自分は無理です。そもそも人は何をするにしても初めては心理的にハードルが高いですよね。これは仕方ありません。だって人間だもの。

やり続けることが大事ですが、どの方向にベクトルを合わせるかを考えていきましょう。考えてみて何か浮かんだ方は素晴らしいですね。今すぐに取り組んでください。ただ、思い浮かばない方の方が多いのではないでしょうか？

 

自分も考えてみましたが思い浮かばないですね。全く埋まらず。。。

f:id:jun1221:20190418220111p:plain

何を作成したいか？だけで考えていくと難しいと思います。

 

やり方① 何を作成すれば世の中の人は喜ぶか

作りたいことを考えるよりも何を作成すれば喜ばれるかを調査する方がよっぽど簡単です。

例えば、クラウドソーシングで登録してどんな依頼が多いか確認しましょう。

Web・システム開発の仕事・依頼で探してみました。未だにエクセルマクロ関連の依頼ってあるんですね。（笑）

クラウドソーシングなら日本最大級の「ランサーズ」

f:id:jun1221:20190418222909p:plain



 

例えば、通販サイトのスクレイピングなんていうのがありますね。じゃあ、これ作ってみよう。

f:id:jun1221:20190418222949p:plain



 

Web関係だったらWordPress関連の開発あるので、じゃあ、これ作ってみよう。

f:id:jun1221:20190418223111p:plain



 

こういうのを自分で作成出来たらすごく自信につながりませんか？私はお金もらえるレベルのプログラミングができるなんて凄いことだと思います。

しかも自分で何を作成したいか選べます。かなりハードル下がりますね！！

 

やり方②

いっそのことバイトとかでプログラミングやるのが良いですね。頑張って1人でやるのであればお金になるレベルまでやる気持ちでいくべきですがいきなりそれも大変なので、その環境に身を置くのが手っ取り早いです。逃げられない環境でやれば自ずと初級は脱出できます！

 

baito.mynavi.jp

コーディングのレベルアップを目指す

何を作成したいかというのは決められる様になったと思いますが、ではどうやってコーディングレベルを上げるか？インプットとアウトプット両方やりましょう。

インプットは、Youtube、GitHubですね。

アウトプットはブログ、Qiita、GitHub、どれでも良いです。やりましょう。

 

モチベーションが低下したら

今すぐコーディングの勉強をしてください！モチベーションありきでやっていたら直ぐにやめてしまいます。毎日やると思っておけば1日さぼってしまった時点で焦るのでおススメです！

 

まとめ

自分で全て考えてコーディングするのは大変なので、色々情報を集めてやっていけばいいと思います。アウトプットも同時に出来るとバッチリですね！

 

 

【PHP7.x Laravel】Windows版 Laravel＋XAMPPの導入方法（本家サイトだけでは大変！）

プログラミング

f:id:jun1221:20190416232821p:plain

LARAVELの導入方法がクイックスタートでは難しいのでまとめてみました。

Laravelのクイックスタートは結構前のバージョンに対応している様で、上手く進めないようです。

Laravelクイックスタート 4.2 Laravel

 

PHP: Downloads

PHPのインストーラがあります。Windows downloadsという所からインストーラをダウンロードできます。

 

XAMPP Installers and Downloads for Apache Friends

XAMPPのインストーラがあります。

 

今回はXAMPPでApacheとMySQLを起動している状態から始めます。

※ 両方ともデフォルト設定です。 f:id:jun1221:20190417000327p:plain

 

目次

  

インストール

端末から次のコマンドを実行し、Laravelをインストールしましょう。と、その前に、apacheのDocumentRoot配下にインストールするのが簡単なので確認しましょう。

まずはXamppのインストール場所からapacheのconfファイルを開きましょう。「(インストール場所)xampp\apache\conf\httpd.conf」にあります。デフォルトだとCドライブ直下です。

開いて「DocumentRoot」と検索してください。私のDocumentRootの設定は「C:/xampp/htdocs」の下です。

# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">

 

DocumentRootに移動してパス欄でcmdと叩いてください。

f:id:jun1221:20190417001239p:plain

「C:/xampp/htdocs」のパスでコマンドプロンプトが開きました。

f:id:jun1221:20190417001323p:plain

「laravel_01」フォルダを作成してインストールします。 

composer create-project laravel/laravel laravel_01 --prefer-dist

 すると、「C:\xampp\htdocs\laravel_01」にLaravelをインストールできました。

f:id:jun1221:20190417001707p:plain

 

データベースの設定

次にデータベースの場所を設定しましょう。

私の環境では「C:\xampp\htdocs\laravel_01\config\database.php」にありました。conf/配下にある様です。

私の環境ではdatabase=test, username=test, password=testにしているので、全てtestに書き換えました。

'mysql' => [
'driver' => 'mysql',
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
 'database' => env('DB_DATABASE', 'test'),
'username' => env('DB_USERNAME', 'test'),
'password' => env('DB_PASSWORD', 'test'),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],

 

マイグレーションの作成

データを保存するためのテーブルを作成するには、Laravelのマイグレーションシステムを使用します。マイグレーションはデータベースの修正内容を記述的に適宜し、あなたのチームメンバーと簡単に共有できるようにしてくれます。ターミナルを起動し、プロジェクトのルートディレクトリーで以下のコマンドを入力してください。

php artisan make:migration create_users_table

 

※ 因みに本家は以下ですが、エラーが出ます。。

php artisan migrate:make create_users_table


まとめ

とっかかりの部分ですが、本家では記載できていない所や間違いが多いので調べるのも一苦労でした。ただ、簡単に動作を確認する手前までは出来たのでまずは良しとします。

 

プログラミングの勉強をしましょう！（ドットインストール・progate・youtube）

プログラミング

f:id:jun1221:20190416000512j:plain

初心者～中級者未満の方向けの方がプログラミングを勉強する方法を紹介します。

 

目次

 

初心者向けはズバリ「ドットインストール」と「progate」

どちらも初心者向けのプログラミング教育サイトです。無料で結構見れてしまいます。専門書を読んで学ぶよりも簡単ではないでしょうか。というのも、専門書はバン！とコードが載せられていて頑張って書いても誤字やバージョン違いで動作させられないこともあります。

 

この2つに違いがあるとしたら「ドットインストール」は動画を見ながらそれをまねていくスタイルになります。一方で「progate」は動画を見て、実際に問題を画面に打って解いていくスタイルです。

 

ドットインストール

https://dotinstall.com/

プレミアム会員なんていうのもあるのですが、基本無料ですね。

f:id:jun1221:20190416001751p:plain

 

progate

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

 

下は実際のprogate画面です。左から手順、エディタ、結果が表示されており、手を動かしながら確認ができます。学習効果が高いのではないでしょうか。

f:id:jun1221:20190416002458p:plain

 

脱初心者はyoutubeを活用しよう

youtubeでは様々なプログラマーが動画をアップロードしていてかなりマニアックなものまであります。これはドットインストールかprogateを一通りやってみてからの方が良いです。

 

例えば「Dev Ed」。javascriptやcssなどのチュートリアル動画を多数出してます。必見です。

www.youtube.com

まとめ

昔は専門書で学ぶのが主流だったと思いますが、そのせいなのか中々初心者にはハードルが高いものでした。現在では「ドットインストール」や「youtube」などの動画や、「progate」の様なブラウザでプログラミング環境が完結するものも出てきており、簡単に学べる機会が多くて良いですね。さらにスキルアップしたい！という方はクラウドソーシング等で受注して勉強を深めてみてはいかがでしょう？

 

【GitHubPages】無料でWebページを公開する方法！

プログラミング

f:id:jun1221:20190414220505p:plain

 

Webサイトを試しに作ってみたから公開してみたい！けど、お金はかけたくない！って人向けの情報です。

 

目次

 

GitHub Pagesってなに？

GitHubで公開しているHTMLやCSS、Javascript等を利用した静的ページを公開するサービスのことです。

 

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

 

公開して何がうれしい？

色々あります。

  • 友人や同僚に公開して喜んでもらえる
  • 副業でクラウドソーシングする時に実績を簡単に見てもらえる
  • ソースを持っていなくても画面レイアウトの確認が簡単にできる

 

例えば、ランサーズ（クラウドソーシング）では以下のように業務募集をしており、こちらから～～万円で〇月〇日までに対応可能です。という提案をしなければなりません。ただし、募集している側からしても出来ない人にやってほしくはありません。実績として見せられるものがない状態では中々受注できるものも出来なくなってしまいます。そこで、今回紹介するGitHub Pagesを使って公開しておけば任せたいと思ってもらえる可能が高くなります。

f:id:jun1221:20190414221910p:plain

f:id:jun1221:20190414221732p:plain

 

導入①　GitHubのアカウントを作成しよう

ここからGitHubのホームページに飛べるので、右上ボタンの「Sign up」から新規にアカウントを作成しましょう！

The world’s leading software development platform · GitHub

 

導入②　Repositoryを作成しよう

ログインするとユーザのホーム画面が表示されて、左にRepositoryの一覧が並んでいます。初めての場合は何もないと思います。「New」をクリックしてください。

f:id:jun1221:20190414222819p:plain

 

「Repository name」に「test」と入力して下さい。その後に「Create Repository」をクリックしてください。

f:id:jun1221:20190414223722p:plain

 

これでRepositoryはできました！

f:id:jun1221:20190414223901p:plain



導入③　index.htmlファイルを取り込もう！

まずは、index.htmlファイルを作成しましょう。GitHub Pagesはindex.htmlファイルじゃないとダメみたいです。

以下のように簡単なものでOKです。

<html lang="en">

<head>
<title>Hello, world!</title>
</head>

<body>
<h1>Hello, world!</h1>
</body>

</html>
 

 

先ほどのGitHubページに戻って、「uploading an existing file. 」をクリックしてください。

f:id:jun1221:20190414224551p:plain

 

画面が切り替わるので、indexファイルをドラッグして「Commit Changes」をクリックしてください。

f:id:jun1221:20190414224818p:plain

 

これでコミットできました。

f:id:jun1221:20190414224951p:plain

導入④　公開しよう

「Settings」をクリックして設定画面に移動してください。

f:id:jun1221:20190414225154p:plain


下にスクロールすると「GitHub Pages」という欄があります。これを「master」に変更してあげるとサイトのURLが現れます。クリックしてみると「Hello world!」が表示されます。

f:id:jun1221:20190414225340p:plain

f:id:jun1221:20190414230608p:plain

f:id:jun1221:20190414230743p:plain

完璧！！

 

まとめ

今回は簡単なサイト表示をやってみましたが、cssやjavascriptも使用できるので色々試してみてください！