【CocoaPods】挫折しながら学ぶ！素人のiOSアプリ開発 part7【swift】
ノートアプリをつくるぞー！うおおおおーーーーーー！！！！！！！
プロジェクトの作成
早速、新しいプロジェクトを作成します。
↓今回はTableViewが簡単に実装できる（らしい）「Master-Detail App」を使ってみましょう！
それと、今回はデータ保存にCoreDataを使いたいので「Use Core Data」にチェックを入れておきます。Core Dataというのは、iOSで使用するデータベースの名称ですね。大昔に1度だけ使ったことがあります。
とりあえず動作確認
プロジェクトを作成したら、まずは何もいじっていない状態で動作確認をしてみます。
すでにほとんど出来上がっていてビックリしました・・・。
・Editボタン
・+ボタン（セルが増える）
・セルクリックからの画面遷移（遷移先の画面は特になにもなし）
上記3つがすでに実装されています。データ削除は未実装のようで、+ボタンで増えたセルは今のままでは消せません。データ削除は後ほど実装しましょう。
「RichEditorView」をインストール
セルの遷移先は「リッチテキストエディタ」にしたいと考えています。あと画像を挿入できる機能もほしいですね。
ということで、良さそうなライブラリを発見しました。
ライブラリ名：RichEditorView
その名の通り、リッチエディターが使えるようになるライブラリです。早速CocoaPodを使ってインストールしてみましょう。手順はいつも通りです。
とりあえず実装
とりあえず動くものが見たい！ってことでサンプルコードを参考に、実装してみましょう。
おおおおおおお！！！！素晴らしい！！！！！！
ちゃんと「"
My Awesome Editor
Now I am editing in style."」がhtmlとして反映されていますね！画面をタップすればそのままテキストエディタとして使用できます。
（ソースコードは記事最後に載せてます。）
ツールバーを出現させてみる
引き続きサンプルコードを参考に、ツールバーを出現させてみました。太字・斜字・打ち消し線など、いろいろできます。
画面下部にご覧ください。
なんて素晴らしいライブラリなんだ！！！！
ちなみにソースコードはこんな感じ。
import UIKit
import RichEditorView
class DetailViewController: UIViewController {
@IBOutlet var editorView: RichEditorView!
lazy var toolbar: RichEditorToolbar = {
let toolbar = RichEditorToolbar(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 44))
toolbar.options = RichEditorDefaultOption.all
return toolbar
}()
func configureView() {
// Update the user interface for the detail item.
editorView = RichEditorView(frame: self.view.bounds)
editorView.html = "<h1>My Awesome Editor</h1>Now I am editing in <em>style.</em>"
editorView.inputAccessoryView = toolbar
toolbar.delegate = self
toolbar.editor = editorView
self.view.addSubview(editorView)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
configureView()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
var detailItem: Event? {
didSet {
// Update the view.
configureView()
}
}
}
extension DetailViewController: RichEditorToolbarDelegate {
fileprivate func randomColor() -> UIColor {
let colors: [UIColor] = [
.red,
.orange,
.yellow,
.green,
.blue,
.purple
]
let color = colors[Int(arc4random_uniform(UInt32(colors.count)))]
return color
}
func richEditorToolbarChangeTextColor(_ toolbar: RichEditorToolbar) {
let color = randomColor()
toolbar.editor?.setTextColor(color)
}
func richEditorToolbarChangeBackgroundColor(_ toolbar: RichEditorToolbar) {
let color = randomColor()
toolbar.editor?.setTextBackgroundColor(color)
}
func richEditorToolbarInsertImage(_ toolbar: RichEditorToolbar) {
toolbar.editor?.insertImage("https://gravatar.com/avatar/696cf5da599733261059de06c4d1fe22", alt: "Gravatar")
}
func richEditorToolbarInsertLink(_ toolbar: RichEditorToolbar) {
// Can only add links to selected text, so make sure there is a range selection first
if toolbar.editor?.hasRangeSelection == true {
toolbar.editor?.insertLink("http://github.com/cjwirth/RichEditorView", title: "Github Link")
}
}
}
ちょっと長いですけど、すべてサンプルコードのコピペです。コピペしかしていないので素人の僕にもできました。
ちなみにツールバーは、オリジナルの機能を増やすこともできるみたいです。至れり尽くせりですね。
ちなみに「@IBOutlet var editorView: RichEditorView!」の部分は特になにとも繋がってないです。
ただ、唯一意味がわからないのは「画像追加機能」ですね。
ツールバーにある「画像追加ボタン」を押すと、普通ならカメラロールが出てきそうなものですが
なぜか謎のお兄さんがポン！っと表示されておわりです。作者の方かな？
カメラロールの呼び出しについては、なにかしらの対策を練る必要がありそうですね。
挫折の予感がプンプンするぜ・・・！
