Posts

どんなアプリを作るか 電卓を作る。 市販の電卓とは違い、括弧が使えるようにする。なので、軽い構文解析を書くことになる。しかし今回の記事ではデータの扱い方や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....

備忘録に。 インストール Macの場合はbrewでインストールできる。 1 $ brew install gnuplot gnuplotコマンドで起動。 ファイルをプロットする 例えばdata.txtが以下のようになっているとする。 1 2 3 4 5 #x #y1 #y2 0 1 2 1 2 1 2 0 2 3 1 1 これを描画する。 using X:Yで、X番目の列を横軸、Y番目の列を縦軸にする。 w lpとは"with linespoints"の略。つまり線と点を描画する。w lだと"with line"、w lp lt 3 lw 2だと"with linepoints linetype 3 linewidth 2"という意味。いろいろある。 1 2 3 $ set xlabel "X axis" $ set ylabel "Y axis" $ plot "data.txt" using 1:2 w pl 軸の範囲指定 例えばx軸を[0,3000]の範囲に制限して描画したいなら、次のコマンドを打つ。...

Socket通信を勉強する。 前提 プログラムはMac(Mojave)で動かす。 ネットワークに関する知識はほんの少しある。 使うプログラミング言語はC++だが、ここではbetter Cの意味でしか用いない。 (寄り道) ファイル入出力 Socket通信を学んでいると、ファイルディスクリプタが出てきたので、まずはそこから勉強する。 関数定義についてはJM Projectから引用したものを用いる。これはLinuxマニュアルと同じらしいので、恐らくmanコマンドで出力されるものと同じである(ただし英語であるが)。 ファイルディスクリプタとは ファイルディスクリプタとは、ファイルと結びつけられた単なる整数値である。データの読み書きを行う場合は、この整数値を指定してアクセスする。例えばファイルtest.txtのファイルディスクリプタが4だった場合、読み書きをする関数read/writeには引数4を指定する。 個人的には、ファイルとプロセスのやりとりはあるケーブルを介して行なっているイメージがある。例えば番号4の端子にはすでにtest.txtが繋がっているとしよう。このとき、プロセスがtext.txtにアクセスしたいなら、番号4の端子にアクセスすれば良い。 ファイルの読み込み ファイルディスクリプタを用いてファイルを読み込む例を以下に示す。以下は、test.txtを読み込んで、そのファイルディスクリプタとファイルの内容を出力するプログラムである。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #include <stdio.h> #include <unistd.h> #include <fcntl.h> int main() { int fd = open("test.txt", O_RDONLY); char buf[64]; read(fd, buf, sizeof(buf)); printf("fd: %d\n", fd); printf("%s\n", buf); close(fd); return 0; } test.txtの内容は以下のようにする。 1 Hello, World 実行すると、以下のように出力される。fdの値は実行環境によって異なる。 1 2 fd: 3 Hello, World 以下説明するopen/read/closeは関数ではなく、全てシステムコールである。...

次の2つの事項について扱う。 DataBindingにおけるデータの受け渡し Navigationを用いた、異なるFragment間におけるデータの受け渡し さらに具体的に言うと、次の機能を持つアプリを作る MainFragmentにはEditTextが1つある。 EditTextが入力されると、TextViewが"String: [EditTextの文字列]“に変わる。 Buttonが押されると、ReverseFragmentに遷移する ReverseFragmentは、MainFragmentのテキストフィールドの文字列を受け取って、それを逆順にした文字列を表示する。 Android Kotlin Fundamentals Courseでの05辺りを勉強した記録なので、詳しいことはそちらに載っている。 プロジェクト初期設定 “Empty Project"として作成して、名前を"DataTest"とする。 build.gradle(module:App)について、dataBindingの設定をしておく。 次のようにMainFragmentとReverseFragmentを作成しておく。作成時、“Create layout XML?“にのみチェックをつけておく。 MainFragmentの設定 fragment_main.xmlを次のようにする。 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 <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".main.MainFragment"> <data> <variable name="myMsg" type="com....

Navigationを用いて画面遷移をやってみる。具体的には以下の処理を行う。 Fragment01とFragment02を用意する Fragment01でボタンが押されたらFragment02に遷移する Android Kotlin Fundamentals Courseでの03辺りを勉強した記録なので、詳しいことはそちらに載っている。 Navigationについて 異なるFragment間の遷移を制御する仕組み。遷移の設定を視覚的に行えるらしい。 これ以前はIntentという仕組みを用いていたらしい。これについては必要になりそうならいつか調べる。 プロジェクト作成 Empty Activityを選択し、名前をNavigation Testとする。 build.gradle(Module: app)でDataBindingを有効にしておく。 Fragmentの作成 layouts/にFragmentを作成する。“Create layout XML?“だけチェックをつけておく。Fragmentは2つ作成し、それぞれ"Fragment01"と"Fragment02"とする。xmlファイルはそれぞれfragment_fragment01.xml、fragment_fragment02.xmlとする。 まずTextViewのtext要素に設定するための定数をstrings.xmlに内容を追加しておく。 1 2 3 4 5 6 7 8 9 <resources> <string name="app_name">NavigationTest</string> <!-- TODO: Remove or change this placeholder text --> <string name="hello_blank_fragment">Hello blank fragment</string> <string name="fragment01">Fragment01</string> <string name="fragment02">Fragment02</string> <string name="click">Click</string> </resources> fragment_fragment01.xmlの内容は以下の通りにする。Buttonを追加し、textを@string/clickに設定する。TextViewのtextを@string/fragment01に設定する。また全体をConstraintLayoutで包み、DataBindingのためにlayoutでさらに包む。 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 <?...

Android + Kotlinを用いてアプリ開発をするときの勉強メモ。勉強メモなので備忘録程度にしか書いてない。 次のことをやった。 ボタンを押すとToastを表示 DataBindingを用いる Fragmentを用いる Fragment + DataBinding Android Kotlin Fundamentals Courseでの01-03辺りを勉強した記録なので、詳しいことはそちらに載っている。 前提 Kotlinは未学習だが雰囲気で読める Android開発は完全未経験 iPhoneアプリ開発は少しだけ経験 Android Studioの環境構築は済んでいる エミュレータのインストールも完了している Build & Runの方法も知っている プロジェクト作成 とりあえずプロジェクト名はTestProjectとする。 左側のペインに色々ディレクトリ・ファイルがある。色々漁ってみると、次のようなものがある。 java/com.example.testapplication/: 基本的にはこの中にKotlinのソースコードを入れるっぽい。ディレクトリ名がjavaなのは歴史的な理由らしい。 res/: resourceの略で、画面や定数の定義がこの中に色々入っている。 res/layout: 画面の定義ファイルが入っている res/values: 定数の定義が入っている res/values/colors.xml: 色定義 res/values/strings.xml: 文字列定数の定義 res/values/styles.xml: styleの定義。画面の部品のstyleをCSSみたいに設定するためのもの。 build.gradle: Buildの際の様々な設定を記したファイル。 ボタンの配置 res/layouts/activity_main.xmlにメイン画面の定義が書かれている。中央ペイン左下にDesign/Textを切り替えるタブがある。 Designタブ GUIで画面の構造をいじるための画面。直感的に操作できる。色々なペインで分かれている。 Palette: ドラックアンドドロップできる。 Component Tree: 部品同士の階層構造を表示している。内部構造はXMLなので部品は階層構造になっている。 Attributes: 部品の様々な属性を設定。たくさんあるが、虫眼鏡マークで検索可能。便利。中でもid属性は重要。 id: 部品の識別子。プログラムからアクセスするためにここの設定が必要。 Component Treeにおいて、rootがConstraint Layoutであることに注目。これはConstraint(制約)を用いて部品の配置を設定するためのLayoutである。Constraintについてはやってみた方が早い。 PaletteからButtonをドラッグ&ドロップする。 Buttonをクリックすると4辺が白丸になる。以下のようにしてConstraintを設定する。ボタンの配置は一意に決まる。 上/右/左側の丸を画面上/右/左端にくっつける 下側の丸をTextViewの上端にくっつける こんな感じでカーソルで引っ張って部品の位置を決定していく。Padding/Margin、Biasなどの設定はAttributeの方で行える。 次にButtonのテキストを設定する。 Attributeタブのtext属性を見つける。入力欄の右に細い長方形があるのでクリックすると"Pick a Resource"というウインドウが現れる。右上の"Add new resource" → “New string value"を選ぶ。設定を以下のようにする。 Resource name: click Resource value: Click すると、新たに文字列定数clickが追加され、その定数が使われる。res/values/strings....

更新(2021/06/13): いくつか間違っていたところがあったので修正。 どんなTodoリストを作るか Todoの登録 情報は短いテキストだけ Todoをリスト表示 Todoをクリックすると削除 サイトの作成 適当なディレクトリで次のコマンドを実行すると、mysiteというディレクトリが作られる。 1 $ django-admin startproject mysite 以降はmysiteディレクトリで作業する。 アプリの作成 mysiteディレクトリにて以下のコマンドを実行すると、todo_listというディレクトリが作られる。ここに実際のアプリの処理を記述していく。 1 $ python3 manage.py startapp todo_list 続いてmysite/mysite/settings.pyを開いて、INSTALL_APPSを以下の記述にする。'todo_list.apps.TodoListConfig'を追加しただけ。これはデータベース作成やテンプレート作成のために、djangoがtodo_listのディレクトリを教えているっぽい。Todo_listConfigかと思ったが違うらしい(エラーで「TodoListConfigだよ」と教えてくれた。優しい)。 1 2 3 4 5 6 7 8 9 INSTALLED_APPS = [ 'todo_list.apps.TodoListConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] viewの作成 mysite/todo_list/views.pyを編集する。とりあえずviewが動くかどうかだけ確認したいので、レスポンスは適当な文字列にする。 1 2 3 4 5 6 from django.http import HttpResponse # Create your views here. def index(request): return HttpResponse('Hello') urlの設定 まずmysite/mysite/urls.pyの設定をする。urls.pyとは「どんなurlにアクセスされたらどんなviewに処理を任せるか」を記述したものっぽい。ここでは、todo_list/で始まるurlだったらtodo_list/urls.pyに処理を任せるように書いている。 1 2 3 4 5 6 7 from django....

置換について、線形代数の教科書に出てきたけど、授業ではあまり触れられなかったので自分で勉強してみる。以下はそのメモ。 置換の定義 定義(置換) $X_n$は$n$個の元を持つ集合とする。このとき、全単射写像 $\sigma: X_n \rightarrow X_n$ を$X_n$上の置換(Permutation)と呼ぶ。 言い換えると、$X_n$を適当に並べたとき、置換 $\sigma$ とはそれを並び替える方法を表したものである。 置換と聞くとReplacementがまず思い浮かぶけど、ここではPermutationなのね。 例 $X_3 = {1,2,3}$ とする。このとき、 $X_n$ の元を並べて $(1,2,3)$ としよう。このとき、 $\sigma(1)=2,\sigma(2)=3,\sigma(3)=1$ とすれば、写像 $\sigma$ は $X_3$ 上の置換となる。このとき、 $(1,2,3)$ という列が $\sigma$ によって $(2,3,1)$ に並び替えられたように見える。 $X_n$の元はなんでも良いが、以後説明のため$X_n = \lbrace 1,2,\ldots,n \rbrace$とする。 置換は以下のように表示することがある：$\sigma(i) = p_i\ (i=1,\ldots,n)$について、 $$ \sigma = \begin{pmatrix} 1 & 2 & \ldots & n \\ p_1 & p_2 & \ldots & p_n \end{pmatrix} $$ 先ほど置換とは $X_n$ を適当に並べたとき、置換 $\sigma$ とはそれを並び替えたもの、と表現した。実際、$\sigma$はただの写像なので、並び替えというより対応関係だけが大事である。上の表示方法はあくまで「上の段の元と下の段の元の対応関係」にだけ着目している。従って、上の段が$1,2,\ldots n$という並びになるとは限らない。...

Todoリストと言っても、フィールドに入力した内容がli要素として追加されるだけ。 Elm習いたてなので、何か無駄があるかも。 個人的になるほどと思った点はList.mapを利用してli要素を生成するところで、これは要素を生成する関数が子要素のリストを引数に取るから実現できる。 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 import Browser import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick, onInput) main = Browser....

簡単にセットアップ方法を備忘のために書いておく 前提 MacOS Mojave Homebrew 2.1.16 GitHubのblogリポジトリで公開する この記事でディレクトリを表記する時は、blogローカルリポジトリの最上位を/で表現する インストール ターミナルにて以下のコマンドを叩く 1 $ brew install hugo ブログサイトの作成 blogサイトのローカルリポジトリがある前提で進める。blogディレクトリに移動して以下のコマンドを実行する。 forceフラグをつけると、今のディレクトリに何かファイルがあった場合でもサイトを生成してくれる。僕の環境の場合はREADME.mdしかなかったので何も上書きされなかったが、hugoが生成するファイルと名前がかぶる場合は、何かファイルが上書きされる恐れがあるので注意。 1 $ hugo new site ./ --force すると、何やらたくさんファイルやディレクトリを生成してくれる。 テーマの追加 contrast-hugoが気に入ったのでこれを使う。 /themesに移動して、contrast-hugoのファイルをcloneしてくる 1 $ git clone https://github.com/niklasbuschmann/contrast-hugo.git 後でテーマをいじるので、一応テーマ名を変更しておく。contrast-hugoをch-modifiedに変更する。 シンタックスハイライトの設定 Chromaというハイライターが入っているらしい。そのテーマはこちらで見られる。今回はgithubというテーマを利用する。 /config.tomlでpygmentsStyle=githubと指定すると、スタイルをhtmlに直接埋め込んでくれる。しかしCSSを後で自分でいじりたいのでこの方法は用いない。その代わり、pygmentsUseClasses=trueとして、CSSを利用することにする。 /themes/ch-modified/static/cssに移動して、以下のコマンドを実行する。 1 $ hugo gen chromastyles --style=github > syntax.css configの設定 /config.tomlの内容を以下の通りにする。ほとんどの設定項目がデフォルトのもので、正直意味が分かっていないものもある。コメントアウトのところはAboutページのリンクを貼るものだが、Aboutページができたらコメントを外そうと思っている。 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 baseURL = [ブログのURL] title = [ブログのタイトル] author = [作成者] paginate = 3 languageCode = "ja-jp" DefaultContentLanguage = "ja" enableInlineShortcodes = true footnoteReturnLinkContents = "^" theme = [テーマ] publishDir="docs" pygmentsUseClasses = true [menu] # 気が向いたら設定する # [[menu....