Posted at

paizaで他の人が書いたPHPソースを動かす方法

More than 1 year has passed since last update.

このソースを発見したので、Paizaで試してみようと思いました。

https://qiita.com/hedrall/items/fa8d43292f6bbeaf96d7

paiza.toでは、Githubからのリポジトリをインストール実行しようとすると、paiza cloudを使わないとダメと分かりました。

https://paiza.cloud/ja/

ただ、無料だと作ったサーバーが24時間で消えてしまうので、本当にお試しという感じです。

今回は、PHPの環境で作りました。

npmも、使えました。

でも、後ほど詳しく書きますが、エラーが出たので、npmのバージョンを最新にしようと思い、下記の記事を読んでアンインストールしてから、再びインストールしました。

https://qiita.com/taikan/items/88ff45a12b4e06293794

Node.jsが必要とわかったので、こちらの記事を参考にしてインストールしました。

https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

paizaのクラウドサーバーは、Ubuntuでした。

これが無いと怒られるので、インストールしました。

https://www.npmjs.com/package/@angular/core

こちらも、必要になります。

https://github.com/angular/angular-cli#updating-angular-cli

また、パッケージの依存関係を作るために、下記の記事を参考にしてインストールしました。

http://phiary.me/node-js-package-manager-npm-usage/

このコマンドを使いました。

package.json がある階層に移動して、このコマンドを実行します。



$npm install



paiza cloudは、ターミナルがあるので、こうした操作も楽です。

今回のリポジトリを動かすために、色々とインストールしました。


もっと簡単に使うことができた

実は、Angularの環境を作ったとに、ブラウザへのアクセスが出来ない?みたいなエラーが出たのです。

”Invalid Host header”

このエラーのことが分からず、冒頭から無駄なことをしてしまいました。

今回あえて、私がスタックオーバーフローで教えて頂けるまでにハマった様子も、残そうを思います。

実施は、下記の手順で、出来ました。

public_htmlの直下に新しいフォルダを作りました。

(Appで作りました。)

作ったフォルダーに、今回見つけたリポジトリを追加します。

この状態でサーブすると@angular/coreが無いとエラーが出ます。

https://www.npmjs.com/package/@angular/core 

これをリポジトリを入れたフォルダーに、追加して ください。

ng serve --disable-host-check

とコマンドから入力すると、無事にサーブできます。

私は、回線があまりに遅いので、サーブしてポート4200でブラウザが開いたあと、數十分画面が変わりませんでした。

そのため、何か足りないのかなと思い、先に書いたように依存関係をまとめてインストールするコマンドを試しました。

そして、ソースを見ていて下記のリポジトリを呼び込んでいたので、念のため追加しました。

https://www.npmjs.com/package/@angular/platform-browser-dynamic


今回Angular初体験

今回、Angularを初めて使ったので、色々と勉強しながら環境作りをしました。

別途書いた記事のように、初期のプロジェクトを作って、ブラウザに表示できるか試したりしました。

今回を契機にして、Angularの勉強を進めて行きます。

勉強するのに役立つと思う記事を見つけましたので、シェアしたいと思います。

https://www.buildinsider.net/web/angulartips/002

https://blog.mismithportfolio.com/web/ngtodo