せでぃのブログ

ブログ初心者おいどんのどうでもいい愚痴やどうでもいい愚痴やどうでもいいマメ知識などを披露するチラシの裏です。

FESSとJSONその2〜前編〜

csny/fess-json · GitHub
 アプリのアウトラインができたので、とりあえず上げた。githubに置いたtest50というプロジェクトがそれ。手数が多いので、手順は後ほど。

完成画像

メイン画面

f:id:Sediment:20150305233111p:plain

設定画面

f:id:Sediment:20150305233123p:plain

出力結果

f:id:Sediment:20150305235411p:plain

概要

 画面はこの2つで、Editボタンを押すと設定画面へ推移し、テキストフィールドにサーバのアドレスかホスト名とポート番号を入れ、メイン画面に戻って下に引っ張ると検索語も含めて、リクエストするJSON取得アドレスを内部で生成して、NSLogでリクエストアドレス全体を出力する。

 作業の肝としては、インスタンス変数servernameをいかにして別画面の間で共有するかといったところ。今回はAppDelegate.hを頂点に共有する。
f:id:Sediment:20150307040744p:plain

作成手順

1.xcodeの初期設定
 SingleViewで始める。名前や保存場所は適当に。
f:id:Sediment:20150305011427p:plain

2.ストーリーボードにある既存のviewcontrollerとクラスファイルViewController.mと.hを削除
f:id:Sediment:20150306154039p:plain
f:id:Sediment:20150306173605p:plain

3.ストーリーボードのオブジェクト及びクラスファイルを新規作成
 ストーリーボードの何もない空間にNavigationControllerを追加。
f:id:Sediment:20150306153647p:plain
 クラスファイルを新規作成し、CocoaTouchClass→UITableViewControllerサブクラスのTableViewControllerというクラス名のファイルを生成。
f:id:Sediment:20150306153850p:plain
f:id:Sediment:20150306153728p:plain
f:id:Sediment:20150306153742p:plain

4.もう1つストーリーボードのオブジェクト及びクラスファイルを新規作成
 RootViewControllerの隣に、ViewControllerを追加。
f:id:Sediment:20150306174858p:plain
 クラスファイルを新規作成し、CocoaTouchClass→UIViewControllerサブクラスのViewControllerというクラス名のファイルを生成。
f:id:Sediment:20150306211211p:plain

5.「NavigationController」を最初に起動するオブジェクトとして設定
 ストーリーボードの「NavigationController」のAttributes inspectorの「is Inityal View Controller」にチェックを入れる。
f:id:Sediment:20150306164613p:plain

6.ストーリーボードのオブジェクトとクラスファイルの紐付け
 オブジェクトのClass欄にクラスファイルと同じ名前を入れることで、ひもづけ。
Classの項目は、Identity inspectorにある。

オブジェクト クラス名
RootViewController TableViewController
ViewController ViewController

f:id:Sediment:20150306154818p:plain
ViewControllerにはViewController。
f:id:Sediment:20150306211613p:plain

7.RootViewControllerのTable Viewの設定確認と、コードとの紐付け
 まずはTable Viewの確認。ストーリーボードのTable ViewのAttributes inspectorを開き、以下の状態になっていること。
f:id:Sediment:20150306161848p:plain

Content: Dynamic Prototypes
Prototype Cells: 1
Selection: Single Selection

 Assistant editorを選択し、右側の画面を「TableViewController.h」に変更する。
f:id:Sediment:20150306162625p:plain
 ストーリーボードのTable Viewのオブジェクト上でControlを押しながら、「TableViewController.h」の@interfaceの下の行あたりにドロップ。
f:id:Sediment:20150306163449p:plain
StorageがStrongタイプであることを確認し、「tableView」という名前にする。
f:id:Sediment:20150306163534p:plain

8.RootViewControllerのTable View Cellの設定
 StyleをSubtitleに変更。identifierに「Cell」と入力。
f:id:Sediment:20150306164817p:plain

9.RootViewControllerへボタン類配置、コードへ紐付け
 9.1.Editボタン
 ボタンをRootViewControllerのナビゲーションバーの右側へ貼り付け、StyleをBorderedへ、IdentifierをEditへ変更。
f:id:Sediment:20150306215337p:plain
 EditボタンからViewControllerへひもづけし、show Segueを設定。
f:id:Sediment:20150306220010p:plain

 9.2.検索フィールド
 テキストフィールドをRootViewControllerのナビゲーションバーの左側へ貼り付け、StyleをBorderedへ変更。
f:id:Sediment:20150306214527p:plain
 同フィールドのPlaceholderへ「Search」と入力。
f:id:Sediment:20150306214608p:plain
 Assistant editorにして、画面の右側を「TableViewController.h」に。
f:id:Sediment:20150306221145p:plain
 テキストフィールドからControlを押しながら、「TableViewController.h」のtableViewの1行下あたりにドロップ。
f:id:Sediment:20150306221424p:plain
 名前を「searchField」に。
f:id:Sediment:20150306221602p:plain

10.ViewControllerへボタン類配置、コードへ紐付け
 10.1.LabelやText View
 ラベルやテキストビューをViewControllerへ適当に配置。ひもづけしないのでノープランで。
f:id:Sediment:20150306230304p:plain
 10.2.アドレスフィールドとsaveボタン
 TextFieldとButtonをViewControllerへ配置。心持ち左寄りで。Assistant editorを選択し、右側の画面を「ViewController.h」に変更。
f:id:Sediment:20150306231240p:plain
 TextFieldとButtonを@interfaceの1行下へドロップ。
f:id:Sediment:20150306231927p:plain
 TextFieldは「addressField」の名前に。
f:id:Sediment:20150306232736p:plain
 ButtonはActionに変更して名前を「saveBtn」に。
f:id:Sediment:20150306232911p:plain


 これでストーリーボード周りの操作は完了。長いので、後編へつづく。次はコードを入れていく。
FESSとJSONその2〜後編〜 - せでぃのブログ