Posts

iPhoneアプリ開発メモ - 棒グラフの作成(UIKit/CoreGraphics) (2)

目標前回の棒グラフを複数ページにする今回は、1ページに最大5本の棒が並ぶ、とする。ページは横スライドで切り替えるプロジェクトは前回のものを引き継がず、新しく作る。用いるデータ ViewController.swiftが次のようなデータを持っていることを想定する。 1 2 3 4 5 var dataSource = [ (7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎"), (9, "六郎"), (2, "七郎"), (3, "八郎"), (1, "九郎"), (5, "十郎"), (1, "十一郎"), (1, "十二郎"), (6, "十三郎") ] このデータは、後で整形してグラフ描画用のデータに変換する。 UScrollViewの配置 Main.storyboardにUIScrollViewを配置する。サイズ設定はコードで行うので、ここでは単に配置するだけ。その後、UIScrollViewのOutlet接続をViewController.swiftに対して行う。 UIScrollVieの設定「スクロールの対象となるコンテンツを中に入れる」だけで、スクロール可能なViewが作れる。ただし、思い通りの表示にするためには、UIScrollViewやコンテンツのサイズを設定しておく必要がある。複数ページを持つコンテンツを作りたいので、コンテンツ用Viewの中にページ用のViewが複数存在する状態になる。なのでページの位置やサイズもちゃんと設定する。 ScrollViewのレイアウトこんな感じにする。なのでコードはこんな感じにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 class ViewController: UIViewController { @IBOutlet weak var scrollView: UIScrollView!...

iPhoneアプリ開発メモ - 棒グラフの作成(UIKit/CoreGraphics) (1)

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....

iPhoneアプリ開発メモ - UIPresentationControllerの利用

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....

Elm/JavaScript ローカルサーバーで通信する際にハマったこと

今回たまたまクライアント側で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 (....

D3.js 01信号の可視化

信号に関する授業を聴いていたらふと思い立ったのでやってみた。コード 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....

iPhoneアプリ開発メモ - TableViewCellのスワイプ処理

目標スワイプしたら削除されるテーブルを作る。準備 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....

iPhoneアプリ開発メモ - UIPageViewControllerの利用

目標ウォークスルーっぽいものを作る。メイン画面でボタンを押すとウォークスルー画面に飛ぶ。ウォークスルー画面では、左右にスワイプすると画面が移動する。画面下に、何ページかを教えてくれる白丸(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....

iPhoneアプリ開発メモ - addTarget/SegmentedControl

目標降順、昇順の切り替えができる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....

iPhoneアプリ開発メモ - セミモーダルビューからの遷移

目標セミモーダルビューを作成するセミモーダルビュー上のボタンを押すと、それを閉じた後に別ビューに遷移する。登場物 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 { ....

Socket通信勉強(2) - Pythonでの書き方/HTTPサーバーもどき作成

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....