ポート関連でつまづいた話と、何かを知る・覚えるためにはつまづく必要があるよねという話
僕は液晶タブレットを持っているという話
絵も描かないのに。しかしモニターとしても使えるので、普通にモニターとして使用しています。 HUION Kamvas GT-191 5万円台で買える液タブなので安くて買いました。
閑話休題、表面上の問題
僕は、VSCodeの拡張機能Preview on Web Serverを使っています。
これは、HTMLのリアルタイムプレビューを表示できる拡張機能で、いちいちブラウザを更新しなくていいので便利です。
いつものようにこれを使っていたのですが、いきなりプレビューが表示されなくなりました。
本当にいきなり?
実は、この問題が起こる前に、一回macがカーネルパニックを起こし、再起動しました。 これが起こった時、「あ、液タブ繋いでるからだな。」と思いました。 これを思い出して、「多分、変に再起動したからだろう。もう一回再起動すれば治るはず」と思い、再起動。でも、残念ながら治らず。
じゃあ、原因は何か?
きっと、サーバーが閉じてるんだろう。そう思って、サーバーを再起動してみました(Preview on Web Serverは、ローカルサーバーを起動、停止させることができ、そのサーバーにアクセスしてプレビューを表示しています)
$ lsof -I :8000 をすると、やはり何も表示されません。サーバーが起動してないらしい。
などしてみましたが、 なんとなく「液タブが原因では?」と気づきました。それしかもう考えられない。
解決法:液タブとの接続を切る
液タブとの接続を切ったところ、正常にサーバーが起動し、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が使えてません。
## 進捗
ここ2日で
- ダウンロード中の進捗表示
- 対応ページの追加
を行いました。
## ダウンロード中の進捗表示について
ダウンロードが終わるまで、「ダウンロード中・・・」というUILabelのついたUIViewを表示をするようにしました。
なんとか.main.Asyncを使い、非同期処理でダウンロードを行い、そのコールバックにUIView.removeFromSuperview()を設定することで実装しました。
## 対応ページの追加
今回はmangamura.orgの
/?p=本のID/
を追加しました。
このパターンのリンクをお気に入り登録するときにサムネイル画像も保存されます。
次はdlbooksかな。
## 今後
- お気に入り追加のボタンを画像にする
- お気に入りの絞り込み用検索バー
- 複数デバイス対応
なども行なっていきたいです。
漫画雑誌用ブラウザを作成中② スクレイピングとカスタムセル
漫画雑誌用ブラウザを作成中です。
https://github.com/TetsuFe/WebBookBrowser
今回もスマホからの投稿なのでmarkdownが使えてません。
## 進捗
ここ2日で
- スクレイピングによるサムネイル画像の抽出
- サムネイル画像を表示するためのカスタムCellの作成
を行いました。
## スクレイピングについて
スクレイピングにはSwift4にも対応しているライブラリ、「Ji」を使いました。
## サムネイル取得に対応させたページ
今回はnhentai.netの
- /g/本のID/ページ数/
- /g/本のID
のリンクをお気に入り登録するときにサムネイル画像も保存されるようにしました。
あとは、どのサイトにしようか…
これでとりあえず、お気に入り登録したサイトのサムネイルを取得、Realmに保存するところまでできました。
## 今後
ただ、サムネイルが今は絶対ある前提で作成しているので、サムネイルを取得できない場合も対処できるように条件分岐を書く必要があります。
まずはそれを書いていきたいと思います。
また、
- お気に入り追加のボタンを画像にする
- ダウンロード中の待ち時間に「downloading...」などの表示をする
- 複数デバイス対応
なども行なっていきたいです。
漫画雑誌用ブラウザを作成中①
漫画雑誌用ブラウザを作成中です。
https://github.com/TetsuFe/WebBookBrowser
普通のブラウザに残したくないHな漫画をweb上で読む・お気に入り登録するときに使うためのものです。
売りとしては、
- 簡単・ワンタップのお気に入り登録
- すぐ見つけられる画像サムネイル表示
これを目標に作成します。
app storeに出しにくいのが残念ですが、なんとかストアに申請までを目標にします。
現在実装中の機能
- webビュー
- お気に入りサイト登録
- Realm
- アドブロック
今後実装していきたい機能
- 複数タブを開く
- お気に入りサイトのサムネイル表示
- お気に入りの柔軟なタイトル設定