Qiita投稿アプリ開発(14) スクリーンショット（iOSシミュレータ）
前回の記事でOnsen UIを使うことを決めました。
しかし、Onsen UIがjQueryに対応しているとは言っても、Anguler JSをベースとしたライブラリです。
Flat UIからOnsen UIへの移行に苦戦し、結局週末のほとんどが移行作業となってしまいました・・・。
とは言っても、週末に集中して取り組んだことで移行作業の大部分が終わり、残すは細々した機能や面倒なデバッグ作業、使いやすさの確認だけとなりました。
これでデザインもほとんど終わったことになるので、ようやく終わりが見えてきた感じです。
週末の苦労話をここでしても良いのですが、技術系のネタが主になるのでQiitaへ投稿するネタのために残しておくことにします。
そこで今回は、iOSシミュレータ上での動作画面を紹介したいと思います！
エディタ
投稿の一覧表示
プレビュー画面
とりあえずこんな感じですね。
まだまだブラッシュアップできていない所もありますが、基本形はこれでほぼ決まりです。
今後はデバッグ作業が中心になると思います。
デバッグ作業と使いやすさの確認は、アプリを実機で動作させて記事を投稿しつつ、確かめることにしました。
Qiitaに投稿するネタも溜まってきているので、ちょうど良い機会ですね。
さて次回は、実機動作の画面でも紹介しましょうかね。
Qiita投稿アプリ開発(13) Onsen UI
前回の記事でMobile Anguler UIが良さそうだということを書きました。
その後の調査でわかったのが、Mobile Anguler UIはAnguler JSをベースとしていて、修正が大量に発生しそうだということです。
まさに危惧していたことがそのまま現実となった感じです。
これはまずいということで、他に修正量が少なそうなものを探していると、Onsen UIというものを発見。
しかしサンプルを見てみると、やはりOnsen UIもAnguler JSがベース・・・。
つまり、Onsen UIを使った場合でもソースの修正はそれなりに多く発生する可能性があるということです。
こうなったら、Anguler JSに対応するようにソース修正するか、デザインに見切りをつけてFlat UIでいくかを決めなくてはなりません。
動作確認をまた行う必要があることを考えると、既存の動作しているソースの修正は避けたいところです。
しかし良く考えてみると、Mobile Anguler UIもOnsen UIもAnguler JSを採用しているんですよね・・・。
そもそもAnguler JSを避けていること自体にも問題がありそうな気がしてきました。
そこでこんな時のためのGoogle先生の回答は、Anguler JSはここ最近で急激に勢いを増しているので使いこなせた方が良い、ということでした。
せっかく作り上げたものが使えなくなってしまうのが非常に辛いですが、腹を括ってどこでもQiitaの開発中にAnguler JSの勉強もすることにしました。
まずは使い方ということで、Onsen UIのスライドメニュー版をダウンロードしてシミュレータで動かして見ました。
で、第一印象はというと、タップした時などのアニメーションがあり、Webっぽさが全く感じません。
デザインもフラットで見やすく、特に追加で何かしなくても充分なくらいです。
これはすばらしい！
と、サンプルの表示を確認するまでは良かったのですが、使い方を理解するまでが大変でした。
ドキュメントを見つつ、サンプルを編集してはシミュレータで確認しても、中々思うようにいかない。
特にアプリの動作を司るコントローラの部分が？でした。
結局理解できたのは、MVCパターンであることを知った後のことです。
この辺もう少しドキュメントが欲しいなと思いましたが、私の経験が足りていなかったのが原因ですね。
なにはともあれOnsen UIが良さそうな感じなので、このまま使い続けたいと思います。
「今度こそ」デザインのライブラリ選びは最後にしたいですね。
ちなみに・・・、あまりに分からなすぎてTwitterで愚痴をこぼしてると、Onsen UIのコミッタの人がリプを飛ばしてきて相談に乗ってくれたのは少しビビりました。
非常に親切な方であったので、フォローさせていただき、そっとOnsen UI素晴らしい的なことをつぶやいておきました。
嘘ではなく本当に良いライブラリですよ。
Qiita投稿アプリ開発(12) Mobile Angular UI
前回の記事に引き続き、どこでもQiitaのデザインについてです。
どこでもQiitaのデザインをFlat UIすると宣言してしまいましたが、使ってみるとデザインがイマイチでした。
確かにフラットなデザインではあるのですが、こうなんと言うかWebページっぽさがあります。
デザインを気にせずこのまま続けても良かったのですが、気になりだすと止まらないので、Flat UIをやめることにしました。
結局自分で書くしか無いのかと諦めていた時に、Angular UIが良いという噂が！
早速Angular UIで調べてみると、まさにiOSに適したデザインでした。
ちなみに以下のサイトはMobile Angular UIという、Angular UIのモバイル向けに最適化されたものです。
さらにMobileと言っているので、スマホに特化されたデザインとなっているところも良い点です。
デザイン的には満足ですが、果たしてPhoneGapで使えるのか、その辺りの情報が不足しています。
一番怖いのは、Angular UIを導入することによって、既存のコードをたくさん修正しなければならない場合です。
利用していくとまた不満な点が出てくるかもしれませんが、できればAngular UIでデザイン選びも終わりにしたいですね。
Qiita投稿アプリ開発(11) アプリのデザイン
Qiita投稿アプリの正式名称ですが、GitHubに公開した段階で「どこでもQiita」とすることに決めました。
某ソニー製のゲームソフトが由来ですが、今回開発しているアプリを使うことで会社、通勤中の電車、自宅など、どこでもQiitaに投稿できるようになるという意味を込めて名付けました。
さて、本題のどこでもQiitaのデザインですが、こんな感じで進めていきたいと思っています。
- 近年主流のフラットデザインを採用する
- Qiitaのアプリであることを強調するため、緑色を基調の色使いにする
- PhoneGapを利用することによる、Webページのような見た目は避ける
CSSをゴリゴリ書くという選択肢もありましたが、既存のものを使うことでもデザインの勉強になると思うので、使えるものは使う方針としました。
Flat UIはBootstrapと同じような使い方で、フラットなデザインに仕上げることができるライブラリです。
情報もそれなりにあるので、導入までが大変ということも無さそうです。
デザインについてもライブラリと同じく、調べれば色々と出てきます。
使えるものは積極的に使い、なるべく楽して目的のものを作りたいところです。
Qiita投稿アプリ開発(10) 機能実装完了
いつの間にかQiita投稿アプリ開発日記も10回目となりました。早いものですね。
細かい機能に関する実装が全て完了したため、アプリ開発で残すところはデザインとデバッグだけとなりました。
最初の時から仕様の変更を何回かしていたと思うので、今回実装した機能を一度まとめておきたいと思います。
- OAuth認証によるログイン
- 記事の新規投稿
- 記事の下書き保存
- 投稿した記事の修正・削除
- 下書きの修正・削除・Qiitaへの新規投稿
- 記事・下書きのプレビュー(Qiitaとの互換性はなし)
ちなみに当初予定していた機能は以下の通りです。
- Qiitaへ投稿
- Qiitaへ下書きを保存
- Qiitaに保存された下書きの編集
- 下書きのプレビュー
Qiitaへ下書きを保存する機能は、APIが無いため諦めてしまいましたが、当初開発する機能として挙げたものはほとんど実装できたと思います。
作っているうちに他にも追加したい機能が出てきましたが、あまり上を目指すと完成しないパターンに陥るので、今回はこれまでに実装できた機能に絞ることにしました。
とりあえず公開してみて、フィードバックをもらいながら機能を追加していこうかなと思います。
どうしましょうかね・・・
あ、あと余談ですがUnreal Engine 4が本日無償化しましたね。
今までゲーム開発する時はUnity一択でしたが、この機会に触ってみたいと思います。
Unity 5も出てきていますし、ここしばらくはゲームエンジンにも注目ですね。
はてなダイアリーからはてなブログに移行して感じた、良い点・悪い点をまとめてみる
はてなダイアリーからはてなブログへ移行して一ヶ月近く経ちます。
そこで、それぞれのサービスを使ってみて感じた良い点、悪い点をまとめてみたいと思います。
最初に断っておきますと、私はどちらのサービスでも有料プランを利用したことが無いので、あくまで無料プランからの意見となります。
はてなダイアリー
良い点
- 自動トラックバック機能が便利
はてなブログへの移行をためらった機能で、記事の中にURLを含めると自動的にトラックバックしてくれる機能です。
非常に素晴らしい機能で、ダイアリーを使っていた時はトラックバック先からのアクセスも多数ありました。 - デザイン変更の自由度が高い
私はあまり活用出来ていませんでしたが、ダイアリーのカスタマイズは自由度が高く、魅力の1つとなっています。
カスタマイズの仕方によっては、はてなブログでは出来ない一風変わったデザインに仕上げることが出来ます
悪い点
- デフォルトのデザインがやや古い
デザインを自由に変更できる反面、デフォルトのデザインがやや古臭いです。
デザインに力を入れずとも、デフォルトの見た目を良くしたい人にとって、これは欠点になり得ます。 - はてな記法を習得する必要がある
はてな記法を利用しないと、ダイアリーでは何の飾りもない文章となってしまいます。
特別な記法を覚えずに直感的に使いたい人にとって、このことは非常にマイナス点です。
ですが、この使いづらさがダイアリーの良さを出しているという意見もあり、一概に悪い点とは言えないのかもしれません。 - ダイアリーに対応した専用のiPhoneアプリが無い
昔はダイアリーに対応するアプリが複数あったようですが、現在私が知る限りでは1つも無いです。
通勤時間や空いている時間を使って記事を書く人にとって非常にマイナス点です。 - 将来性がない
ダイアリーを利用していると、はてなブログへの移行を促すような宣伝をよく目にします。
運営会社のはてなもはてなブログに力を入れていきたいと言ってますし、ダイアリーにはあまり将来性が無さそうです。
ダイアリーがすぐにサービス終了することはないと思いますが、はてなブログよりも先に終了することはおそらく無いでしょう。
はてなブログ
良い点
- はてなブログ専用のアプリがある
公式アプリとしてはてなブログ専用のアプリがあるのは、通勤時間中に記事を書く私にとって非常に魅力的なことの1つです。 - 複数のカテゴリへ投稿できる
はてなブログでは、1つの記事に対して複数のカテゴリと紐付けることができます。
たとえばC言語でソフトウェアを開発している記事であったら、C言語・プログラミング・ソフト開発の3つカテゴリを同時に指定することができます。
これまでどのカテゴリに紐付けしようか迷っていたこともありましたが、はてなブログではこの問題に悩むことはなくなりました。 - カテゴリ別にグループを割り当てられる
はてなブログにはグループ機能があり、カテゴリとグループを1対1で割り当てることが可能です。
グループに割り当てたカテゴリに対して記事を投稿すると、グループ内で投稿されるため、より多くの人に見てもらえるチャンスが増えます。
ただ少し残念なのは、グループに対して1つのカテゴリしか割り当てられない点です。
良い機能なので、複数のカテゴリを割り当てられるような改善をして欲しいなと思います。 - 複数の編集モードで記事を書くことができる
はてなブログでは、ダイアリーで利用されていたはてな記法に加えて、Markdown記法や直感的に記事を編集できる見たままモードに対応しています。
自分が慣れ親しんだ編集モードを選べるので、ブログを書くための学習コストが少ないです。
悪い点
- トラックバック機能がない
他のブログサービスでは基本的に備わっている、トラックバック機能がありません。
ダイアリーには非常に強力で便利なトラックバック機能が備わっていただけに、この機能が無いのは非常に残念でした。 - 一般向けのブログになってしまったこと
良くも悪くもはてなブログは使いやすさを念頭においたブログサービスです。
はてなと言えば、その特殊な使い勝手からエンジニアが利用しているイメージがありましたが、はてなブログではそのような印象がやや薄くなってしまったかなと感じています。
まあ、あくまでも個人的な印象ですが。
ダイアリーからはてなブログへの以降について
ダイアリーからはてなブログへの移行は、手順に従ってポチポチしていけば良いだけの簡単なものになっています。
記事に加えてブックマーク、スター、コメントも引き継ぐことができるので、過去の資産を捨てる必要がありません。
さらにダイアリーの記事のURLにアクセスされた場合は、はてなブログへ移行した記事へ自動的にリダイレクトしてくれるので、他のサイトで記事を紹介された場合でも、リンクが変更されたことを伝える必要がありません。
はてなブログを使ってみてダイアリーに戻したいという人のために、記事をダイアリーへ戻すこともできます。
ただし、はてなブログで投稿した記事はダイアリーへ戻すことが出来ないので、そこのところは注意する必要がありそうです。
最後に
はてなブログとダイアリーについて良い点と悪い点を比較してみましたが、総合的に見ると、はてなブログのほうが良いと感じました。
特に、はてなブログに専用のアプリがあるところが、電車通勤の私にとって非常に魅力的でした。
最後にこの記事が、今後ダイアリーからはてなブログへ移行することを考えている人にとって参考になれば幸いです。
【耳コピ】 ハナヤマタ ED - 花雪（Hanayuki）
耳コピ動画の投稿です。
最近はメロディとコードだけをコピーして終わりにしてしまうことが多いのですが、一ヶ月ぶりに久しぶりに全パートのコピーをしてみました。
今までBGMを中心に耳コピしてきましたが、今回アニソン（J-POP）のコピーに初挑戦です。
コピーした曲は、ハナヤマタのエンディングから「花雪」です。
このアニメ、オープニングとエンディングの曲がお気に入りでオープニングも耳コピを行っていたのですが、あまりうまくいかなかったので公開には踏み切りませんでした。
今回エンディングの耳コピに挑戦して現時点で持てる力は出せたので、公開してみました。
作成に30～40時間くらいかかっています。
もう少し短い時間で作りたいですが、それには更なる修行が必要ですね。
さて、この曲についての説明を簡単に。
この曲はサビの部分でロ長調からニ長調へ転調していますね。
清潔感のあるイントロ・Aメロ・Bメロ（ロ長調）から、活発な感じを与えるサビ（ニ長調）へ自然に転調しています。
サビの直前のコード進行にはいわゆるツンデレ進行（VI-V-III-VI）が使われていて、この部分で曲を聴く人をぐっと引き寄せた後にサビにつなげるという手法がとられています。参考になりますね。
ちなみにこのコード進行はごちうさのOP「DayDream Cafe」の"簡単には教えない～♪"に使われていて、こちらも非常にぐっと引き寄せられますよね。
あとはI-VI-V-Iとかも使われていますが、こちらもコード進行としては良く出てくるものです。
使われている楽器について特別変わったものは無かったと思いますが、ところどころで風の音を入っていて、花や雪が風で舞っている印象を聞き手に与えたかった様子を聴き取れます。
曲としてはいかにもアニソンで、使われている音楽要素も王道的なものばかりです。
しかしこういう王道的なものを耳コピすることも、作曲に向けての知識を増やす意味で大切なのかなと思いました。
【耳コピ】 ハナヤマタ ED - 花雪（Hanayuki） - YouTube
【MIDI再生ソフト】 MIDITrail
【DAW】 FL Studio 11
【利用音源】 Komplete 9 Ultimate, BarChimes(QuikQuak), Spicy Guitar
【プラグイン】 WAVES Sound Design Suite
