iPhoneアプリで棒グラフを描く方法として考えられるのは次の3通り。 ライブラリを使う - Chartsというライブラリがある。おそらくこれが一般的な選択肢。 Viewを棒グラフに見立てる - UIStackViewをうまく使った例にこんなのがある。 CoreGraphicsを使って手で描画する - 厳密にはUIKit側でこれを扱いやすくしたものがあるみたいで、Drawingとしてまとめられている。 ここではCoreGraphicsの練習を兼ねて、3つ目の方法で棒グラフを書いてみる。 目標 棒グラフを表示する 棒グラフの先端に値を表示する 今回用いるデータは(ラベル, 整数値)とする 整数値を棒グラフの高さとし、棒グラフの頂点にその数字を描く ラベルは棒グラフの下に描く 整数値が最も大きなものの色をオレンジ色にする 画面の大きさに関わらない図を作る 要するに以下のようなものを作る。 細かいレイアウト 画面の大きさに応じて棒グラフのサイズを変更する必要があるため、レイアウトについてそれなりに決めておく。テキストについては適当なサイズに設定する。 ビューの幅を$W$、barWidthを$w$、データの個数を$n$とする。するとpadXの個数は$n+1$である。このとから、$w$は次のように計算できる。 $$ \begin{aligned} & wn + \frac{w}{2}(n+1) = W \\ \Leftrightarrow&\ w = \frac{2W}{3n + 1} \end{aligned} $$ この計算結果をbarWidthとして利用する。 準備 Main.storyboardを次のようにしておく。 GraphViewのClassをGraphViewにする。新たにGraphView.swiftを作っておく。 GraphView.swiftを作る 以下が雛形。 1 2 3 4 5 6 7 8 9 10 class GraphView: UIView { override func awakeFromNib() { } let data: [(String, CGFloat)] = [(7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎")] override func draw(_ rect: CGRect) { } } Viewの枠線 layer.borderWidthとlayer.borderColorで枠線を設定できる。これはCoreGraphicsとは関係ない。 ...

UIPresentationControllerを利用すると、モーダル表示の方法をカスタマイズできる。これについて備忘録を残す。 そもそもモーダル表示とは そもそもモーダル表示って何？と思ったので調べる。モーダルと検索すると「モーダルウインドウ」の話がよく出てくる。これは「ある操作を終えるまで親ウインドウの操作ができない子ウインドウ」という意味で使われているようだ。これはモーダル表示と似たような意味なのだろうか。判然としないので一次資料を漁る。 AppleのHuman Interface GuidelineにModalityの意味が書いてあって、これを引用すると、 Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. [意訳] Modalityとは、ユーザの以前の文脈から離れた一時的なモードでコンテンツを表示するデザインの手法。そのモードを終了するためには何か明示的なアクションを必要とする。 ほとんど同じ意味っぽい。 例えば次のようなモーダル表示(Page Sheet)の場合，呼び出し元が下にあってその上に青いビューが載っている。ここでは、「上から下に引っ張る」というアクションを起こすことで、このビューを閉じることができる。 用意するもの 表示元のViewController 表示先のViewController UIPresentationControllerのサブクラス - これが表示先のViewControllerの表示方法を規定する。 ここでは、表示先のViewControllerのStoryboard IDをdestとする． 準備 まずはボタンをクリックすると表示されるものだけ作る。 Main.storyboard 表示元にはボタンを配置する。表示先はラベルを配置し、適切なConstraintを設定しておく。 ViewController.swift ボタンのAction接続を作る。ボタンがタップされたら遷移するようにする。 1 2 3 4 5 6 7 8 9 10 11 class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } @IBAction func buttonTapped(_ sender: Any) { let vc = (storyboard?.instantiateViewController(identifier: "dest"))! present(vc, animated: true, completion: nil) } } 遷移前の設定 buttonTappedに追記して次のようにする。 ...

今回たまたまクライアント側でElmを使ったけど、これはElmに限ったことではない。 結論 Client側での留意点 urlはlocalhost:[port]ではなくhttp://localhost:[port]と指定しなければならない。つまり、URLにはちゃんとスキーム名を指定する。 Server側での留意点 Access-Control-Allow-Originに関連するヘッダーをちゃんと設定する。 成功コード プログラムの内容 サーバーは{ "msg" : "Hello, World!" }という内容のJSONを送ってくるので、クライアントはその値を受け取って"Success: Hello, World!“を出力する。それだけ。 Client: Elm 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 module Main exposing (..) import Browser exposing (..) import Json.Decode exposing (..) import Http exposing (..) import Html exposing (..) import Html.Attributes exposing (..) main = Browser.element { init = init , update = update , view = view , subscriptions = subscriptions } type Model = Loading | Failed | Success String init : () -> (Model, Cmd Msg) init _ = ( Loading, getServer ) type Msg = GotData (Result Http.Error String) update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of GotData result -> case result of Ok str -> (Success str, Cmd.none) Err _ -> (Failed, Cmd.none) getServer : Cmd Msg getServer = Http.get { url = "http://localhost:3000" , expect = Http.expectJson GotData dataDecoder } dataDecoder : Decoder String dataDecoder = field "msg" string view : Model -> Html Msg view model = case model of Failed -> p [] [ text "Failed!" ] Loading -> p [] [ text "Loading..." ] Success str -> p [] [ text ("Success : " ++ str) ] subscriptions : Model -> Sub Msg subscriptions _ = Sub.none Server: JavaScript (Node.js) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const http = require('http'); const server = http.createServer(); server.on('request', (req, res) => { res.writeHead(200, { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' }); const body = { msg: 'Hello, World!' }; res.write(JSON.stringify(body)) res.end(); }); server.listen(3000); 失敗と解決までの流れ Http.getの引数 初めはサーバー側で次のようにしていた。 ...

信号に関する授業を聴いていたらふと思い立ったのでやってみた。 コード index.html 個人的テンプレを書く。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>0-1 Signal</title> </head> <body> <h1>0-1 Signale</h1> <svg> </svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="script.js"></script> </body> </html> script.js JavaScriptでflatMap使うのはこれが初めてかも。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 const format = (data, w) => { const pairs = d3.pairs(data); const deltas = pairs.flatMap(e => { let sig = e.toString() if (sig == '0,0') { return [[1,0]]; } else if (sig == '0,1') { return [[1,0],[0,-1]]; } else if (sig == '1,0') { return [[1,0],[0,1]]; } else if (sig == '1,1') { return [[1,0]]; } else { throw new Error('invalid element.'); } }); const points = deltas.reduce((acc, e) => { const back = acc[acc.length - 1].slice(); back[0] += w * e[0]; back[1] += w * e[1]; return acc.concat([back]) }, [[0,0]]); return points; }; const [svgWidth, svgHeight] = [800, 800]; const svg = d3.select('svg') .attr('width', svgWidth) .attr('height', svgHeight); const pad = 70; const render = (data) => { svg.selectAll('*').remove(); svg.append('path') .datum(data) .attr('transform', `translate(${pad}, ${pad})`) .attr('stroke', 'black') .attr('fill', 'none') .attr('d', d3.line() .x(d => d[0]) .y(d => d[1])); }; render(format([0,0,1,0,1,0,1,1,1,1,0,0], 50)); 実行結果 説明 format 01の情報を、path用の頂点データに変換する関数。 ...

目標 スワイプしたら削除されるテーブルを作る。 準備 TableViewに最低限の設定をしておく。 Main.storyboardを次のようにする。 ViewController.swiftの内容を以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 class ViewController: UIViewController { @IBOutlet weak var tableView: UITableView! var items = ["Item1", "Item2", "Item3", "Item4", "Item5"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. tableView.dataSource = self tableView.delegate = self } } extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "testCell")! cell.textLabel?.text = items[indexPath.row] return cell } } スワイプしたらボタンが出る処理 次のメソッドを実装する。 ...

目標 ウォークスルーっぽいものを作る。 メイン画面でボタンを押すとウォークスルー画面に飛ぶ。 ウォークスルー画面では、左右にスワイプすると画面が移動する。 画面下に、何ページかを教えてくれる白丸(Page Control)を配置する。 登場物 Main.storyboardとViewController.swift Walkthrough.storyboardとPageViewController.swift 準備 上に書いたものをとりあえず全て作る。ただし、PageViewControllerのサブクラスはUIPageViewControllerであることに注意。 Main.storyboard ボタンを一つ作っておく。 Walkthrough.storyboard 配置を次のようにする Page View Controllerのidentifierはwalkとする。また、classをPageViewControllerにする。 “Page1"と書かれたViewControllerのidentifierはpage1とする。 “Page2"と書かれたViewControllerのidentifierはpage2とする。 “Page3"と書かれたViewControllerのidentifierはpage3とする。 以下で、Transition Styleを"Scroll"とする。もし"Page Curl"とした場合は、ページをめくるようなアニメーションになる。その代わりにPage Controlが表示されない。 PageViewController.swift 次のように書く。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 class PageViewController: UIPageViewController { var controllers: [UIViewController] = [] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. view.backgroundColor = .black let stb = storyboard! let page1 = stb.instantiateViewController(withIdentifier: "page1") let page2 = stb.instantiateViewController(withIdentifier: "page2") let page3 = stb.instantiateViewController(withIdentifier: "page3") controllers = [page1, page2, page3] setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil) dataSource = self } /* // MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destination. // Pass the selected object to the new view controller. } */ } extension PageViewController: UIPageViewControllerDataSource { func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { if let index = controllers.firstIndex(of: viewController), index-1 >= 0 { return controllers[index-1] } else { return nil } } func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { if let index = controllers.firstIndex(of: viewController), index+1 < controllers.count { return controllers[index+1] } else { return nil } } func presentationCount(for pageViewController: UIPageViewController) -> Int { return controllers.count } func presentationIndex(for pageViewController: UIPageViewController) -> Int { return 0 } } 説明 UIPageViewControllerは次のように利用する。 ...

目標 降順、昇順の切り替えができるTableViewを作成する。 準備 Main.storyborad 部品を以下のように配置する。 Segmented Controlのラベルの設定は以下で行える。 TableViewCellのindentifierはtestCellとする。 ViewController.swift 後々の処理のため、TableViewに表示するデータをitems、その元データをitemsSourceと分けることにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 class ViewController: UIViewController { let itemsSource = ["items1", "items2", "items3", "items4", "items5", "items6", "items7", "items8"] var items: [String] = [] @IBOutlet weak var segmentedControl: UISegmentedControl! @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. tableView.dataSource = self items = itemsSource } } extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "testCell")! cell.textLabel?.text = items[indexPath.row] return cell } } Segmented Controlのイベント設定 ViewController.swiftに追記する。 ...

目標 セミモーダルビューを作成する セミモーダルビュー上のボタンを押すと、それを閉じた後に別ビューに遷移する。 登場物 Main.storyboardとViewController Menu.storyboardとMenuViewController Dest1.storyboard Dest2.storyboard 前提 今後Viewが増えていく状況を想定して、Storyboardを分割することを考える。Storyboard同士はStoryboard Referenceで結びつける。 セミモーダルビューの作成 検索して良く出てくるのはUIPresentationControllerを利用する方法。ただ今回はなるべくStoryboardで完結させたい。 そこで、以下のページを参考して作ることを考える。 ハンバーガーメニューを作成するには？ - Swift Life ファイル作成 Menu.storyboard、MenuViewController、 Menu.storyboard、Dest1.storyboard、 Dest2.storyboardの5つをあらかじめ作成しておく。 Menu.storyboard classにはMenuViewControllerを指定する。部品配置は以下のようにする。 全体を包むViewを親View、その中に作ったViewを子Viewと呼ぶことにすると、 Constraintは適当に設定する。子Viewが画面下に配置されるようにする。 StackViewにはFill Equallyの設定を行っておく。 親Viewの背景色を、黒の半透明に設定する。設定手順は以下の通り。 BackgroundをBlackに設定 BackgroundをCustomに設定し直すと、カラーピッカーが現れる。そこで透明度を50%に設定する。 また、“Initial View Controller"にチェックをつける。 親Viewのtagを1に設定しておく。これはタッチイベントを捕捉する際に必要になる。 Dest1.storyboard、Dest2.storyboard Dest1.storyboardの部品配置は以下のようにする。 “Is initial View Controller"にチェックをつける。 Dest2.storyboardの部品配置は以下のようにする。 “Is initial View Controller"にチェックをつける。 Main.storyboard 部品配置は以下のようにする。 OpenButtonからStoryboard ReferenceへのSegueのActionは"Present Modally"を選択。Segueの設定は以下のようにする。 Storyboard Referenceにて、“Storyboard"をMenuに、“Referenced ID"を未記入にする。 “Referenced ID"が未記入の場合、Storyboard上のInitial View Controllerへの参照にしてくれる。もしInitial View ControllerでないViewControllerに遷移したいなら、ここに記入する。ただし、遷移先のView ControllerにてIdentifierを設定しておくことを忘れずに。 MenuViewController.swift Menu.storyboardの小ViewのOutletを作成する。名前はmenuViewとする。 その上で以下の文を追記する。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 class MenuViewController: UIViewController { ... override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) let menuPosY = menuView.layer.position.y menuView.layer.position.y += menuView.layer.frame.height UIView.animate( withDuration: 0.5, delay: 0, options: .curveEaseOut, animations: { self.menuView.layer.position.y = menuPosY }, completion: nil) } override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { for touch in touches { if touch.view?.tag == 1 { UIView.animate( withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: { self.menuView.layer.position.y += self.menuView.layer.frame.height }) { bool in self.dismiss(animated: bool, completion: nil) } } } } } dismissメソッドを使うと自身のビューを閉じることができる。 ...

PythonでのSocket通信 やってることはCでやったときと同じである。サーバーとクライアントの通信手順は同じだし、関数名も同じである。しかしCで書いた場合に比べてシンプルに書ける。エラーは例外として投げられるため、自分で書く必要がない。またsockaddr_inなどの構造体が登場することはなく、Pythonでのbind関数とconnect関数の引数に直接アドレス・ポートを指定する。 server.py 前回と同じく、以下の手順で通信を行う。 listen(待ち受け)用のソケット作成 - socket 「どこからの接続を待つのか」「どのポートにて待ち受けするのか」を決める - bind関数の引数 ソケットにその情報を紐つける - bind 実際に待ち受けする - listen 接続要求が来たら受け入れる - accept 4によって通信用のソケットが得られるので、それを用いてデータのやりとりをする- send/recv 1 2 3 4 5 6 7 8 9 10 import socket s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.bind(("", 8000)) s.listen(5) (sock, addr) = s.accept() print("Connected by" + str(addr)) sock.send("Hello, World".encode('utf-8')) sock.close() s.close() 上のコードを見れば各関数がどんな形で引数をとって、どんな値を返すのかがわかると思う。いくつか補足しておく。 bind (受け入れアドレス, ポート)というタプルを引数にとる。受け入れアドレスを空文字列にしておけば、どんなアドレスからの接続も受け入れる。つまりCでやったINADDR_ANYと同じ。 1 s.bind(("", 8000)) encode Pythonのstring型をそのまま送ることはできないので、byte型に変換する。これはstring.encodeで行える。 1 sock.send("Hello, World".encode('utf-8')) client.py サーバーとの通信用のソケット作成 - socket サーバが待ち受けている宛先を設定 - connectの引数 2で設定した宛先に対して接続する - connect 1で作ったソケットを用いてデータのやりとりをする。 - send/recv 1 2 3 4 5 6 7 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.connect(("localhost", 8000)) data = sock.recv(64) print(data) sock.close() これも2点補足する。 ...

どんなアプリを作るか 電卓を作る。 市販の電卓とは違い、括弧が使えるようにする。なので、軽い構文解析を書くことになる。しかし今回の記事ではデータの扱い方やViewの組み方に焦点を当てているため、電卓の計算処理についてはかなり軽めに説明する。 プロジェクト作成 プロジェクト名は"Calculator"とする。 DataBindingは有効にする Fragmentに分ける 今回は1画面のアプリなのでわざわざFragmentに分ける必要もないのだが、「もしかしたら他にもFragmentを追加するかもしれない」というケースを想定して、一応分けてみる。 CalcFragmentを作成する。xmlファイルはfragment_calc.xmlとする。 activity_main.xmlの内容を以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fragment android:id="@+id/calcFragment" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.example.calculator.CalcFragment" /> </merge> merge Android Kotlin Fundamentals 06.2で存在を初めて知った。こうするとactivity_main.xmlでLayoutを作って、fragmentの中でもまたLayoutを作るといった冗長性を排除できる。 CalcFragmentの設定 string.xml fragment_calc.xmlに設定するための文字列定数を定義する。string.xmlを以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <resources> <string name="app_name">Calculator</string> <string name="calc_0">0</string> <string name="calc_1">1</string> <string name="calc_2">2</string> <string name="calc_3">3</string> <string name="calc_4">4</string> <string name="calc_5">5</string> <string name="calc_6">6</string> <string name="calc_7">7</string> <string name="calc_8">8</string> <string name="calc_9">9</string> <string name="calc_plus">+</string> <string name="calc_minus">-</string> <string name="calc_mul">*</string> <string name="calc_div">/</string> <string name="calc_ac">AC</string> <string name="calc_eq">=</string> <string name="calc_lp">(</string> <string name="calc_rp">)</string> </resources> fmagment_calc.xml fragment_calc.xmlを以下のようにする。初めて触れた要素・属性があるので、これらは後で補足する。 ...