すぐにデプロイするための環境をつくる

はじめに

この記事は書きかけの記事です。具体的な方法を書いていません

動機

あるプログラムやサービスを作った時に、すぐに自分や誰かに試してもらいたいときがあると思います。 でもローカル環境で動くものはすぐに作れても、本番環境（ここでは、アプリをダウンロード可能な環境（app sotreなど）に置くことも含めます）で動かせる・置けるようにするということは面倒で、作成したプログラムやサービスを作るための技術とは別の技術が必要なことも多いです。そのため、例えば自分でもテストすることが面倒になったりするわけです。 なので、できるだけ簡単に本番環境へのデプロイが可能な枠組みは重要で、それを作っておきたいと考えました

Webサービスについて

ゴール: - 作成者側（未来の自分）への配慮: - 自分が主に用いるフレームワークや言語に対応したデプロイ方法の手順を記述し、APIやHPという形での公開を自動化する。できるだけ自前サーバーに載せる方法を考える - 利用者側への配慮: - リンクからすぐにアクセスできる。jsonを返すAPIなどの場合は、その情報の可視化を行うページも作成する。操作がわかるようにドキュメントも用意する必要があるので、テンプレを作成する。そのテンプレには実例のスクリーンショットを必ず載せる

スマホアプリについて

ゴール: - 作成者側（未来の自分）への配慮: - また調べます（デプロイはIDEに任せていたので、自動化の方法はよくわからない。また現時点での開発を考えていないため） - 利用者側への配慮: - リンクからすぐにダウンロードできる。ダウンロード方法が難しい場合、その手順のテンプレも記載する。操作がわかるようにドキュメントも用意する必要があるので、テンプレを作成する。そのテンプレには実例のスクリーンショットを必ず載せる

作成の予定

- Ruby on Rails と djangoテンプレートを作成し、docker上で動く形でデプロイできるようにする

ポート関連でつまづいた話と、何かを知る・覚えるためにはつまづく必要があるよねという話

僕は液晶タブレットを持っているという話

絵も描かないのに。しかしモニターとしても使えるので、普通にモニターとして使用しています。 HUION Kamvas GT-191 5万円台で買える液タブなので安くて買いました。

閑話休題、表面上の問題

表面上の問題はVSCodeの拡張機能で起こりました。

僕は、VSCodeの拡張機能Preview on Web Serverを使っています。

これは、HTMLのリアルタイムプレビューを表示できる拡張機能で、いちいちブラウザを更新しなくていいので便利です。

いつものようにこれを使っていたのですが、いきなりプレビューが表示されなくなりました。

本当にいきなり？

実は、この問題が起こる前に、一回macがカーネルパニックを起こし、再起動しました。 これが起こった時、「あ、液タブ繋いでるからだな。」と思いました。 これを思い出して、「多分、変に再起動したからだろう。もう一回再起動すれば治るはず」と思い、再起動。でも、残念ながら治らず。

じゃあ、原因は何か？

きっと、サーバーが閉じてるんだろう。そう思って、サーバーを再起動してみました（Preview on Web Serverは、ローカルサーバーを起動、停止させることができ、そのサーバーにアクセスしてプレビューを表示しています）

$ lsof -I :8000 をすると、やはり何も表示されません。サーバーが起動してないらしい。

• ウイルスバスターの設定確認（結局どうするかわからず諦めた）
• Preview on Web ServerのGitHubでコード確認（意味がわからなかったので諦めた）

などしてみましたが、 なんとなく「液タブが原因では？」と気づきました。それしかもう考えられない。

解決法：液タブとの接続を切る

液タブとの接続を切ったところ、正常にサーバーが起動し、HTMLプレビューが表示されました！

ちなみにもう一度液タブをつなぎなおしたところ、そのままプレビューは表示されました。

しかし、なぜ液タブが繋がっていたらサーバーが起動できなかったのか？ それは、ポートの仕組みが関係していると考えられます。なぜかというと、液タブに接続すると、イヤホンから音がでなくなるという問題も発生しているからです。（イヤホンジャックもディスプレイも、ポート接続。イヤホンを何回か抜き差しすると治る）これと同じような理屈で、液タブが他のポートにも影響を与えていると考えられそうです。
でもなぜかはよくわからない・・・

終わりに

サーバーが起動しない！という時に、ポートの確認をするということは、実際にサーバーを起動するという機会があって、かつそこでハマらなければ身につかない知識だと思います。

最近では、dockerを使った時に複数コンテナが同じポートを使おうとして干渉していて、ポートの問題にぶち当たりましたが、dockerはそういう意味もいい機会を与えてくれるのかもしれません。ポートの衝突とか、普通一つしかサーバー起動しないのであまり遭遇しない問題だと思うので。特に個人開発では。

conohavpsのクーポンは早めに登録だけしよう

【追記12/4】

twitter経由で、替えのクーポンコードをConoha運営様からいただくことができました！(もちろん今回は特別と言われました。当たり前ですね笑)

最近久し振りにvpsを使おうとしたところ、クーポンが期限切れでした…

最初から登録していた気になっていたのですが、登録していませんでした。

登録期限は10/31で、さすがに弁解の余地もありません。泣

conohaのクーポンは、「登録期限」と「利用期限」があり、利用期限は「登録から〜年」などとなっていたので、クーポンを買った時の自分は「利用期限を伸ばすために登録も後にしよう」と思ったのでしょう。

その欲張り心が4500円(割引だったので、conoha上では5000円)を失う結果になってしまいました…

皆さんも私のように失敗しないよう気をつけましょう…

というか、GMOさん、クーポン登録期限はIDの管理とかあるので短いのもわかるけど、利用期限とか無限にしてよ。。。

漫画雑誌用ブラウザの作成⑤お気に入りボタンで追加&削除

漫画雑誌用ブラウザを作成中です。
https://github.com/TetsuFe/WebBookBrowser
今回もスマホからの投稿なのでmarkdownが使えてません。

## 進捗
今日で
- お気に入りボタンで追加&削除
- お気に入りボタンを画像に変更
を行いました。

## お気に入りボタンで追加&削除

間違ってお気に入り入れたりしたときに、削除もできるようにしました。

普通のTwitterとかfacebookのいいねボタンと同じON/OFFの方式です。

## お気に入りボタンを画像に変更

ボタンはできるだけ画像の方がいい気がするので、画像にしました。星型の画像を使いました。ただ、大きさが合わないのでどうしようかという感じですね。。余白を追加することにしようと思います。

## 今後
- レイアウトの見直し

- リストからのお気に入り削除
- 複数デバイス対応

- 新しい対応サイトの追加

なども行なっていきたいです。

漫画雑誌用ブラウザを作成④お気に入り検索バーの追加

漫画雑誌用ブラウザを作成中です。
https://github.com/TetsuFe/WebBookBrowser

今回もスマホからの投稿なのでmarkdownが使えてません。

## 進捗
今日で
- お気に入り絞り込み検索バーの追加
- URLバー付近の微妙なレイアウトのズレ修正
を行いました。

## お気に入り絞り込み検索バーの追加

お気に入りが増えてくると、検索がしたくなると思います。なので、絞り込み検索ができる検索バーを作成しました。

単にUITextFieldに入力をしたらrealmでタイトルをfilter(“title CONTAINS %@“, uitextField.text!)

として、その結果をテーブルビューに反映させるだけのものです。まあ実装はこれ以上にそこそこ面倒が多いですが。

## 今後
- お気に入り追加のボタンを画像にする
- レイアウトの見直し
- 複数デバイス対応

なども行なっていきたいです。

漫画雑誌用ブラウザを作成する③進捗表示と非同期処理

漫画雑誌用ブラウザを作成中です。
https://github.com/TetsuFe/WebBookBrowser

今回もスマホからの投稿なのでmarkdownが使えてません。

## 進捗
ここ２日で

- ダウンロード中の進捗表示

- 対応ページの追加
を行いました。

## ダウンロード中の進捗表示について

ダウンロードが終わるまで、「ダウンロード中・・・」というUILabelのついたUIViewを表示をするようにしました。

なんとか.main.Asyncを使い、非同期処理でダウンロードを行い、そのコールバックにUIView.removeFromSuperview()を設定することで実装しました。

## 対応ページの追加
今回はmangamura.orgの

/?p=本のID/ 

を追加しました。

このパターンのリンクをお気に入り登録するときにサムネイル画像も保存されます。
次はdlbooksかな。


## 今後
- お気に入り追加のボタンを画像にする

- お気に入りの絞り込み用検索バー
- 複数デバイス対応

なども行なっていきたいです。

漫画雑誌用ブラウザを作成中② スクレイピングとカスタムセル

漫画雑誌用ブラウザを作成中です。

https://github.com/TetsuFe/WebBookBrowser

今回もスマホからの投稿なのでmarkdownが使えてません。

## 進捗

ここ２日で

- スクレイピングによるサムネイル画像の抽出

- サムネイル画像を表示するためのカスタムCellの作成

を行いました。

## スクレイピングについて

スクレイピングにはSwift4にも対応しているライブラリ、「Ji」を使いました。

## サムネイル取得に対応させたページ

今回はnhentai.netの

- /g/本のID/ページ数/
- /g/本のID

のリンクをお気に入り登録するときにサムネイル画像も保存されるようにしました。

あとは、どのサイトにしようか…

これでとりあえず、お気に入り登録したサイトのサムネイルを取得、Realmに保存するところまでできました。

## 今後

ただ、サムネイルが今は絶対ある前提で作成しているので、サムネイルを取得できない場合も対処できるように条件分岐を書く必要があります。

まずはそれを書いていきたいと思います。

また、

- お気に入り追加のボタンを画像にする

- ダウンロード中の待ち時間に「downloading...」などの表示をする

- 複数デバイス対応

なども行なっていきたいです。