Kimama-IT

ITに関する覚書き

【Flutter/Dart】DateTimeの使用例

Flutter Dart 
void main() {
  // DateTime(年, 月, 日, 時, 分, 秒);
  final DateTime birthday = DateTime(2012, 5, 9, 11, 15, 45);
  print('------誕生日------');
  print(birthday.timeZoneName);
  print(birthday);
  print(birthday.toUtc().timeZoneName);
  print(birthday.toUtc());
  print('');
  print('------現在時刻（Local）------');
  print(DateTime.now().timeZoneName);
  print(DateTime.now());
  print(DateTime.now().timeZoneOffset);
  print('');
  print('------現在時刻（UTC）------');
  print(DateTime.now().toUtc().timeZoneName);
  print(DateTime.now().toUtc());
  print(DateTime.now().toUtc().timeZoneOffset);
  print('');
  print('------経過日数------');
  int differenceDays = DateTime.now().difference(birthday).inDays;
  print('$differenceDays日');
  print('${differenceDays ~/ 365}年と${differenceDays % 365}日');
}

【Flutter/Dart】classの使用例

Flutter Dart

公式ページのイントロダクションをもとにした使用例のメモです。

dart.dev

void main() {
  var voyager = Spacecraft('Voyager I', DateTime(1977, 9, 5));
  print(voyager.name);
  print(voyager.launchDate);
  print(voyager.launchYear);
  voyager.describe();
  print('------------------------------');
  var voyager3 = Spacecraft.unlaunched('Voyager III');
  print(voyager3.name);
  print(voyager3.launchDate);
  print(voyager3.launchYear);
  voyager3.describe();
}

class Spacecraft {
  String name;
  DateTime? launchDate;

  // 読み取り専用の非最終プロパティ
  int? get launchYear => launchDate?.year;

  // コンストラクタで、メンバに代入するための糖衣構文を持つ。
  Spacecraft(this.name, this.launchDate) {
    // 初期化コードはここに書く。
  }

  // デフォルトのコンストラクターに転送する名前付きコンストラクター。
  Spacecraft.unlaunched(String name) : this(name, null);

  // メソッド。
  void describe() {
    print('Spacecraft: $name');
    // タイプ・プロモーションはゲッターでは機能しない。
    var launchDate = this.launchDate;
    if (launchDate != null) {
      int years = DateTime.now().difference(launchDate).inDays ~/ 365;
      print('Launched: $launchYear ($years years ago)');
    } else {
      print('Unlaunched');
    }
  }
}

【HTML】【JavaScript】クリックした文字列をクリップボードにコピーする。＃3

HTML Web

ページ内のリンクをクリックしたときに、リンクの文字をクリップボードにコピーする方法を記載します。

CSS、JavaScriptをほぼ記述しない簡易版です。

目次

概要

  1. a要素をクリックしたら、文字をコピーします。

全構文

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>
  </head>
  <body>
    <p>以下のリンクをクリックして、対象の文字をクリップボードにコピーする。</p>
    <a href="javascript:void(0)" onclick="navigator.clipboard.writeText('foo')">foo</a><br />
    <a href="javascript:void(0)" onclick="navigator.clipboard.writeText('bar')">bar</a><br />
    <a href="javascript:void(0)" onclick="navigator.clipboard.writeText('baz')">baz</a><br />
  </body>
</html>

参照したページ

HTML の基本 - ウェブ開発を学ぶ | MDN
Clipboard.writeText() - Web API | MDN

【HTML】【JavaScript】クリックした文字列をクリップボードにコピーする。＃1

HTML JavaScript Web

ページ内のリンクをクリックしたときに、リンクの文字をクリップボードにコピーする方法を記載します。

目次

全構文

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>
    <!-- 以下、CSSを記載する。 -->
    <style type="text/css">
      #notification {
        background-color: powderblue;
      }
      #notification.invisible {
        opacity: 0;
      }
      #notification.visible {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <p id="notification" class="invisible">をクリップボードにコピーしました。</p>
    <p>以下のリンクをクリックして、対象の文字をクリップボードにコピーする。</p>

    <!-- 以下、tableを作成する。  -->
    <table border="1">
      <tr>
        <th>No</th>
        <th>ことわざ</th>
      </tr>
      <tr>
        <td>１</td>
        <td><a href="javascript:void(0)">井の中の蛙大海を知らず</a></td>
      </tr>
      <tr>
        <td>２</td>
        <td><a href="javascript:void(0)">海老で鯛を釣る</a></td>
      </tr>
      <tr>
        <td>３</td>
        <td><a href="javascript:void(0)">急がば回れ</a></td>
      </tr>
    </table>

    <!-- 以下、javascriptを記載。bodyタグ内の下部に以下を入力する。  -->
    <script language="javascript" type="text/javascript">

      // tableタグを持つ要素の子孫のaタグを持つ複数要素を取得する。
      const aElem = document.querySelectorAll("table a");
      // notificationのid属性を持つ要素を取得する。
      const notiElem = document.querySelector("#notification");
      let timeoutID = undefined;

      // aElemの中からひとつずつ要素を取り出して、EventListenerに追加する。
      // 追加したEventListenerにより、aタグの文字列がクリックされたときに指定の関数が実行される。
      aElem.forEach(function(value) {
        value.addEventListener("click", updateClipboard);
      });

      // クリップボードに文字列をコピーする。
      function updateClipboard(event) {
        navigator.clipboard.writeText(event.srcElement.innerText).then(() => {
          // コピーに成功したときの処理をここに記載する。
          // 現在タイムアウト処理中であれば、タイムアウト処理を中止する
          if (typeof timeoutID === 'number') {
            notificationClearTimeout();
          }
          // 通知の内容をコピーした文字列に差し替える。
          notiElem.innerHTML = event.srcElement.innerText + "　をクリップボードにコピーしました。";
          notificationActive();
        }, () => {
          // コピーに失敗したときの処理をここに記載する。
          alert("コピー失敗");
        });
      }

      // 通知を表示する。
      function notificationActive() {
        // notiElemのinvisibleクラスをvisibleクラスに置き換える。
        notiElem.classList.replace("invisible","visible");
        // タイムアウト処理を開始する、そのタイムアウト処理の識別子が返値となる。
        timeoutID = setTimeout(() => {
          // 指定のミリ秒後にnotiElemからvisibleクラスをinvisibleクラスに置き換える。
          notiElem.classList.replace("visible","invisible");
        }, 1200);
      }

      // タイムアウト処理を中止する。
      function notificationClearTimeout() {
        clearTimeout(timeoutID);
      }

    </script>
  </body>
</html>

参照したページ

HTML の基本 - ウェブ開発を学ぶ | MDN
Clipboard.writeText() - Web API | MDN
Element.querySelectorAll() - Web API | MDN
Document: querySelector() メソッド - Web API | MDN
Element.classList - Web API | MDN
setTimeout() - Web API | MDN
clearTimeout() - Web API | MDN
Element.innerHTML - Web API | MDN
【JavaScript入門】querySelector()によるHTML要素の取得方法まとめ！ | 侍エンジニアブログ
【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニアブログ

【HTML】【JavaScript】クリックした文字列をクリップボードにコピーする。＃2

HTML JavaScript Web

ページ内のリンクをクリックしたときに、リンクの文字をクリップボードにコピーする方法を記載します。

関連記事

コピーした文字をページ内に表示する機能があるバージョンはこちら。
kimama-it.hatenablog.com

目次

概要

  1. コピー対象のテキストをa要素に記載する。
  2. HTML内の全てのa要素を取得する。
  3. a要素をクリックしたら、関数が実行されるようにする。
  4. その関数では、引数にa要素を使用し、a要素のテキストをクリップボードにコピーする。

全構文

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>
  </head>
  <body>
    <p>以下のリンクをクリックして、対象の文字をクリップボードにコピーする。</p>
    <a href="javascript:void(0)">foo</a><br />
    <a href="javascript:void(0)">bar</a><br />
    <a href="javascript:void(0)">baz</a><br />

      <!-- 以下、javascriptを記載。bodyタグ内の下部に以下を入力する。  -->
      <script language="javascript" type="text/javascript">

        const aElem = document.querySelectorAll('a');

        aElem.forEach(function(value) {
          value.addEventListener('click', updateClipboard);
        });

        function updateClipboard(event) {
          let copiedText = event.srcElement.innerText;
          navigator.clipboard.writeText(copiedText).then(() => {
            alert(copiedText  + "　をコピーしました。" );
          }, () => {
            alert("コピーに失敗しました。");
          });
        }
      </script>
  </body>
</html>

機能説明

構文１

<a href="javascript:void(0)">foo</a>
<a href="javascript:void(0)">foo</a>
  • ページに「foo」という文字のリンクを表示します。
  • 通常ではリンクをクリックするとページの移動がおこりますが、「href="javascript:void(0)"」とすることでページの移動がおこらなくなります。

構文２

const aElem = document.querySelectorAll('a');
aElem.forEach(function(value) {
  value.addEventListener('click', updateClipboard);
});
document.querySelectorAll('a');
  • 全てのa要素を変数aElemに格納します。
  • aElemは配列の変数になります。
  • 例えば、HTML内にa要素が3つある場合は配列aElemの0～2にそれぞれの格納されます。
forEach();
  • 配列aElemの内容（格納したa要素）を繰り返し取得し、function関数の引数valueに格納します。
addEventListener('click', updateClipboard);
  • 引数value（格納されているa要素）をクリックすると、関数updateClipboardが実行されるようになります。

構文３

function updateClipboard(event) {
  let copiedText = event.srcElement.innerText
  navigator.clipboard.writeText(copiedText).then(() => {
    alert(copiedText  + "　をコピーしました。" );
  }, () => {
    alert("コピーに失敗しました。");
  });
}
function updateClipboard(event)
  • updateClipboardを設定します。
  • 引数eventにはクリックしたa要素の値が格納されます。
let copiedText = event.srcElement.innerText;
  • eventに格納されているa要素のテキストを変数copiedTextに格納します。
.then( () => {}, () => {} );
  • navigator.clipboard.writeText()が成功したら.thenの中の前に位置するの関数が実行され、失敗したら後に位置する関数が実行されます。
  • () => {}はアロー関数という関数の書き方です。

参照したページ

HTML の基本 - ウェブ開発を学ぶ | MDN
Clipboard.writeText() - Web API | MDN
【JavaScript入門】querySelector()によるHTML要素の取得方法まとめ！ | 侍エンジニアブログ
【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニアブログ

【Ubuntu】【ShellScript】オリジナルコマンドを作ってみる。

Ubuntu ShellScript

【Ubuntu】ホームディレクトリにcommandディレクトリを作成し、その中にオリジナルのhhコマンドを作成します。

今回の環境を記載

~$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 22.04.2 LTS
Release: 22.04
Codename: jammy


ホームディレクトリに移動

~$ cd ~


commandディレクトリが無いことを確認

~$ ls -ld command
ls: cannot access 'command': No such file or directory

→No such file or directoryなどと表示されればディレクトリは無いです。


オリジナルコマンドを入れるディレクトリを作成

~$ mkdir command


commandディレクトリが作成されたことを確認

~$ ls -ld command
drwxrwxr-x 2 kimama kimama 4096  6月 25 16:14 command


commandディレクトリに移動

~$ cd command


hhファイル（オリジナルコマンド用のファイル）がないことを確認

~/command$ ls -l hh
ls: cannot access 'hh': No such file or directory


hhファイルを作成

~/command$ touch hh


hhファイルが作成されたことを確認

~/command$ ls -l hh
-rw-rw-r-- 1 kimama kimama 0  6月 25 16:23 hh


hhファイルにユーザの実行権を付与

~/command$ chmod u+x hh


hhファイルにユーザの実行権が付与されたことを確認

~/command$ ls -l hh
-rwxrw-r-- 1 kimama kimama 0  6月 25 16:23 hh


hhファイルの内容を編集してshellコマンドを記載（vi hh でもよい）

~/command$ nano hh

#!/usr/bin/bash
echo "hello $1"

を記載する


hhファイルの内容を表示

~/command$ cat hh
#!/usr/bin/bash
echo "hello $1"


hhファイルを実行してみる

~/command$ ./hh
hello


hhファイルを引数付きで実行してみる

~/command$ ./hh world
hello world


hhというコマンドを実行してみる

~/command$ hh
hh: command not found

→command not foundなどと表示され実行できない


~/commandディレクトリにPATHを通してhhコマンドを実行できるようにする

ホームディレクトリに移動

~/command$ cd ~


ホームディレクトリのファイルを表示

~$ ls -a1
.
..
.bash_logout
.bashrc
.cache
.config
.local
.profile
.sudo_as_admin_successful
Desktop
Documents
Downloads
Music
Pictures
Public
Templates
Videos
command
snap

→.bash_profileは無いですね。名前の似ている.profileはなんでしょうね。


.profileの内容を見てみる

~$ cat .profile
# ~/.profile: executed by the command interpreter for login shells.
# This file is not read by bash(1), if ~/.bash_profile or ~/.bash_login
# exists.
# see /usr/share/doc/bash/examples/startup-files for examples.
# the files are located in the bash-doc package.

# the default umask is set in /etc/profile; for setting the umask
# for ssh logins, install and configure the libpam-umask package.
#umask 022

# if running bash
if [ -n "$BASH_VERSION" ]; then
    # include .bashrc if it exists
    if [ -f "$HOME/.bashrc" ]; then
 . "$HOME/.bashrc"
    fi
fi

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/bin" ] ; then
    PATH="$HOME/bin:$PATH"
fi

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/.local/bin" ] ; then
    PATH="$HOME/.local/bin:$PATH"
fi

→先頭行に「~/.profile：　login shellsのコマンド インタプリタによって実行されます。」と表示があります。
　.profileはログインしたときに実行されるようですね。
　「~/.bash_profile または ~/.bash_login が存在する場合、このファイルは bash(1) によって読み取られません。」と書いてありますね
　そして、$HOME/.bashrc、$HOME/bin、$HOME/.local/binが存在すればそれらをPATHに追加するようなコマンドがあります。
　.profileにcommandディレクトリのPATHを追加するコマンドを追記すればPATHを通すことができそうです。


.profileのバックアップファイルが無いことを確認

~$ ls -a .profile.backup
ls: cannot access '.profile.backup': No such file or directory


.profileのバックアップファイルを作成

~$ cp -p .profile .profile.backup


.profileのバックアップファイルが作成されたことを確認

~$ ls -a .profile.backup
.profile.backup


.profileを編集して、commandディレクトリへのPATHを通す（vi .profile でもよい）

~$ nano .profile

最後尾に以下を追記

# set PATH so it includes user's private command if it exists
if [ -d "$HOME/command" ] ; then
    PATH="$HOME/command:$PATH"
fi


.profileの内容を表示して上記が追記されたことを確認

~$ cat .profile
# ~/.profile: executed by the command interpreter for login shells.
# This file is not read by bash(1), if ~/.bash_profile or ~/.bash_login
# exists.
# see /usr/share/doc/bash/examples/startup-files for examples.
# the files are located in the bash-doc package.

# the default umask is set in /etc/profile; for setting the umask
# for ssh logins, install and configure the libpam-umask package.
#umask 022

# if running bash
if [ -n "$BASH_VERSION" ]; then
    # include .bashrc if it exists
    if [ -f "$HOME/.bashrc" ]; then
 . "$HOME/.bashrc"
    fi
fi

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/bin" ] ; then
    PATH="$HOME/bin:$PATH"
fi

# set PATH so it includes user's private bin if it exists
if [ -d "$HOME/.local/bin" ] ; then
    PATH="$HOME/.local/bin:$PATH"
fi

# set PATH so it includes user's private command if it exists
if [ -d "$HOME/command" ] ; then
    PATH="$HOME/command:$PATH"
fi


hhコマンドを実行してみる

~$ hh
hh: command not found

→コマンドが見つからないと表示されてますね。
　.profileがまだ実行されていないことが原因のようです。
　.profileはログイン時に自動で実行されるようなので、ログインしなおしてみます。


いったんログアウトする

~$ exit
logout


再度ログインする。

→ログインの方法はssh、telnet、コンソールなど任意で行ってください。


hhコマンドを実行してみる。

~$ hh
hello

→hhコマンドが実行できました。

 

hhコマンドを引数付きで実行してみる

~$ hh world
hello world

→引数付きでも実行できました。


以上となります。