Qiita投稿アプリ開発(17) 課題解決完了
アプリリリースに向けて、実機で出てきた問題をただ解決するだけの簡単なお仕事です。
と言いたいところですが、そう簡単ではありませんでした。
自分で作った部分の修正だけならよかったのですが、使っているライブラリにも修正が必要でした。
洗い出した問題点について、それぞれどのように解決したか書いてみたいと思います。
① 投稿・下書きの一覧で表示される各項目の表示部分が狭く、見づらい
この問題の解決は非常に楽ですね。
ただ単にcssのheightの値を変えるだけです。
はてなブログのアプリを参考にして各項目のリストの高さを変更しました。
② コピーやペースト・キーボードなど、iOSが提供している機能について、英語表記となっている部分がある
これはググるだけのお仕事でした。
まだ試せていませんが、ここに書いてある方法で、英語表記から日本語表記へ変更ができそうです。
ビルド毎に変更するのも面倒なので、最終ビルド時に試そうと思います。
③ エディタ画面でプレビューと削除のボタンが縦並びになっている
buttonタグのclassにbutton--largeが設定されていたことが原因でした。
button--largeを使った場合は一列使って表示することが前提のため、縦並びになってしまうようです。
④ エディタ画面で記事本文が長くなると、プレビューと削除のボタンが画面外に出てしまう
プレビューと削除ボタンの描画順序を一番最後にすることで解決できると思っていました。
つまり、昔の個人のホームページで良く使われていたフレームをcssで実現しようという感じです。
z-index: 999
bottom: 0
position: fixed
結果から言うと、これはうまくいきませんでした。
画面をスクロールした時に最初の位置から移動してしまいました。
しかし少し調べてみると、ons-bottom-toolbarという、画面下にツールバーを作るものがOnsen UIで用意されていて、欲しかった機能そのものでしたので、こちらを使ってなんとか解決です。
⑤ 画面におさまっているページにも関わらず、スワイプした時に画面全体が動いてしまう
ググると以下のような記事が出てきました。
この記事に書かれている通りの作業で、画面全体がスクロールする現象が起こらなくなりました。
⑥ プレビュー画面で横に長いソースコードを貼り付けると画面に収まらず、はみ出してしまう
これもcss編集で。
自分で作ったcssだけでは対応出来なかったので、highlight.jsが利用しているgithub.cssを以下のように修正しました。
Javascript Fix bug: output source code from high ...
修正は簡単で、収まりきらない分を単語単位で改行するように指定しただけです。
⑦ 全体の色のデザインが青であり、Qiitaのテーマ色である緑色になっていない
Onsen UIの色を変更できるサイトがあるので、ポチポチやりながら期待している色にしました。
⑧ エディタの記事本文を編集中、タップした時にカーソルが消える(文章の最後にカーソルが移動する)ことがある
今回洗い出した問題点の中で、最も難易度が高いものでした。
何と言っても、Onsen UIのバグのようなものでしたので。
まず切り分けとして、カーソルがどういった時に消えるのか調べてみると、長押しタップでは問題が発生しないことがわかりました。
またカーソルが消えるという現象は、文章の最後にカーソルが移動して画面外にカーソルが移動してしまったためであることもわかりました。
この情報でググってみると、こんなものを発見しました。
どうやらOnsen UIが利用している、FastClickに問題があるようです。
とりあえずここに書いてある修正を行うことで、textareaについてはタップした場所にカーソルが移動することを確認できました。
しかし、タイトルに利用しているinputのtypeがtextであるものについてはまだ同じ問題が残っています。
そこで、基本的なロジックはtextareaと同じはずなので、onsenui.jsを以下のように編集しました。
Onsen UI Fix bug: Focus on input (filled with te ...
今のところこの修正で、inputのtextタイプについても問題は無さそうです。
色々と課題がありましたが、やや強引な手段を使いつつもなんとか修正が終わりました。
nendの広告も貼れたし、アイコンの作成も終わったので、次はいよいよ公開に向けた手続きですね！
