Symfony4をHerokuにデプロイしてみる

 

Symfony Advent Calendar 2019の14日目です。(間に合わすつもりでしたが、過ぎてしまいました…)

 

ほとんど、Herokuのドキュメント通りですが、 Apache設定に関して忘れがちなので同じ経験をしている方の助けになればと思います!

Githubにコミットしてるので、参考にどうぞ!
kin29/symfony4-heroku

 

使うもの

– Symfony4.4
– Heroku (Apacheを想定)

 

確認事項

Symfony4.4はPHP7.1.3以上が必要です。

$ php -v  //ローカルのPHPのバージョンを確認
PHP 7.1.30 (cli) (built: Jul 4 2019 21:55:42) ( NTS )

 

※ 今のHerokuのデフォルトPHPバージョンは7.3.12でした!

-----> PHP app detected
-----> Bootstrapping...
-----> Installing platform packages...
       - php (7.3.12)
       - apache (2.4.41)
       - nginx (1.16.1)

 

手順

1.composer経由でプロジェクトの作成

$ composer create-project symfony/website-skeleton symfony4-heroku/

ビルドインサーバーを立ててローカルで確認してみる。

$ cd symfony4-heroku/
$ php -S 127.0.0.1:8888 -t public/

welcomeページ見れましたー!

 

2.Herokuにデプロイしてみる

Githubにpushして、masterをdeployしてみます。

なんかエラーになって、deployできない。

...
     Script cache:clear returned with error code 255
       !!  Symfony\Component\ErrorHandler\Error\ClassNotFoundError {#29
       !!    #message: """
       !!      Attempted to load class "WebProfilerBundle" from namespace "Symfony\Bundle\WebProfilerBundle".\n
       !!      Did you forget a "use" statement for another namespace?
       !!      """
       !!    #code: 0
       !!    #file: "./src/Kernel.php"
       !!    #line: 23
       !!    trace: {
       !!      ./src/Kernel.php:23 {
       !!        App\Kernel->registerBundles(): iterable
       !!        › if ($envs[$this->environment] ?? $envs['all'] ?? false) {
       !!        ›     yield new $class();
       !!        › }
       !!      }
       !!      ./vendor/symfony/http-kernel/Kernel.php:449 { …}
       !!      ./vendor/symfony/http-kernel/Kernel.php:133 { …}
       !!      ./vendor/symfony/framework-bundle/Console/Application.php:169 { …}
       !!      ./vendor/symfony/framework-bundle/Console/Application.php:75 { …}
       !!      ./vendor/symfony/console/Application.php:148 { …}
       !!      ./bin/console:42 { …}
       !!    }
       !!  }
       !!  2019-12-14T12:26:54+00:00 [critical] Uncaught Error: Class 'Symfony\Bundle\WebProfilerBundle\WebProfilerBundle' not found
       !!  
       Script @auto-scripts was called via post-install-cmd
 !     WARNING: There was a class not found error in your code
 !     ERROR: Dependency installation failed!
 !     
 !     The 'composer install' process failed with an error. The cause
 !     may be the download or installation of packages, or a pre- or
 !     post-install hook (e.g. a 'post-install-cmd' item in 'scripts')
 !     in your 'composer.json'.
 !     
 !     Typical error cases are out-of-date or missing parts of code,
 !     timeouts when making external connections, or memory limits.
 !     
 !     Check the above error output closely to determine the cause of
 !     the problem, ensure the code you're pushing is functioning
 !     properly, and that all local changes are committed correctly.
 !     
 !     For more information on builds for PHP on Heroku, refer to
 !     https://devcenter.heroku.com/articles/php-support
 !     
 !     REMINDER: the following warnings were emitted during the build;
 !     check the details above, as they may be related to this error:
 !     - There was a class not found error in your code
 !     Push rejected, failed to compile PHP app.
 !     Push failed

 

herokuのdeployではcomposer require-devのほうは、インストールしてくれないそうなので、symfony/profiler-packがないよーって言っています。

横着ですが、
require-devのパッケージを、requireの方にも入れます。

       !!  Symfony\Component\ErrorHandler\Error\ClassNotFoundError {#29
       !!    #message: """
       !!      Attempted to load class "WebProfilerBundle" from namespace "Symfony\Bundle\WebProfilerBundle".\n
       !!      Did you forget a "use" statement for another namespace?
       !!      """

 

こっちも、composer.jsonのscript部分の消しちゃって逃げます💦

-    "scripts": {
-        "auto-scripts": {
-            "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
-        },
-        "post-install-cmd": [
-            "@auto-scripts"
-        ],
-        "post-update-cmd": [
-            "@auto-scripts"
-        ]
-    },

で、どうにかHerokuにデプロイできるようになりました😎

 

3.env=prodにする

heroku config:set APP_ENV=prod --app [herokuのapp名]

4.Apacheの設定 ←ここ大事💡

以下コマンドでProcfileを作成します。

$ echo 'web: heroku-php-apache2 public/' > Procfile

さらに、composer require apache-packを実行し、質問にはyesで答えます。
そうすると、.htaccessが追加されます。

git pushしてherokuにdelpoyされたら、ブラウザで確認してみます。
env=prodでは、welcomeページはないので404になります。

 

5.コントローラー作成

下記コマンドで、コントローラを作成することができます。

$ php bin/console make:controller HogeController

 created: src/Controller/HogeController.php
 created: templates/hoge/index.html.twig

           
  Success! 
           

 Next: Open your new controller class and add some pages!

deploy後にheroku bashで、routerを一応確認してみます。良さそう😏

~ $  bin/console debug:router
 ------ -------- -------- ------ -------
  Name   Method   Scheme   Host   Path
 ------ -------- -------- ------ -------
  hoge   ANY      ANY      ANY    /hoge
 ------ -------- -------- ------ -------

6.ブラウザチェック

作成した/hogeにアクセスしてみると、、、見れたー!!!!!🎉

つまづきポイント

deployできたはずなのに、herokuでsymfonyコマンド使ってみると、 最初のエラーが再び….
Attempted to load class “WebProfilerBundle” from namespace “Symfony\Bundle\WebProfilerBundle”.\n
Did you forget a “use” statement for another namespace?
heroku run bashして、サーバに入ってrm -rf vendor/からのcomposer installでどうにかsymfonyコマンドは動作するようになりました。

 

参考

https://devcenter.heroku.com/articles/deploying-symfony4
https://github.com/heroku/heroku-buildpack-php/issues/278#

 

URIとURLの違い

 

先日、PHPカンファレンスで購入した「Webを支える技術」を読んでいて、
URIとURLの違いを今更あんまり理解できてないとわかったので、まとめてみます。

URLとURIの意味は?

  • URL …Uniform Resource Locator(統一リソース位置指定子)
  • URI …Uniform Resource Identifier(統一リソース識別子)

もう一つ似た言葉があります!

  • URN …Uniform Resource Name(統一リソース名)

 

URLとは?

リソースの場所を示すもの。

 

URNとは?

ドメイン名に依存しない、独立したリソース名。URLがドメイン更新切れだったり、サーバの障害でアクセスできないときに、恒久的にIDを振るための仕様。

しかし、URLは永続的にアクセスできるべきという考えから、URNは使うまではないことが多くなり、普及していない。

 

URIとは?

リソースを識別するもの。

URIが位置的なものを示したい時はURL、URIが名前を示したいときはURN

→URIは、URLとURNの両方の意味を含むもの

まとめ

  • URL⇄URIと読み替えても、だいたいはok。
  • 詳しく言うと、URLはURIであり、URNもURIである。
  • URIの方が広い意味で使えるので便利だし、技術者っぽい

 

参考:https://qiita.com/Zuishin/items/3bd56117ab08ec2ec818

PHPカンファレンス2019に行ってきましたレポート

さっそくですが、先日PHPカンファレンス2019に参加してきたので、超簡単にダイジェストをお送りします。

今年のPHPカンファレンスは、どこの地方も参加できてなかったので、久々のカンファレンスで高まりました!!!

今年も、会場は大田区産業プラザ PiOでした。毎年同じ場所だと東京の土地勘がないわたしにはとてもありがたいです!

毎回思いますが、人多いですね!

セッション「PHPの今とこれから2019

PHP8.0

  • 2021.9くらいにでる予定らしい
  • JIT(Just-in-time)
  • multiple(union) typeの型指定をint|stringって書けるようになる

今までは、PHPDocのアノテーションでいい感じにしてた。

class Hoge
{
  /**
   * @param int|string
   */
  public function foo($value): void
  {
    var_dump($value);
  }
}

$hoge = new Hoge;
$hoge->foo(1);           //int(1)
$hoge->foo('one');  //string(3)

PHP8から、こうやってかけるようになるらしい

class Hoge
{
  public function foo(int|string $value): void
  {
    var_dump($value);
  }
}

PHP7.4

 

参考:https://www.amitmerchant.com/union-types-php/
参考:https://qiita.com/rana_kualu/items/ba312d2789bd228f887a
参考:https://kinsta.com/jp/blog/php-7-4/

セッション「コミュニティアップデート powered by GMOインターネット

PHPの地方コミュニティのいろいろを聞けました。

  • 勉強会やイベントでの自己紹介って結構大事らしい
  • 山陰ぺちぱーずという、地元に割と近いコミュニティがあるのを知った

 

セッション「思想と理想の果てに — クリーンアーキテクチャのWEBフレームワークを作ろう」

https://nrslib.com/phpcon-2019-proposal/

  • ヘキサゴナルアーキテクチャ(初耳)
  • スキャフォールディング機能(初耳)

 

セッション「PHPUnit: Past, Present and Future 」

PHPUnitの生みの親、セバスチャンさんの登壇でした!
全部英語です。こういう時に毎回英語頑張っておけばよかったと思います😂

心から言いたいことは「PHPUnitを作ってくれて、ありがとうございます🙏」

セッション「脆弱性から学ぶ Webセキュリティ Part2」

https://speakerdeck.com/hypermkt/study-web-security-from-vulnerability2

  • 脆弱性の怪しい匂いに気付こう
  • 根本的解決>保険的対策
  • ディレクトリトラバーサル対策
    • ファイルパスで判定してるやつとかは怪しい臭い
  • OSコマンドインジェクションの対策
    • シェル呼び出し機能関数を使わない
    • escape shell art
  • セッション管理の不備
    • 攻撃例
      • セッションハイジャック
      • セッションIDの固定化
    • 対策法
      • XXS対策
      • セッションIDを推測困難なものにする
      • セッションIDはクッキーのみで保持する
      • php.iniの確認(デフォルトで🙆‍♂️)
        • session.use_trans_sid = 0 [URLにセッションIDを保持しない]
        • session.use_only_cookies = 1
        • session.use_cookies = 1
      • 認証が成功したら新しいセッションを開始する

 

セッション「REST 6+4の制約」

https://speakerdeck.com/koriym/rest-6-plus-4falsezhi-yue

  • RESTにとって、URIは重要ではない
  • v1とか、バージョニングは含めたらrestではない
  • REST =Hypermedia API
  • クライアントはサーバーが何の言語かしらなくていい
  • キャッシュ スケールのため、🙅‍♀️パフォーマンス
  • RFC7234に対応:Kevinrob/guzzle-cache-middleware

質問の時に、おっしゃられてた「技術に対しての背景を理解しよう」というのが、印象的でした。

自分が使っている言語やフレームワークを作ってくれた人って、相当尊敬してるのに名前知らないなーって痛感したので、もっと歴史とか人物とか関係性とかってスルーしてたので、興味持とうって思いました。(偉人紹介ブログ描こうかな😎)

 

入手品

入手品一覧

  • elePHPant(買ってもらった😆)
  • 電子メモパット(アンケート答えてもらった)
  • メルカリノート、SIMケース、ステッカー(無条件のもらった)
  • スマホスタンド(ちょー便利)、チョコ
  • 粗品タオル
  •  食べログの人になれるやつ(ガチャはずれたけどくれた😆)

 


(新幹線で読むように買ったけど、疲れて10ページくらいしか読めんかった・・・。通勤の肥やしにしよう。)

郡山さんのセッションを聞く前に、この本で予習しておけばもっと理解できたなあって思いました😭

 

 

いろんな方のセッションが聞けたのと、お話もできたのでいい機会でしたー!

次はPHPerKaigi2020

これからももっと勉強して、いいコードかけるようになりたいという気持ちになりました^^

 

\スタッフの皆さん、ありがとうございました🙇‍♂️/

 

SpotifyAPIでクイックプレイリスト作成ツールを作ってみた

 

お久しぶりです。長いことサボってました…😓
ちょっと怠けてる今日この頃です、、
残りの2019年気を引き締めて頑張ります🙌

 

サボってる間、何をしていたかというと、ただただライブに行きまくってました。
ライブのはしごとかもしちゃってました!疲れましたけど、幸せでした😇

行くライブは対バンが多かったので、ライブ前の予習にプレイリストを作ってました。(ライブ後に作ることもありますが)
わたしは横着なので、そのプレイリストを作ることさえ面倒でした。
そこで、アーティスト名を入力するだけで、Spotifyプレイリストを作成してくれるツールを作りましたー!✨

https://dj-kin29.herokuapp.com/

 

ぜひ対バンや小さめのフェス前に、全出演アーティストを入力してサクっとプレイリスト作って楽しんじゃってください✊!!

 

使い方

  1. https://dj-kin29.herokuapp.com/にアクセスし、各項目の入力をする。
    • アーティスト名 ( 必須 ) [5個まで入力可]
    • プレイリスト名 ( 任意 ) [default: dj-kin29-日時]
    • cookie使用の許可 ( 必須 )

  2. (初回のみ)Spotifyログインをし、アクセス許可を同意する。
  3. プレイリスト(非公開)が作成されます!!!
    リンクより、プレイリストに飛ぶことができます。

 

※ アーティスト名検索は、ヒットした一番上のものとするので意図しないアーティストでプレイリストが作成されることがありますので、ご注意ください ⚠️

 

余談ですが、ここで入力したアーティストは、今私がはまっているアーティストさん達です☺️
ぜひ聞いてみてください🎧⚡️

 

使ったもの

参考

 

SpotifyAPIの使い方や、実装内容はまた別記事で書きたいと思います!

 

可変長引数(可変個引数)とは?

 

どうも!

名古屋に越してきてまだ3ヶ月ばかりですが、早くも県内で引っ越すことになりました、面倒ですねええ、引っ越し😩

 

本題

PHP(JSでもみたことあるような気がする)で、

function method(...$params){}

みたいに関数の引数に使われてる「…」があると思うんですが、何してんのか分からないので調べてみました!

 

 

...$params」の正体

調べてみたら、可変長引数(可変個引数)というものだそうです。

引数に「...$params」を含む関数のように、引数が可変する関数ことを可変個引数関数というみたいです。

PHP5.6以降から使用できるようになり、PHP5.5以前の場合は func_num_args()func_get_arg() および func_get_args() で代用するとのことです。

 

参考:https://www.php.net/manual/ja/migration56.new-features.php#migration56.new-features.variadics

 

 

使い方

php.netに聞いてみると、、、

引数リストに … トークンを含めることで、 その関数が可変長の引数を受け取ることを示せます。 引数は、指定した変数に配列として渡されます。

参照:https://www.php.net/manual/ja/functions.arguments.php#functions.variable-arg-list

 

 

使ってみる。

testKahenChoArg.php

<?php

function echoList($listName, ...$items)
{
  echo $listName . PHP_EOL;

  foreach($items as $item) {
    echo '- [ ] ' . $item . PHP_EOL;
  }
}

echoList('引っ越しのtodo', '転出届を出す', '転入届を出す', '免許証の住所変更', 'クレカの住所変更');
echoList('購入リスト', 'カーテン',  'トイレットペーパー');

実行結果

$ php testKahenChoArg.php
引っ越しのtodo
- [ ] 転出届を出す
- [ ] 転入届を出す
- [ ] 免許証の住所変更
- [ ] クレカの住所変更
購入リスト
- [ ] カーテン
- [ ] トイレットペーパー

 

なるほど〜😇引数を配列にして関数に渡してくれるんですね。

引数の数が明確でない時とかに使えそうですね!!!

おそらく使うことはあまりないと思うのですが、フレームワークなどを読んでる時にこの「…」がでてきて何をしているのか分からなかったので、スッキリしました^^

 

プリズム

 

「プリズム」
(著)百田尚樹

 

久しぶりに面白い本だなと感じました!

いつもは完読するのに一週間もかかる私が、3日で読みきってしまいました。

一言で言えば、隔離性同一症(多重人格)の男の中にいる、ある一つの人格を好きになる話でした。

 

ここからネタバレなので、読むって人はすぐに離脱してください!

 

 

 

 

 

 

ある人格というか、別の人なので、病気が治ると「その人はいなくなってしまうかもしれない」という気持ちとか、けど病気治ってほしいとかの葛藤もあって、多重人格に出会ったことないですが妙にリアル感があって、続きが気になって引き込まれてました。

 

モンスター」は、対をなす小説らしくてブックオフで即買いしましたー。まだ読んでないですがwww百田さんにハマったので、「幸福な生活」を読んでますが、短編小説の最後の一行が衝撃っていうアイデアはめちゃいいなーって思いましたが、内容は各話で「お!こわっ」ってなったり「あーね!やっぱり」ってなったりで色々でした!

 

 

 

npxで電子名刺つくったよ!

 

先週、Nagoya.php#17でLTをしていた方がnpxを使った電子名刺で自己紹介をしていて、

めちゃくちゃカッコよくて真似して作ってみました!

 

 

ターミナルで

$ npx kin29

って打ってみてください^^

 

多分、これが出てくるはずです!

https://www.npmjs.com/package/kin29

business-card

 

 

仕組み

npx <user-name>を実行すると、

該当のnpmパッケージを落としてきて、package.jsonにある"main": "/bin/card.js"を実行する(テキストファイルをconsole.logする)とのこと。

package.json

{
...
  "main": "/bin/card.js",
  "bin": {
    "kin29": "./bin/card.js"
  },
...
  "scripts": {
    "prepublish": "npm run build",
    "build": "node build.js",
    "dev": "npm run build && node ./bin/card.js",
    "lint": "standard",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

"scripts"にあるように、build.jsを自分用に修正をして、
npm run buildすると、出力ファイルである./bin/outputができます。
npm run dev で、 npx * のシュミレーションができます。

bin/card.js

#!/usr/bin/env node
// 👆 Used to tell Node.js that this is a CLI tool

'use strict'

const fs = require('fs')
const path = require('path')
const output = fs.readFileSync(path.join(__dirname, 'output'), 'utf8')
console.log(output)  // bin/output に出力テキストがある

 

そもそも、npxとは?

公式サイト:https://www.npmjs.com/package/npx

npm5.2.0以上が導入されていれば、npxコマンドも使えるそうです。

指定されたnpmパッケージがローカルに存在しない場合には、インストールをしてコマンド実行するものだそうです。

npmと違うのは、たとえローカルにインストールされていなくてインストールすることになっても、一時的にしかインストールせず実行後は削除されるらしいです。

ローカルを汚さずにすみますね😄

 

npmとnpxを比較してみた💡

● npm

:~/test-npm$ ls //まだローカルには何もない

:~/test-npm$ npm install eslint
...
+ eslint@6.3.0
added 119 packages from 75 contributors and audited 176 packages in 5.246s
found 0 vulnerabilities

:~/test-npm$ ls   //ローカルにインストールされた!
node_modules package-lock.json

:~/test-npm$ node_modules/.bin/eslint --version
v6.3.0

●npx

:~/test-npx$ ls

:~/test-npx$ npx eslint --version
npx: 119個のパッケージを4.678秒でインストールしました。
v6.3.0

:~/test-npx$ ls //ローカルにインストールされてないよ^^

 

npmに公開する

npxを使った電子名刺を公開するためには、npmで公開する必要があります。

やりかた

  1. https://www.npmjs.com/ にアカウントを登録する。
  2. $ npm adduser でログイン(1の登録情報を使う)する。
  3. GitHubリポジトリを作成し、masterにpushする。
  4. $ npm publish でnpmに公開をする。
    // タグをつけてpushする。
    $ git tag -a v1.0.0
    $ git push origin tags/v1.0.0
    
    // npmに公開する。
    $ npm publish ./
  5. npx <user-name> を試して、確認する。

 

さいごに

composerにもnpxみたいな機能ないんかな?って思って、

「composer npx」でググったら、https://github.com/composer/composer/issues/7272

↑でなんか、あるよー的な雰囲気なことを書いてると私の英訳力では感じたのですが、本当にできるのかよくわからんです 😅

 

 

 

参考:

[Qiita]npm 5.2.0の新機能!「npx」でローカルパッケージを手軽に実行しよう

[Qiita]npxでnodeモジュールを実行する

[Qiita]初めてのnpm パッケージ公開

 

GASのユニットテストを書いてみる

お久しぶりです。
ネタが尽きてきたのと、サボってました…

名古屋にきて、名古屋飛ばしはあるものの
宮崎にいた時よりも行きたいアーティストのライブがありふれていて金欠の日々です。
(適度な副業あれば、ください^^)

 

今回の本題に入ります!

7月にテストをきちんと書いているとてもいい会社に転職しました。
フロントエンドでもきちんとテストに向き合っていて刺激的な毎日です。

そこで、わたしの大好きなGASでもテストかけないかなーってふいに思い、
ググってみると、、、、ある!!!

 

その名は、

\  QUnit for Google Apps Script  /

QUnit for Google Apps Script is an experimental fork of QUnit that enables developers to test their Google Apps Script code.

QUnitの実験的なGAS用ユニットテストのようです。
そもそも、QUnitを知らない不束者です…

 

使い方

参考:https://qiita.com/yooo_gooo/items/07c9513a87f6633e40c1

一. QUnitライブラリを追加

qunit/gas/README.md を参考にしてみます。

  1. Select “Resources” > “Manage Libraries…” in the Google Apps Script editor.
  2. Enter the project key (MxL38OxqIK-B73jyDTvCe-OBao7QLBR4j) in the “Find a Library” field, and choose “Select”.
  3. Select the highest version number, and choose QUnit as the identifier. (Do not turn on Development Mode unless you know what you are doing. The development version may not work.)
  4. Press Save. You can now use the QUnit library when writing your tests. You can see a list of available functions by typing QUnit followed by a dot. Alternatively, read the API docs.
  1. スクリプトエディタを開いて、リソース>ライブラリを選択する。
  2. ライブラリを追加の欄に、「MxL38OxqIK-B73jyDTvCe-OBao7QLBR4j」を入れて追加ボタンを押す
  3. QUnitの一番大きいバージョンを選択する。(詳しくない限り、デベロッッパーモードは有効にしない) ※今回はバージョン4を選びました。
  4. 保存ボタンを押下する。これでQunitライブラリを使えるようになりました。使用可能なQunit関数は API docs.を読んで。

QUniyライブラリの追加

 

 

二. テストを書く

README通り、 API docs.>QUnit (version 4) を参考にしました。

function doGet( e ) {
  QUnit.urlParams( e.parameter );
  QUnit.config({ title: "Unit tests for my project" });
  QUnit.load( isPublicHolidayTest );
  
  return QUnit.getHtml();
};

QUnit.helpers(this);

 

/**
 * テストコード
 */
function isPublicHolidayTest() {
  test('isPublicHoliday Test', function(assert) {
    var date = '2019-08-11';
    assert.ok(isPublicHoliday(new Date(date)), date +' は休日');

    var date = '2019-08-20';
    assert.ok(!isPublicHoliday(new Date(date)), date +' は休日ではない');

    var date = '2019-01-01';
    assert.ok(isPublicHoliday(new Date(date)), date +' は休日');
  });
}

 

/**
 * テスト対象の関数
 * (祝日であればtrue、そうでなければfalseを返す)
 */
function isPublicHoliday(data){
  //日本の祝日のカレンダーID
  var holidayCalId = "ja.japanese#holiday@group.v.calendar.google.com";
  var holidayCal = CalendarApp.getCalendarById(holidayCalId);

  return holidayCal.getEventsForDay(data).length > 0
}

 

▼assert.ok(value[, message])

を使ったことがなかったんですが、valueがtrueであれば「okay(message)」をechoするっぽいです。

assert.ok(true);                            //okay
assert.ok(true, 'okokok!!!');      //okokok!!!

参考:https://nodejs.org/api/assert.html#assert_assert_ok_value_message

 

 

三. テストを実行

スクリプトエディタの
公開 > ウェブアプリケーションとして導入 > 「最新のコードでテスト」のリンク
へ飛ぶとテストが実行され、結果がみれます。
※アプリケーションにアクセスできるユーザー:「自分だけ」にできます。

QUnitのテスト結果

 

 

感想

うーん、clasp使って、CIでテストさせたいですよねー
毎回、スクリプトエディタでテスト実行するのは面倒 😄

フロントのテストって書いたことがないのですが、
GASだったらセル依存となると思うので、テストを書くの難しそうだなあと感じました。。。

 

 

ラズパイにOSMCを入れてYouTubeを見る、そしてiPhoneから遠隔操作する!

PS3の調子が悪くても、chromecastなんて買わなくても、PCをつながなくても、テレビでYouTubeが見れるんです!
(そのほかにもSoundCloud/AmazonPrime/DAZN…すごい数のサービス有)
そして、テレビのリモコンでも操作できる(※REGZA LINK使用)し、iPhoneでも操作できる!
ラズパイがあれば!!!ラズパイってやっぱすごいなって思いました。

 

 

今回使うものが、

\ OSMC (Open Source Media Center) /

今回は、一般的なRaspbianOSイメージを使わず、OSMC専用イメージを使いました。
(apt-getでの導入も可能らしいです、重すぎて私は断念しました…)

 

kodiなのかosmcなのか、よくわからんくってググるの大変でした。
– ラズパイにいれるOSのイメージ   :OSMC_TGT_rbp1_20190623.img
– 遠隔操作(リモコン)用のアプリ名 :Official Kodi Remote
ですもん…

あ、よく見ればちゃんと書いてました。

https://osmc.tv/about/より
>OSMC (Open Source Media Center) is a free and open source media player based >on Linux. Founded in 2014, OSMC lets you play back media from your local >network, attached storage and the Internet. OSMC is the leading media center in >terms of feature set and community and is based on the Kodi project.

(ざっくり感覚英訳)
OSMCとは、「Open Source Media Center」の略で、
無料のオープンソースメディアプレーヤーだよ、Linuxをベースに作っているよ!
2014年設立、….. OSMCは、….Kodiプロジェクトをベースに作ってるよ!

 

 

使ったもの

– ラズパイ1
– SDカード(16GB)
– キーボード  ←初期設定時のみ必須
– マウス   ←キーボードがあればいらないかも
– HDMI
– デスクトップ(テレビでもできます〜)
– 電源アダプター
– 無線LAN(USBポートでさせるタイプ)

作り方

1.SDカードにOSMCのイメージを入れる

書き込む前にフォーマットする必要があります。
(前回の記事の「1-2. SDにRaspbian(OS)を焼く」を参考にしてください。)

OSMCのイメージがあるところ:https://osmc.tv/download/
(windows/mac用もあります)

 

2. ラズパイにSDカードを差し込んで起動→初期設定

起動すると初回設定画面が出てきます。
ネットワーク設定(Wi-Fi)や、言語設定、TimeZone設定を行います。
初期設定での操作に、マウスとキーボードを使いました。
私は、タイムゾーンはAsia,Tokyoにしましたが、言語設定はEnglish(US)にしました。[理由:かっこいいから]

!!!ポイント!!!
– 日本語の文字化けを直すために、
settings > Interface > Skin より、 Fonts を 「Arial based」にする。
– wifiの接続に成功すると、3. iPhoneをリモコンにするで使うIPが表示されます。
– Setting > Service > Controlより以下の許可を設定する。
Web Server > Allow remote control via HTTP
Application Control > Allow remote control from applications on other systems
↑これをしないと、3. iPhoneをリモコンにするができません。

 

3. iPhoneをリモコンにする

iPhoneで遠隔操作をするために、アプリ「Official Kodi Remote」を使用します。
(Android用もあるらしいです。)

iPhoneのwifi接続を、2で設定したwifiと同じものにしてください。

アプリ「Official Kodi Remote」を開き、
REMOTE CONTROL > Add Hostより、
wifi接続で成功した際でてくるIP(portは80)を入力し、Find Kodiを押下してください。
初期設定で特に設定しなければ、usernameとpasswordは空白でも繋がります。
KodiRemoteの設定画面 

 

4. Video-add-onよりYoutubeを追加

Settings > Add-on browser > install from repository > Video add-onsより、
Youtubeをインストールします。

ここを見ると、多種多様のサービスが導入できることがわかります。
こんなにいっぱいあるの?ってめちゃ夢広がった瞬間でした。

インストールが終わったら、Video > Video add-ons に Youtubeが増えています。
Youtube > Searchとか適当に選ぶと、二段階認証必要ですみたいなアラートが出てくるので、それに従います。
二回コードを入力し終わると、Youtubeが見れるようになります!(Googleアカウントが必要です。)
ラズパイでYouTubeを見る

 

 

メモ

– OSMCのUIがちょっとわかりにくい、特に設定関係の
有効の場合□が明るくなる、無効の場合□が暗い部分とか

– キーボード操作の場合、戻るボタン = エスケープ()
– 初回は音量が小さいので、iPhoneのリモコンから音量あげないと音声が聞こえない

 

 

参考サイト(とっても感謝しています!)

 

 

感想

もうこのラズパイあれば、ほぼAmazonPrime見るためにしか使ってないPS3売っちゃてもいいんじゃないかなって気持ちになりました。

ラズパイってほんとなんでもできますねえ、すごい。

 

初めてのラズパイ~キーボード,マウスなくたってssh接続でどうにかする編~

先週、オープンソースカンファレンス名古屋にいってきました!

そこで、なんとラズパイをいただきました!!

ただ、、、後で知ったんですが学生限定だったらしく…ごめんなさい!

 

っということで、早速ラズパイ始めようと思い、
ラズパイ知識0の状態から、
ラズパイの導入→ssh接続するまでを書きたいと思います。

参考にしたサイト:
– https://www.d4af.com/post/2017/10/raspberry-pi-headless-setup/
https://blog.bnikka.com/raspberrypi/raspberrypi-install.html
http://masatolan.com/raspberry-pi/raspberry-pi-security/
https://qiita.com/mascii/items/0d1a280ac58ed8f6f999

 

準備

今回使うものリスト
– ラズパイ(多分、Raspberry Pi Type A)
– SDカード(8GB)
– 電源アダプター
– HDMI(画面とラズパイをつなぐ)
– 無線LAN(USBポートでさせるタイプ)
↑ ラズパイ3・ラズパイZeroWでは標準搭載されているらしい。
– Mac(SDカードに焼く& ssh接続用PC)

 

 

1.SDカードにOSとなるraspbianを焼く[Mac]

参考:https://qiita.com/shippokun/items/9070fc58f69d8c063e44

 

1-1. 以下の公式サイトより、Raspbian(OS)をダウンロードします。

私自身、ラズパイて最初からOS入ってるものだと勘違いしていました。
導入するOSの種類を選べるのも面白い!!!
ダウンロードに結構な時間がかかりました。
今回はすっごい時間がかかりましたが、
「Raspbian Buster with desktop and recommended software」
にしました。
https://www.raspberrypi.org/downloads/raspbian/

 

1-2. SDにRaspbian(OS)を焼く

書き込む前にフォーマットする必要があります。
今回は、ターミナルで行います。(ディスクユーティリティよりGUIでも行えます。)

MacにSDカードを差す前の状態

$ diskutil list
/dev/disk0 (internal):
...

/dev/disk1 (synthesized):
...

 

SDカード差し込み後(/dev/disk2が増えている=これがSDカード)

$ diskutil list
/dev/disk0 (internal, physical):
...

/dev/disk1 (synthesized):
...

/dev/disk2 (external, physical):
...

 

SDカードをアンマウントして、データを削除する。
「デバイス名」は、つけたい名前でokです!ただし大文字でないとエラーになったかと思います。
ここでdisk1とか選んじゃうとMacのデータを消しちゃったりするので注意してください。

$ diskutil unMountDisk /dev/disk2
Unmount of all volumes on disk2 was successful
$ diskutil eraseDisk MS-DOS [デバイス名] /dev/disk2

SDカードをアンマウントして、OSイメージをコピーする。

$ diskutil unMountDisk /dev/disk2
$ sudo dd if=/Users/[ユーザ名]/Downloads/[OSイメージ名] of=/dev/rdisk2 bs=1m

 

2. SDカードにssh接続用ファイルを作成[Mac]

デフォルトのままではssh接続が無効なので、有効化させます。

/boot以下にsshという名前の空ファイルを作成するだけ!

$ cd /Volumes/boot
$ touch ssh

 

3. SDカードにWi-Fi設定ファイルを作成[Mac]

デフォルトのままではWi-Fi接続情報がないため、ssh接続もできません。

そこでWi-Fi情報を設定します。

/boot以下にwpa_supplicant.confという名前のファイル作成する。

/boot/wpa_supplicant.conf

country=JP
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
    ssid="<SSID>"
    psk="<WPA2のPSK>"
    key_mgmt=WPA-PSK
}

 

psk以下は、wifiのパスワードそのままでもいけますが、
セキュリティ的に暗号化したほうがいいので、
http://jorisvr.nl/wpapsk.htmlを使って作成したものを設定したほうがいいそうです。

 

3. ラズパイにSDカードを差して起動[ラズパイ]

アンテナの確認だけなので、キーボード・マウスなくても大丈夫です。

raspi_start_view

 

Wi-Fiがうまく繫ればラズパイデスクトップ上のアンテナがこんな感じになります。

wifi_on

 

ちなみに繋がっていない場合は、こんな感じです。

wifi_off

 

4. ラズパイのMacアドレスとIPを見つける[Mac]

二つの方法があります。

1.ルータの設定画面
2.arp-scanコマンドより

 

1. ルータの設定画面の場合

Buffaloの場合は、http://192.168.11.1/login.htmlでログイン後、
ip_config
詳細設定>LAN>DHCPリースより、
自分がWi-Fiに接続しているMacアドレス以外のものがあればそれだと推測する方法があります。

この画面で手動割り当てにしておくと、
固定IP化されて毎回IP探す必要がなくなって楽です!

 

2. arp-scanコマンドよりの場合

$ sudo arp-scan -l
Password:
Interface: en0, datalink type: EN10MB (Ethernet)
Starting arp-scan 1.9.5 with 256 hosts (https://github.com/royhills/arp-scan)
192.168.11.1	xx:xx:xx:xx:xx:xx	BUFFALO.INC
192.168.11.2	yy:yy:yy:yy:yy:yy	Logitec Corporation

537 packets received by filter, 0 packets dropped by kernel
Ending arp-scan 1.9.5: 256 hosts scanned in 1.858 seconds (137.78 hosts/sec). 3 responded

今回、ラズパイのWi-FiドングルにLogitecを使っていたので、

192.168.11.2だというが想定できます。

 

5. Macからssh接続する[Mac]

4で推定したIPにMacからssh接続します。

ssh pi@192.168.11.2
pi@192.168.11.2's password:

デフォルトのユーザー名: pi
デフォルトのパスワード: raspberry

あとで変更します!

 

6. ssh接続情報を変更する[Mac]

デフォルトのままだとなんか怖いので変更しましょう。

●rootのパスワードを変更する

$ sudo passwd root
新しいパスワード:
新しいパスワードを再入力してください:
passwd: パスワードは正しく更新されました

 

● ポート番号を変更する
5行目くらいにあるポートの設定を変更する

pi@raspberrypi:~ $ sudo vi /etc/ssh/sshd_config
...
# possible, but leave them commented.  Uncommented options override the
# default value.

Port 12345  #多分、元は Port 22

 

● 繋がるか確認する。

$ ssh -p 12345 pi@192.168.11.2
pi@192.168.11.2's password:

感想

Wi-Fiの設定とか初めていじりました!
IP固定化とか、なんかインフラエンジニアっぽいくってかっこいい^^!!

手持ちのレゴでケース適当に作ったけど、適当すぎる。。。
lego_case