Posts

次の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.example.datatest.main.MainFragment.MyMsg" /> </data> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" > <EditText android:id="@+id/edit_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/hello_blank_fragment" android:layout_gravity="center_horizontal" android:textAlignment="center" /> <TextView android:id="@+id/text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@={myMsg.text}" android:layout_gravity="center_horizontal" android:textAlignment="center" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/to_reverse_fragment" android:textAllCaps="false" /> </LinearLayout> </layout> 重要なのは以下の部分で、これはMainFragment.ktで定義されたMyMsgというクラスのインスタンスをこのファイルではmyMsgとして扱う、という意味。 ...

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 <?xml version="1.0" encoding="utf-8"?> <layout 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" tools:context=".Fragment01"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text_fragment01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fragment01" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/click" app:layout_constraintBottom_toTopOf="@+id/text_fragment01" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </layout> fragment_fragment02.xmlもほぼ同じ。Buttonが無い点だけ異なる。 ...

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.xmlは以下のような定義になっている。このように、文字列などの定数はAttributeに直接指定せず、strings.xmlに設定してそこから参照するのが普通っぽい。 ...

更新(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.contrib import admin from django.urls import include, path urlpatterns = [ path('todo_list/', include('todo_list.urls')), path('admin/', admin.site.urls), ] ということでmysite/todo_list/urls.pyの設定をする。恐らく存在しないので新しく作成する。todo_list/以降に何も指定されなかったら表示をviews.pyのindex関数に任せるように書いている。 ...

置換について、線形代数の教科書に出てきたけど、授業ではあまり触れられなかったので自分で勉強してみる。以下はそのメモ。 置換の定義 定義(置換) $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.sandbox { init = init, update = update, view = view } --Model type alias Todo = { description : String } type alias Model = { todos : List Todo , input : Todo } init : Model init = { todos = [] , input = Todo "" } type Msg = Add | Change String --Update update : Msg -> Model -> Model update msg model = case msg of Add -> { model | todos = model.input :: model.todos } Change str -> { model | input = Todo str } -- View view : Model -> Html Msg view model = div [] [ input [ type_ "text", placeholder "What will you do?", onInput Change] [] , button [ onClick Add ] [ text "Add" ] , ul [] (List.map viewLi model.todos) ] viewLi : Todo -> Html Msg viewLi todo = li [] [ text todo.description ]

簡単にセットアップ方法を備忘のために書いておく 前提 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.main]] # identifier = "about" # name = "About" # url = "/about/" # weight = 10 [taxonomies] category = "categories" tag = "tags" series = "series" [privacy] [privacy.vimeo] disabled = false simple = true [privacy.twitter] disabled = false enableDNT = true simple = true [privacy.instagram] disabled = false simple = true [privacy.youtube] disabled = false privacyEnhanced = true [services] [services.instagram] disableInlineCSS = true [services.twitter] disableInlineCSS = true baseURL: 後でhugoコマンドで静的ページを作成するとき、cssやjsのアドレス解決のために必要。github公開後のアドレスを指定しておく。 theme: テーマ名を指定する。ここではch-modifiedを指定。 publishDir: 後でhugoコマンドで静的ページを作成したときの保存先。GitHub Pagesの表示先をmaster/docsにしたいので、このように書いている。 index.mdの作成 /contents/_index.mdを作成し、内容は以下のものとする。これは/theme/ch-modified/layouts/_default/list.htmlの{{ .Content }}に埋め込まれる。 ...

このブログではHugoを使っている。 Syntax highlighting 1 2 3 4 5 6 7 #include <iostream> int main() { std::cout << "Hello" << std::endl; return 0; } KaTeX inline: $x = 2$ block: $$ x^2 + x + 1 = 0 $$