kalax’s diary

日本語の勉強のためのブログ

はてなブログに貼り付けた画像のサイズを変更する(Markdownモード)

環境

方法

以下の記事によると、画像を示す文字列の最後にコロン区切りで

  • "wOOO(数字、単位はピクセル)"と指定することで画像幅
  • "hOOO"と指定することで画像の高さ

を設定できるようだ。
(例) [f:id:kalax:2021(略):plain:w400:h500] とすれば幅は400pxとなり、高さは500pxとなる。

%を用いて"w90%"(=幅を元の90%にする)のように指定することはできない。
しかし"wOOO", "hOOO"のいずれか一方のみを指定することで、指定しなかった辺も元の比率のまま縮小される。
(例) [f:id:kalax:2021(略):plain:w400] とすれば幅は400pxとなり、高さは元の比率のまま縮小される。つまり、元画像が幅1200x高さ1500なら400x500になる。
blog.serverworks.co.jp

プッシュ式ゴミ箱のフタのバネが取れたので直したい

注意

この記事で説明する内容は、私が2時間ほど試行錯誤したのちに偶然うまくいった方法である。そのため、実際のバネの位置・はめ方と違う可能性が多分にあることをご了承願いたい。
(実際のはめ方はいくら調べても出てこなかった...)

概要

家のゴミ箱はプッシュ式で、フタの前にあるボタンを押すことでフタが開閉できるものである(次項参照)。この機構にバネが使われているのだが、先日ゴミ箱のフタの部分が外れ、バネが取れてしまった。
もともとどこにバネが設置されていたかわからないため、このままではただ開閉が面倒なゴミ箱となってしまう。そのため、どうにか直せないか試すことにした。

修復対象のゴミ箱

アスベル製 「エバンペール45L(プッシュ)」
品番:6363
JANコード:4974908636332

フタ部分が以下の画像のようになっている製品である。密閉用のパッキンもついていない。

f:id:kalax:20210916200548p:plain
図1. フタ部分の形状

(図1の引用元: https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12178058127)

修復方法

  1. とりあえずバネのことは忘れ、フタとフタ枠をはめ込み、上の図1のような形にする。

  2. まずフタ右側のバネから取り付ける。バネを用意する。

    f:id:kalax:20210916215954p:plain:w400
    図2. フタ右側に使用するバネ

  3. 図3に示す向きで、バネを図4のように差し込む。横から見ると図5のようになっているはずである。

    f:id:kalax:20210916220055p:plain:w400
    図3. フタ右側にバネを差し込む向き
    f:id:kalax:20210916220155p:plain:w400
    図4. バネをフタ右側に差し込む
    f:id:kalax:20210916220214p:plain:w400
    図5. 差し込んだバネを横から見た様子

  4. バネの丸く巻かれている箇所を押し込む。うまくいけば図6のようにはまるはずである。

    f:id:kalax:20210916220306p:plain:w400
    図6. バネがフタにはまっている様子

  5. フタ左側にも、バネの向きを反転させて同様にバネを取り付ける。

    f:id:kalax:20210916220340p:plain:w400
    図7. フタ左側にもバネを設置した状態

  6. 完成。

参考資料

次の記事を参考にした。この記事のゴミ箱は今回取り扱ったものと全く異なる製品ではあるが、多くの示唆を与えてくれた。
ameblo.jp

【はてなブログ】古い記事に注意文を表示したい

概要

Qiitaには、古い記事の先頭に注意文が表示される機能がある。

f:id:kalax:20210915134914p:plain
図1. Qiitaで古い記事に表示される注意文の例

これを自分のブログにも搭載したい。

方法

以下の記事を参考にして作った。
sprint-life.hatenablog.com

プログラム自体はこの記事のおかげですぐ書けたが、下に示すように、記事上とフッタに分割して貼らないとうまく動作しなかった。謎。
おそらくプログラムの動作順序に起因するのだろうが...

完成したプログラム

以下のHTMLコードを記事上に貼る。

<!DOCTYPE HTML>
<div id="warning"></div>

そして以下のコードをフッタに貼る。

<!DOCTYPE HTML>
<script type="text/javascript">
    // 記事上に設置したdivタグをid指定で取得
    const warning = document.getElementById("warning");
    
    // 現在日時を取得
    let today = new Date();

    // 投稿日時を取得
    const updated = document.getElementsByClassName("updated");
    let updateDateStr = updated.item(0).getAttribute("datetime");
    let updateDate = new Date(updateDateStr); 

    // 現在から見て何年前の記事かを表す変数
    let yearsAgo = 0;

    // 投稿日時の1年後を求める (= 投稿日時に1年を足す)
    updateDate.setFullYear(updateDate.getFullYear() + 1);

    // 投稿日時が現在日時を越してなければ、投稿日時に1年を加算する
    // ということを繰り返すループ 
    while(updateDate <= today) {
        ++yearsAgo;
        updateDate.setFullYear(updateDate.getFullYear() + 1);
    }

    // 少なくとも1年前なら注意文を表示
    if (yearsAgo > 0) {
        warning.innerHTML = 
            `<span style="font-size: 150%">この記事は`
            + yearsAgo 
            + `年以上前に書かれました!</span><br>
            古い情報が含まれている可能性があります。予めご了承ください。`;
    }
</script>

<style>
    #warning {
        background-color: #ffff9e;
    }
</style>

やらかした点

div と span の違いが分からなかった

<div>はブロックレベル要素であり、<span>はインライン要素である。
つまり、<div>には複数行をまとめるはたらきがあり、<span>には一行をまとめる(一文中の特定箇所を指定する)はたらきがあるとのことである。
以下の記事がとても分かりやすい。
qiita.com

【Vue.js】詰まったところのメモ

現在、Vue.jsを用いて簡単なWebアプリの作成に挑戦している。ここでは初心者の視点から、開発中の不明点についてメモしておく。
最近記事を書いても下書きのままで投げてしまうことが多いので、雑多ではあるが公開することにした。

注意

非常にわかりづらい記述となっているため、問題解決のキーワードを見つける程度の軽い気持ちで読んでもらえたら嬉しい。

環境

  • CDN版のVue.js (以下のコードをhtmlの<head>タグ内に埋め込んで利用)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

画面更新がされない

コンポーネント内のセレクトボックスの内容が更新されなかった。watchを使って解決。
qiita.com
qiita.com

component自身を参照したい

$elを使う。
designsupply-web.com

その他、ドルマークから始まるプロパティやメソッドについては以下を参照。

012-jp.vuejs.org

jp.vuejs.org

javascriptについて

ブラウザにデータを保存してもらいたい

いろいろ選択肢はある。

  • indexedDB
  • localStorage

ただ、初心者はlocalStorageを使うべきだと感じた。
indexedDBは確かに高性能であるが、そもそもDBを開くのにも多くの知識が必要となるため、初心者にはお勧めできない *1 。 実際自分は地獄を見ることになった。
それに比べ、localStorageは

let myStorage = localStorage;

の一行で開くことができる。シンプルすぎて使い勝手が悪いという声もあるが、逆にこのくらいシンプルなほうが初心者にはとっつきやすいと思う。

注意点は、localStorageに入れるのは漏れてもよいデータにするという点である。個人情報などの重要データを扱う際は使ってはならないとのこと。
techracho.bpsinc.jp

参考:Storageについて developer.mozilla.org

select要素絡み

ある項目が選択されたときに何か関数を実行するためにはonchangeを使う。
hensa40.cutegirl.jp

js側で、ある項目を選択済にする方法について
memorva.jp

addEventListenerについて

addEventListenerに引数として関数を渡すときは、testFunction()のようにカッコを付けた書き方だと動かない。
以下の例に示すように、カッコを付けずに書く必要があるようだ。

const clickListener = () => {
    console.log("test");
}

const button = document.getElementById("button");
button.addEventListener("click", clickListener);

*1:

IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

【PySimpleGUI】簡単なカウンタを作成する

必要な機能

  • ボタンを押すとカウントする
  • 上に現在のカウントが表示される
  • 下にはリセットボタンと1カウント戻すボタン
  • リセットの際に確認ダイアログを出すか設定できる
  • できれば最前面に表示する機能も付けたい
  • カウントボタンは大きめにしてリセットなどとの押し間違いを防ぐ

完成したもの

GitHubに置いた。プログラムの説明については気の向いたときにしようと思う。

github.com

exeファイルに変換する

まず、pyinstallerをpip install pyinstallerでインストールする。

次に、pyinstallerを用いてpyファイルをexeファイルに変換する。
変換対象のpythonファイルがあるディレクトリに移動し、
pyinstaller 変換対象のファイル.py --onefile --noconsole
を実行して変換する[5]。エラーが出なければ無事に変換できているはず。

最初、WSL上のUbuntuで変換を試したが、うまくいかなかった。コマンドプロンプトPowerShellで変換するのがよいだろう。

参考文献

[1] PySimpleGUIを使ってプレゼン用カウントダウンタイマーを作った - Qiita
(最前面表示について)
[2] readme Japanese Version - PySimpleGUI
(公式ドキュメント日本語版)
[3] Call reference - PySimpleGUI
[4] 【PySimpleGUIでアプリ開発】ストップウォッチアプリ編 - Mickey's Life
(導入にはわかりやすいと思う exe化についても書いてある)
[5] PyInstallerでexeファイル化 - Qiita