Javaっぽく取得する

データバインディングというらしい？

1
2
3
4
5
6
7

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
				
				// コンポーネントに設定したID(textView)からTextViewを取得する
				val textView = findViewById(R.id.textView) as TextView
}

Kotlinっぽく取得する（Kotlin Android Extensions使用）

Kotlin Android Extensions

Kotlinが公式で提供している、Androidアプリ開発をサポートしてくれる拡張機能
https://archive-blog.yagi2.dev/2017/10/18/good-bye-findviewbyid.html

1
2
3
4
5
6
7
8
9
10
11

// Inportする必要がある
// <layout>には取得したいLayoutXMLの名前を指定
import kotlinx.android.synthetic.main.<layout>.*

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

				// 後はViewないで指定した、コンポーネントのIDから呼び出せる
				textView.text = "テストだよ"
}

Ubuntu Serverで使用するキーボードレイアウトを日本語配列に変更する

1. sudo dpkg-reconfigure keyboard-configurationを入力

   1	$ sudo dpkg-reconfigure keyboard-configuration

• dpkg-reconfigure : 指定したDebianパッケージがdebconfを採用している場合に、パッケージの再設定をすることができるコマンド
  • debconfに対応しているリストはls /var/lib/dpkg/info/*.configでみることができる
• keyboard-configuration : キーボードのレイアウト設定ファイル

ここからは矢印キーとEnterキーで操作する(GUI風になる)

1. Generic 105-key (Intl)PCを選択
   

2. Japaneseを選択
   

3. Japaneseを選択
   

4. /etc/default/keyboardの設定を書き換えている場合表示される

• キーボードオプションを維持する場合はYesを選択、初期化していい場合はNoを選択
  

1. 「The default for the keyboard layout」を選択
   

2. 「No compose key」を選択するとコンソール画面に戻る
   

3. コンソール画面が表示され必要んな情報を生成してくれるので少し待つ(ネットワークが必要?)

   1 2 3 4 5 6 7

   Your console font configuration will be updated the next time your system boots. If you want to update it now, run 'setupcon' from a virtual console. update-initramfs: deferring update (trigger activated) Processing triggers for initramfs-tools (0.137ubuntu12) ... update-initramfs: Generating /boot/initrd.img-5.8.0-1006-raspi ....

4. 入力待機画面に戻れば成功

「Caps Lock」を「Ctrl」に変更する

/etc/default/keyboardのXKBOPTIONSに以下を書き加える

• デフォルト

  1	XKBOPTIONS=""

• 書き換え後

  1	XKBOPTIONS="ctrl:nocaps"

矢印キーを使用しないカーソルの移動

• □が現在カーソルのある位置

コマンドの履歴を使用する

• 矢印キーの上下(↑,↓)で一つ前のコマンド、一つ後のコマンドを呼び出せる。

• 履歴を見たい場合は、historyコマンドでみることのできる

  • 履歴番号　コマンド

    1 2 3 4 5 6 7

    $ history 679 ls 680 vim ~/.zshrc 681 source ~/.zshrc 682 ZDOTDIR 683 $ZDOTDIR 684 echo $ZDOTDIR

• 行番号を指定して実行する

  • !履歴番号
  • 行番号のコマンドがコマンドラインに入力される

    1 2 3

    $ !679 $ ls

設定の「自動文字コード識別設定」をONにする

1. Settings画面を開く

Code -> Preferences -> Settingsの順でSettings画面を開く

- `Cmd + ,(カンマ)`でも開ける

2. 自動文字コード識別設定を探す

検索欄から、「autoGuessEncoding」を検索

3.「Files:Auto Guess Encoding」にチェックを入れる

再度ファイルを開き直せば、文字化けが解消されているはず

参考

• https://github.com/sorin-ionescu/prezto
• https://qiita.com/s_of_p/items/33c9b18f0dc47ce29024
• https://qiita.com/yasudanaoya/items/8b928cfadbf702108ba3

インストール方法

1. Zshを起動する

1

$ zsh

2. リポジトリをクローンする

• ${ZDOTDIR:-$HOME}とは？
  • $ZDOTDIR : .zshrcの保存場所を設定する環境変数
  • $HOME : ホームディレクトリ
  • :- : 左辺の値が設定されていor空文字列であれば、右辺に設定されてる値が使用される

    1	$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

3. 今まで使っていた設定ファイルを移動させる

1

$ mkdir zsh_orig && mv zshmv .zlogin .zlogout .zprofile .zshenv .zshrc zsh_orig

4. 各コンフィグファイルへのシンボリックリンクを作成する

1
2
3
4

$ setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

5. zshをデフォルトシェルに設定

• chsh : ログインシェルを変更する

  1	$ chsh -s /bin/zsh

テーマの設定

テーマ一覧を見てみる

1

$ prompt -s

テーマを設定する

1

$ prompt -s テーマ名

Macの場合

prompt -sだと、そのセッションではテーマが変更されるが、再起動ログインし直すとデフォルトのテーマになってしまうので、設定~/.zshrcに追記しておく必要がある

1
2
3
4
5
6
7

$ prompt -s powerline
Set and save not yet implemented.  Please ensure your ~/.zshrc
contains something similar to the following:

  autoload -Uz promptinit
  promptinit
  prompt powerline

powerlineを使用する場合、特殊なフォントが必要

1. 以下GitHubのリポジトリをダウンロード
   https://github.com/powerline/fonts

• 適当なディレクトリに移動後

  1	git clone https://github.com/powerline/fonts.git

1. install.shを叩く

   1 2	$ cd fonts $ ./install.sh

2. 使用しているターミナルでフォントを設定

• 文字列にPowerlineが入っていれば使えるはず

コマンドラインの構文の概要

• git : 必須
• [スイッチ] : オプション
• <コマンド> : オプション
• <引数>: オプション

  1	git [スイッチ]<コマンド><引数>

ヘルプにも同じような構文の記述がされている

1
2
3
4
5

usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

ダッシュ(-)1個とダッシュ(—)の使い分け

• 1つ(-) : １文字のスイッチ(省略型)
• 2つ(—) : 略さずに完全に記述する長いスイッチ

リポジトリで「管理されている」ファイルのリストを取得する

ls-filesコマンドの-cオプションを使用する

ls-filesはデフォルトで-cオプションがついている

-c, —cached

Show cached files in the output (default)

実行結果例

1
2
3
4
5
6

% git ls-files 
1
2
3
4
aaa

リポジトリで「管理されていない」ファイルのリストを取得する

ls-filesコマンドの-oオプションを使用する

-o, —others

Show other (i.e. untracked) files in the output

実行結果例

1
2
3

% git ls-files -o
5
bbb

マージンについて

• マージンとは日本語で余白
• 要素の一番外側に位置する領域を意味する
• background-colorを設定している場合、色の領域は広がらない

  マージンとマージンは相殺する

  margin-bottom:20pxとmargin-top:30pxが上下に並んでいる場合、2つの要素の距離は２つの値を足した50pxにはならず、重なった部分のマージンは重なったままになるので、結果は30pxのマージンが取られた状態になる

記述する値によって設定できるマージンが変わる

1. 1つの値を設定する
   • 上下左右のマージンが同じだけ設定される

     1 2	<!-- 上下左右全て100px分のマージンが設定される --> margin: 100px;

2. 2つの値を設定する
   • 上下、左右のマージンが別々に設定される

     1 2	<!-- 上下:100px,左右:50pxのマージンが設定させる --> margin: 100px 50px;

3. 3つの値を設定する
   • 上、左右、下のマージンが別々に設定される

     1 2	<!-- 上:100px,左右:50px,下200pxのマージンが設定される --> margin: 100px 50px 200px;

4. 個別に値を設定する
   • 上の３つとは少し記述の仕方が変わっる

     1 2 3 4 5

     <!-- 明示的に設定する --> margin-top: 100px; margin-right: 100px; margin-bottom: 50px; margin-left: 100px;

パディングについて

• マージンの１つ内側の余白を設定する
• background-colorを設定している場合、色の領域も広がる

width属性とpadding

-width属性はpaddingのピクセル数に対する値ではなく、画面に対する値を設定している

- なので、`padding`を広げても文字は広く表示されない

記述する値によって設定できるパディングが変わる

1. 1つの値を設定する
   • 上下左右のパディングが同じだけ設定される

     1 2	<!-- 上下左右全て100px分のパディングが設定される --> padding: 100px;

2. 2つの値を設定する
   • 上下、左右のパディングが別々に設定される

     1 2	<!-- 上下:100px,左右:50pxのパディングが設定させる --> padding: 100px 50px;

3. 3つの値を設定する
   • 上、左右、下のパディングが別々に設定される

     1 2	<!-- 上:100px,左右:50px,下200pxのパディングが設定される --> padding: 100px 50px 200px;

4. 個別に値を設定する
   • 上の３つとは少し記述の仕方が変わっる

     1 2 3 4 5

     <!-- 明示的に設定する --> padding-top: 100px; padding-right: 100px; padding-bottom: 50px; padding-left: 100px;

ボーダーについて

• マージンとパディングの境界線の設定ができる

記述する値によって設定できるボーダーが変わる

1. 3つの値を設定する
   • 線の太さ、線の色、線の種類を設定する

     1 2	<!-- 線の太さ:1px,線の色:黒,線の種類:実線--> border: 1px black solid;

2. 各要素を別々にかつ、上下左右を変えて設定できる

   • 設定方法が細かくあるので、参考リンクだけを紹介する

     w3schools border-style

     ブラウザのデフォルトのマージンやパディングを無効にする

     1 2 3 4 5

     <!-- bodyタグに対して設定する --> bodu{ margin: 0; padding: 0; }

postion属性とは

• 要素の位置を指定するための属性

指定する方法の種類

1. relative : 相対位置への配置
   • その要素が本来配置される位置からの相対位置
2. absolute : 絶対位置への配置
   • 画面上の座標
3. fixed : 絶対位置への配置 + スクロールされても位置が固定

指定方法

1. まずは位置の指定方法を記述する

   1	position: relative;

2. どちらの方向にどれだけ動かすかを指定する

   1	top: 200px;

まとめると

1
2
3
4

.test{
	position: relative;
	top: 200px;
}

relativeとabsoluteの違い

イメージ

コード

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

<!DOCTYPE html>
<html>
	<head>
		<title>position</title>
			<style type="text/css">

				.first-section{
					background: lightgreen;
					width: 100px;
					height: 100px;
					position:relative;
					left:200px;
					top:200px;
				}
				.second-section{
					background: pink;
					width: 100px;
					height: 100px;
					position:absolute;
					left:200px;
					top:200px;
				}
				.third-section{
					background: red;
					width: 100px;
					height: 100px;
					position:fixed;
					left:400px;
					top:400px;
				}
		</style>
	</head>
	<body>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<div class="first-section">
			<p>1</p>
		</div>
		<div class="second-section">
			<p>2</p>
		</div>
		<div class="third-section">
			<p>3</p>
		</div>
	</body>
</html>

便利な属性

奥行きの指定

z-index属性を使って指定する

- 大きい値を設定したスタイルを適応した要素が上に描画される

1
2
3
4
5
6
7
8
9
10
11

.test{
	position: relative;
	top: 200px;
	z-index: 1;
}

.test2{ <!--こっちが上に表示させる-->
	position: relative;
	top: 200px;
	z-index: 2;
}

透明度の指定

• opacity属性を使って0~1までの間で指定する

  1 2 3 4 5

  .test{ position: relative; top: 200px; opasity: 0.5; <!--透明度を指定--> }

出力をクリップボードにコピーする

|(パイプ)+pbcopy

• pbとはpast boardの略

使用例

カレンとディレクトリのパスをクリップボードにコピーする

1

pwd | pbcopy

ファイルの内容をクリップボードにコピー

1

cat ファイル名 | pbcopy

追記

2021/3/6

zshには、aliasでpbcが設定されているらしく、こっちの方が短くかける

• 動作的には、aliasなのでpbcopyと同じ

  1	cat ファイル名 | pbc