Programmers Office

画面デザインはそれっぽくなってきたので、いったんバックエンドに入ろうと思います。 そして、最初の宣言（Monacaでハイブリッドモバイルアプリ開発）通り、AWS Cloud9＋さくらレンタルサーバで作ろうと思いました。 が、結論としては、諦めました。以下、できる方法をお探しの方には、あまりお役に立てません。 さくらレンタルサーバへのSSH公開鍵接続 これに関しては、割と情報はそろっていると思います。肝は、各フォルダへのパーミッション設定のようです。 今回、これに成功したかは不明です。

この画面で「AWS Cloud9 couldn’t connect to SSH server」エラーが出続けました。 このメッセージからはSSHでの接続に失敗しているのではと思い、ずっと調べていました。 こちらの情報は良いと思いました。 https://qiita.com/fukusuke/items/6eb9f8593a296a95798c しかし、これはさくらレンタルサーバでは、root権限がなく、自分のHOME配下外のファイルの参照も厳しいです。 で、ふと思いました。Cloud9はNode.jsが必須だったと。それが原因でこのメッセージなのではないか。 さくらレンタルサーバへのNode.jsインストールは不可 ということで、Node.jsインストールを試みますが、これまた、いろいろ情報がありつつも、難しいという結果。 gmakeで失敗したのは、 logging.cc:(.text._ZN2v84base13DumpBacktraceEv+0x24): undefined reference to backtrace’ logging.cc:(.text._ZN2v84base13DumpBacktraceEv+0x31): undefined reference to backtrace_symbols’ というものですが、最終的には、そもそもインストール禁止だということで納得しました。 そもそも、レンタルサーバは複数のユーザが同じサーバーを共有するのであり、他の利用者に迷惑をかけるような利用は不可です。 正直、レンタルサーバというものを、ちゃんとイメージできていなかったのですが、今回 ls /homeをしてそういうことか、と理解しました。 そうであれば、下記のような禁止事項も納得です。 https://www.sakura.ne.jp/terms.html ・・・daemonとしてサーバーに常駐するプログラムの実行 ということで、さくらへの接続は止めて、今回もGCPで開発環境を構築することにしました。 AWS Cloud9からGCE（Google Compute Engine）への二つ目の接続 さて、すでに開発環境を作ってあるGCP（Google Cloud Platform）のGCE（Google Compute Engine）ですが、せっかくなので、別の環境を作ろうと思いました。 バイブルは、こちら。 https://qiita.com/j-un/items/f5d72d21f67d384d3c84 プロジェクトとして今回用のプロジェクトを作り、インスタンスを作ろうとします。 で、設定を選んでいくと、料金表示がされます。・・・料金。 無料で利用できるということでGCPを選んでいるので、無料の条件を再確認すると、 https://cloud.google.com/free/ 1 f1-micro インスタンス（1 か月あたり、米国リージョンのみ）です。 ということで、既存のインスタンスに接続することにします。 初回作成時に失敗したと思いましたが、Cloud9環境を作るディレクトリは指定できます。 前回は自分のHOMEを指定する形になってしまいましたが、今回は、その下にディレクトリを作って、そちらを指定しました。 ということで、ようやく、バックエンド側開発に入ります。

まず、Monacaで画面デザインを作っています。 新規プロジェクトでは、「Onsen UI V2 Vue Tabbar」を選択します。

しかし、各種サンプルを見ながらなんとかなるかなと思いいつつ、なかなかしんどいですね。 この構成の場合、何かを調べようと思ったら、Monacaという基盤の話なのか、Onsen UIというデザインフレームワークの話なのか、Vueという画面制御フレームワークの話なのか、を切り分けながらそれぞれのマニュアルなり、情報なりを調べる必要があるわけです。 で、いきなり、はまったのが、画面上部のツールバーに画像を表示したいな、と。 そこで考えるべきは、画像をどこに置くのか、どういうパスを書けば参照してくれるのか、普通にimgタグを使うべきなのか、他に作法があるのか、等ですが、それぞれの守備範囲がいまいち理解できずに、調べようがないなと思うわけです。 結論としては、サンプルとして公開されているポケモンアプリ（https://docs.monaca.io/ja/sampleapp/samples/）で、画像の置き場はsrc/publicか、と理解し、あとはimgタグでやってみて、うまくいっているからよいか、みたいな感じです。 もう一つの例としては、画面を黒系統にしたいなと思い、Onsen UIのテーマローラー（https://onsen.io/theme-roller/）というのでDark themeといのがあるのが分かったのですが、それの適用方法が分からない。見てるとテーマローラーで生成したファイル群をダウンロードして、配置して、という方法が出てきますが、細かくカスタマイズしたいならそうかもしれませんが、単にテーマを適用したいだけなんだよ、ということでもう少し調べると、onsen-css-components.cssをonsen-css-components-dark-theme.cssに書き換えればよい、という情報が見つかります。 これはどこに書いてあるのだ、というところから始まりますが、それは検索して、今回の構成の場合はmain.jsに書いてあることが分かります。cssの読み込みをjsでやる、というところで既に古い頭にはつらいのですが、そういうものです。 ところが、このように書き換えてみても反映されない。むむ、と思い、もう少し調べると、dark-onsen-css-components.cssだよ、という情報が見つかり、これでOK。 しかし、なかなか辿り着かないよ、と思いつつ、やっていくうちに馴染むだろうと思い込んで、先に進みます。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 原 一浩,taisa,小松 大輔,永井 孝,池内 孝啓,新井 正貴,橋本 安司,日野 洋一郎 技術評論社 2018-05-09 <div class="kaerebalink-salesranking" style="margin-bottom: 5px;"> 売り上げランキング : 8419 </div> <table style="border: currentcolor; margin-top: 10px;"> <tr> <td style="border: currentcolor; text-align: left;"> </td> <td style="border: currentcolor; padding-left: 10px; font-size: x-small; vertical-align: bottom;"> by <a href="https://kaereba.

Monaca再開 今回、とあるアプリを作ろうと思い立ち、以前ちょっと遊んでいたMonacaを改めて使ってみたいと思います。 その間色々進歩していると思うので、割と一から勉強の部分も多々ありますが、地道に。 作ろうとしているものの構成は下記の通り。 システム構成 フロントエンド Monaca Onsen UI V2 Vue Navigation https://press.monaca.io/atsushi/2533 Vueを使ってみたいと思ってはいたのですが、この記事に後押しされました。 あまり複雑な画面にはならないと思いますが、その分遊べるところは遊ぼうという感じ。 バックエンド WordPress（REST API） 依然作ったWebアプリは、WordPressの豊富なテンプレートを生かしたこ洒落たUIにしたいという目的で、WordPressのプラグインという形でアプリを作りました。 ところが、WordPressプラグインをゴリゴリ書いていると、UI側のメリットよりも、開発フレームワークとして使いやすいと思うようになりました。 その意味で、WordPressを使い、ユーザ管理、コンテンツ管理、データIOを行って、フロントエンドにはREST APIで返す、という方法をとってみたいと思います。 プラグインの作成 – WordPress Codex 日本語版 開発環境 Cloud9＋さくらレンタルサーバ 並行して行っている、Code4Startupの開発環境は、Cloud9＋GCE（Google Compute Engine）ですが、ちょっと環境構築がしんどかった https://www.programmers-office.ml/2018/05/03/code4startup-%ef%bd%9e-ubereats%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86-%ef%bd%9e-python-django%e7%92%b0%e5%a2%83/ ので、今回は、せっかく契約していることもあり、さくらレンタルサーバを使いたいと思います。 バックエンドのWordPressもさくらに立てるので、開発ソースと運用環境が両方さくらにあることのメリットが何かあるかも、探ってみたいと思います。 というわけで、今後に乞うご期待！

Code4Startup Task 8、9の辺りは、ひたすらページ作成のコーディングをしていきます。 こういうドリル的なこと：写経も必要。 すんなりいかないところとして、 modelの作成で restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE) 講義の中では、on_deleteは記載していませんが、必要と怒られます。 offsetの書き方は注意 https://www.programmers-office.ml/2018/04/03/code4startup-%ef%bd%9e-landing-page%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86/ Code4Startup シェアリング・エコノミー　―Uber、Airbnbが変えた世界 宮崎 康二 日本経済新聞出版社 2015-07-23 売り上げランキング : 88013 by カエレバ

以前もstaticの読み込みがうまくいっていなかったのですが、settings.pyを終始して戻して保存したら、style.cssを読んでくれたようです。まだ、完全に同じ見た目にはなっていませんが。もやもや・・・ Bootstrap4 講義はBootstrap3ベースになっていますが、最新のBootstrap4を使おうとすると、色々調べながら進める必要があります。 まず、jquery等の読み込みですが、講義で参照しているbasic templateは使用できないので、Introductionを見ると、そこにStarter templateがあります。 必要なJS読み込みは となっています。 さらに、django-bootstrap3をインストールしていますが、ここはpip install django-bootstrap4にします。 シェアリング・エコノミー　―Uber、Airbnbが変えた世界 宮崎 康二 日本経済新聞出版社 2015-07-23 売り上げランキング : 28003 by カエレバ

Code4Startup 以前もstaticの読み込みがうまくいっていなかったのですが、settings.pyを終始して戻して保存したら、style.cssを読んでくれたようです。まだ、完全に同じ見た目にはなっていませんが。もやもや・・・ Bootstrap4 講義はBootstrap3ベースになっていますが、最新のBootstrap4を使おうとすると、色々調べながら進める必要があります。 まず、jquery等の読み込みですが、講義で参照しているbasic templateは使用できないので、Introductionを見ると、そこにStarter templateがあります。 必要なJS読み込みは となっています。 さらに、django-bootstrap3をインストールしていますが、ここはpip install django-bootstrap4にします。 スタイルの読み込みがちゃんとできていないので見た目はもやもやしますが、とりあえず進めます。 Code4Startup シェアリング・エコノミー　―Uber、Airbnbが変えた世界 宮崎 康二 日本経済新聞出版社 2015-07-23 売り上げランキング : 28003 by カエレバ

Code4Startup 続いて、oauthによるFacebook認証。 この辺の実践感がこの講座の良いところ。 https://developers.facebook.com/ スタートガイド→Facebook for Developersアカウントを作成するところから始めます。 画面構成は講義ビデオの時からは大分変っているようですが、何とか進められます。 で、django-rest-framework-social-oauth2==1.0.4をインストールすることになっているのですが、 ImportError: No module named ‘social_django’ となります。 ↓ https://teratail.com/questions/115059 pip install social-auth-app-django ↓ ImportError: No module named ‘braces’ ↓ pip install django-rest-framework-social-oauth2 -U →django-rest-framework-social-oauth2==1.1.0 ↓ OK という感じで（分かりますか(^_^;;;)）、結局最新バージョンでないとライブラリ間の構成が合わないという話。 requirements.txt　の記述は django-rest-framework-social-oauth2==1.0.4 のままだけど・・・ でうまくいったかと思いきや、アプリ画面を開くと You may need to add ‘x.x.x.x’ to ALLOWED_HOSTS. のエラー。 settings.py のALLOWED_HOSTS に追記すれば確かに起動するようになった。 https://www.deep-blog.jp/engineer/archives/4287 しかし、これまで書いていなかったのになぜ？ちょっと気持ち悪い。 Facebook認証の流れについては、 https://stackoverflow.com/questions/18995448/rails-api-authenticate-users-from-native-mobile-apps-using-username-password-or と同じ内容の図がもう少しきれいに書かれていて、なるほど、と思いました。 そして、ブラウザ・サーバアプリ・Facebook間でのやり取りは、アプリを作る前に試しましょうということで、POSTMAN。 このJSON大流行のこのタイミングで、このツールをぶつけてくるところがなかなか（たまたま）。 python-social-auth のPipelineの説明は、ビデオ見てると行方不明になりますが、下記になります。 https://github.com/python-social-auth/social-docs/blob/master/docs/pipeline.rst ちょっと、Facebook認証で情報を取り出せるようになるので、GDPRが気になるところ。 個人で試しているうちは気にしなくても良いかもしれませんが、早急に考えないといけないかと思っています。 Code4Startup 独学プログラマー Python言語の基本から仕事のやり方まで コーリー・アルソフ 日経BP社 2018-02-24 売り上げランキング : 204 by カエレバ

Code4Startup さて、herokuが動作するようになると、おもむろにGunicornをインストールします。 Gunicornとは何か http://gunicorn.org/ Gunicorn ‘Green Unicorn’ is a Python WSGI HTTP Server for UNIX. Python製のWSGI サーバ WSGI とは何か http://gihyo.jp/dev/feature/01/wsgi/0001 WSGIはJavaにおけるJava Servelet APIと同じように，WebサーバとWebアプリケーション間の汎用的なインターフェースを定義しています。 要するに、Djangoを動作させるための土台、と考えればよいでしょうか。 次にインストールするのが、WhiteNoise WhiteNoiseとは何か https://pypi.org/project/whitenoise/ http://furodrive.com/2016/01/white_noisedjango/ WhiteNoiseとはWSGIアプリケーションのための静的ファイルを配信するのを簡単にしてくれるライブラリです。 少しの設定をするだけでAmazon S3やNginxに頼ることなく静的ファイルを配信できます。 本番サーバーで画像やcss等を参照できるようにするには色々と手順を踏まないといけなかったのですが、WhiteNoiseを使うとそのような手間が省けて大変便利です。 続いて、dj-database-url dj-database-urlとは何か https://github.com/kennethreitz/dj-database-url http://y0m0r.hateblo.jp/entry/20121130/1354290868 dj-database-urlを使うとdb接続文字列を環境変数DATABASE_URLから取得させることができます。 さらにpsycopg2 PythonのPostgreSQL用ドライバ これで、herokuに乗せるわけですが、色々講義内で想定されているエラー以外に、想定外のエラーが。 could not determine PostgreSQL version from ‘10.4’ 諸々のサイトを見るとpsycopg2のバージョンを上げろと。 http://initd.org/psycopg/docs/ こちらで表示されるのが、現時点で2.7.5なのでそうしてみます。 そうすると、こんな感じのエラー Could not find a version that satisfies the requirement psycopg2==2.7.5 (from -r /tmp/build_f493d80720eb882b01a250f718f3b058/requirements.txt (line 6)) (from versions: 2.0.10, 2.0.11, 2.

Code4Startup 前回からの続き インストールされたということで、heroku loginしてみると、 Error: login is not a heroku command. 再インストールしなさいという情報があるので、 curl https://cli-assets.heroku.com/install-ubuntu.sh | sh しかし、エラー変わらず。 手当たり次第という感じですが、 wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh 変わらない。 https://teratail.com/questions/125977 に従ってみる。 npm uninstall -g heroku これでもheroku –versionは出てくるが・・・ wget https://cli-assets.heroku.com/heroku-cli/channels/stable/heroku-cli-linux-x64.tar.gz -O heroku.tar.gz tar -xvzf heroku.tar.gz mkdir -p /usr/local/lib /usr/local/bin sudo mv heroku-cli-v6.16.18-62346b1-linux-x64/ /usr/local/lib/heroku ↓実際に作成されたディレクトリ名に変更 sudo mv heroku-cli-v6.99.0-ec9edad-linux-x64/ /usr/local/lib/heroku sudo ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku 失敗 ln: failed to create symbolic link ‘/usr/local/bin/heroku’: File exists ↓ sudo unlink /usr/local/bin/heroku

Code4Startup 講義ビデオは突然heroku loginから始まった。 しかし、cloud9ではherokuコマンドは効かない。 よって、インストールから。 http://www.lib-arc.com/entry/2018/04/15/234355 こちらでは、nodeは入っている前提。しかし、少なくとも私の環境には入っていない。 そこから。となると、こちらを参考。 https://qiita.com/beplocks661/items/8d840b6efcdcd14009bf と思ったらnvm: command not found。 https://qiita.com/seibe/items/36cef7df85fe2cefa3ea ここから。 sudo apt-get install -y nodejs npm sudo npm cache clean sudo npm install n -g sudo n stable node -v v10.2.1 ここからやっとherokuインストール npm install -g heroku-cli インストールは始まったけど、エラー ・・・ npm ERR! Please try running this command again as root/Administrator. ・・・ sudo npm install -g heroku-cli でOK heroku -v heroku-cli/7.0.9 linux-x64 node-v10.2.1 という感じでよいのでしょうか。 開発環境構築の基礎を学べます。 ん？cloud9って、こういうものでしたっけ？？ Code4Startup