僕の世界観を変えてみる

文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。仲良くやろうよ。

趣味でプログラミングやってる者だけどGitの便利さを知ってしまった

f:id:htmllifehack:20200618002516j:plain
title

今まで食わず嫌いのようにGitを遠ざけていました。

と言うのも、使わなくても完結していたからです。

IT系の企業であればGitは必ず使用していますし、求人にも経験の欄にGitが記載されるくらい必須な技術と言えます。

なので僕も今更ですがGitを勉強してみました。

Gitとは

Gitとはプログラムのコードを記録する管理システムです。

僕の解釈で言いなおします。

自分のパソコンで書いたコードをGItと言うシステムを使用してGithubと言うオンライン上に保存することができます。

コードの書き直しをしたときはGithub上のデータを更新することもできますし、コピーを作ることもできます。

万が一、コードを消してしまった場合でもGithubから元のデータをダウンロードすることもできるんです。

しかも複数人で編集することも可能ですし、世界中の人に作ったプログラムを配布することもできるんです。

Gitがなんなのかがわかれば使うメリットに気付きますよね。

Gitの使い方

Gitを使うにはまずGithubのアカウントを作る必要があります。

github.co.jp

アカウントの作り方やGitの使い方はprogateが一番わかりやすいです。

下記のリンクはMacでの設定方法かもしれませんが、アカウントの作り方やGitの使い方は一緒なので参考にどうぞ。

prog-8.com

Gitの用語がわからない

Gitにはたくさんの専門用語が出てきます。

コミットするとかブランチしてプッシュするとか。

もう何がなんやら。

ですが、Gitの手順を踏んで行けば大体わかるはずです。

と言うわけで全体の流れを記載しておきます。

Gitの流れ

  1. Github上でコードを保管するフォルダを作成
  2. ローカルで作業するフォルダを作成
  3. ターミナルを開き2の場所へ移動する
  4. Gitの初期設定(name, email, リモートリポジトリの登録など)をする。
  5. Gitの初期化をする。(この時、Gitの隠しファイルが作成される)
  6. アップロードしたいファイルをGitの隠しファイルに追加する。
  7. 何を記載したコードなのかあとでわかるようにコメントをつける。
  8. 1で作成したGithubのフォルダにアップロードする。

こんな感じが大まかな流れです。

次に詳細を追っていきます。

1. Github上でコードを保管するフォルダを作成

Github上のコードを保管するフォルダのことをリモートリポジトリと呼びます。

リポジトリはGithubページ右上にある+マークを押すしてNew repositoryするか、トップページの左側にあるショッピングモールでよく見かけるトイレットペーパーを2段で設置できるやつのマークを押すと作成できます。

f:id:htmllifehack:20200614090639p:plain
リポジトリ
f:id:htmllifehack:20200614090658p:plain
リポジトリ

repository nameは好きなもので結構です。

リモートリポジトリにはpublicとprivateの2種類があり、パブリックはアップロードしたコードの内容がGithub上で公開され、プライベートは非公開になります。

好きなものを選択してcreateボタンを押しましょう。

何やらコードが書かれた画面が表示されると思いますが、この画面はあとで使うので閉じないでください。

2. ローカルで作業するフォルダを作成

例えばUsers/owner/Documents/workspace/js など好きな場所に作業フォルダを作成します。

書いたコードはここに保存していきます。

CUIで作成してもいいですし、GUIで作成してもいいです。

% mkdir workspace >> フォルダの作成
% touch sample.js >> 空のファイルを作成

3. ターミナルを開き2の場所へ移動する

Gitはターミナルからいじるので、ターミナルで2で作ったフォルダに移動してください。

移動の時はcdコマンドを使います。

change directoryの略です。

% cd workspace

4. Gitの初期設定(name, email, リモートリポジトリの登録など)をする。

ターミナルでGitを使う人の名前とメールアドレス を入力します。

% git config --global user.name eco

% git config --global user.email testmailaccount@example.com

誰がコメントしたのかわかるように名前を付けます。

5. Gitの初期化をする。(この時、Gitの隠しファイルが作成される)

さて、現在ターミナル上では作業フォルダ(2で作成したフォルダ)にいると思います。

そこで下記のコマンドを実行します。

% git init

initinitializeの略で初期化すると言う意味です。

git initを行うと.gitと言う隠しフォルダが作成されます。

これをローカルリポジトリと呼びます。

初期化したあとはリモートリポジトリの登録を行います。

1で作成したGithubの画面を再度開きます。

以下のような画面が表示されていると思うので赤枠のところのurlをコピーし、下のコマンドのURLと置き換えてください。

f:id:htmllifehack:20200616095613p:plain
git remote add

% git remote add origin https://github.com/***/***.git

6. アップロードしたいファイルをGitの隠しファイルに追加する。

例えば、get_asin.jsと言うJavaScriptファイルを作成しこれをGithubにアップロードしたいとします。

その時は

% git add get_asin.js

のように記述します。

この時点ではまだアップロードはされていません。

7. 何を記載したコードなのかあとでわかるようにコメントをつける。

次はコメントを付けます。

% git commit -m "初めてのGit"

こうすることで変更した内容が後々でわかるようにしておきます。

8. 1で作成したGithubのフォルダにアップロードする。

最後にアップロードです。

% git push origin master

pushでアップロードします。

originはリモートリポジトリの場所を表しています。

masterはデフォルトのブランチを表しています。

ブランチとは、枝です。

Githubにはブランチと呼ばれる分岐を作ることができます。

masterと言うメインのコードがあり、例えば試しに追加したいコードがあったとします。

これをメインのコードに書いて上書きするよりも、コピーを作ってそちらにコードを追加した方がもしうまいこといかなかったときのことを考えると良さそうです。

このコピーをブランチと呼びます。

あのときああしていれば、と言うパラレルワールドのようなものですね。

初回はpush時にIDとパスワードの入力を求められます。

Githubを作成したときの物を入力すれば大丈夫です。

何はともあれこれでGitの大まかな流れは終了です。

9. Github上のデータをダウンロードする

Githubは複数人でのコード管理を行うことができます。

例えば、他の人がリモートリポジトリにpushしたとします。

自分のローカルリポジトリは更新されていないのでpullを使ってリモートリポジトリと同じ状態にしてあげる必要があります。

そこで使うコマンドが

% git pull origin master

これで差分をダウンロードし自分のリポジトリを更新することができます。

clone と pull の違い

Gitには有名なcloneコマンドがあります。

よく公開されたライブラリを自分のPCにインストールするときに使うコマンドです。

% git clone https://github.com/***/***.git

ココの*はライブラリを公開している人のリモートリポジトリのURLです。

cloneの場合は差分の更新ではなく、リモートリポジトリを自分のPC内に丸ごと複製するコマンドです。

僕もGit初心者なので、複数人で管理することもないですし、まだブランチを作ったこともないので最初はcloneを使っていればいいと思います。

Gitの困った

remote: Invalid username or password

pushの時にusernameかpasswordが間違っていると警告が出ました。

最悪わからなかったらパスワードの変更です。

https://github.com/settings/security

ココからパスワードの変更が可能です。

I forgot my password から変更をしましょう。

あるいはリモートリポジトリの再登録を行います。

% git remote -v

このコマンドで現在登録されているリモートリポジトリの確認が取れます。

間違えていなくても再設定することでpushできたりします。

再設定は下記のコマンドで可能です。

% git remote set-url origin https://github.com/***/***.git

また、git remote -vを実行したときに何も表示されなければremoteの設定ができていないということです。

% git remote add origin https://github.com/***.git

を実行しリモートの設定をします。

これを行っていないとfatal: No such remote 'origin'というエラーが発生します。

まとめ

gitを少しだけ体験して、とても便利な機能だなと感じました。

まだまだ使っていないコマンドもありますが徐々に勉強していこうと思います。

やる気はあるんだけど、体力が追いつかない。

運動でも始めようかなー

暇だったのでパッとメモを取れるChromeの拡張機能を作ってみた。

f:id:htmllifehack:20200612203604p:plain
アイキャッチ

前回病院に行ったのが3月で、その時90日分のバセドウ病の薬を処方してもらったんです。

で、来週あたりまた病院に行くんですけど

このままだと20錠余るんですよね。

え、そんなに飲み忘れることあると思いますか?

流石の僕もそこまで忘れっぽくないので、多く処方されていたんだと思うんですよ。

でもですよ、仮に僕が飲み忘れたことがあったとしても多くて10数回だと思うんですよ。

そうすると10錠くらい多く処方されていたことになるんですけど

そんなことあると思います?

自分の記憶が怖くなってきました。

どうもえこです。

今日はchromeの拡張機能を作ったので宣伝しにきました。

それではどうぞ。

メモ帳を作りました。

作ったものはこちらからダウンロードできます。

chrome.google.com

機能紹介

昨日は単純にメモを取ることしかできません。

動画にもあるように、テキストエリアに文字を入力し、saveボタンを押します。

するとlocalStorageに保存されるわけです。

localStorageはF12を押してDeveloper Toolsを開き→Applicationタブ→Local Storageの順でクリックしていくと保存された値を見ることができます。

拡張機能の場合だとlocalStorageは確認できないので気になる方はDeveloper ToolsのconsoleタブでlocalStorageを使ってみてください。

例えば

localStorage.setItem('data', 'localStorage test');

localStorage.getItem('data');


>> localStorage test

localStorage.setItemでデータを保存します。

第一引数でkeyを、第二引数にvalueを宣言します。

例で言うとdataと言う名前のkeyを作り、そこにlocalStorage testと言うvalueを紐付けました。

辞書や連想配列と同じです。

localStorage.getItemでデータを呼び出します。

呼び出すときはkeyを引数に与えます。

setItemした段階でDeveloper Tools→Applicatonタブ→Local Storageに先ほどsetした値が表示されているはずです。

localStorageとは

ローカルストレージ はブラウザにデータを保存できる機能で、

特徴としてはcookieよりも保存容量が大きく、保存期間がほぼ永久、実装が簡単。

と言う利点を持っています。

cookieが4KBの保存容量に対してlocalStorageは5MBまで保存できるため、ちょっとした記録にちょうどいいです。

引用

ストレージの大きさ

クッキーは4 KBに制限される。ウェブストレージの容量はそれよりもはるかに大きい。

Mozilla Firefoxはオリジンごとに5 MBの容量がある[5]。

Google Chromeはオリジンごとに10 MB の容量がある[6]。

Internet Explorerはストレージエリアごとに 10 MB の容量がある[7]。

ウェブストレージ - Wikipedia

作ろうと思った経緯

メモ帳の拡張機能は探せばたくさんあります。

僕が作ったメモ帳よりも便利な機能が付いているものだってあります。

それでも僕がメモ帳を作ったのは、、、

JavaScriptの勉強をしていて何かを作りたかったのと、localStorageを使ってみたかったからです!

あとせっかくポートフォリオも作ったので作品を載せたかったってのもあります。

chromeウェブストアに公開するには$5かかる

chromeウェブストアではアプリを有料で公開することができなくなったようです。

www.lifehacker.jp

でも登録手数料は取られるんです。

マネタイズできるならいいんですけど、まあ仕方ないですね。

ストアに公開するには審査が必要

決められた項目を記入し、審査してもらう必要があります。

実は僕、今回のメモ帳の他にもう一つの拡張機能を申請中でして。

全てのページのCSSに追記してあるものを動かす拡張機能を作りました。

全てのページに被せて表示させるため審査が厳しめになるそうです。

メモ帳は数時間で審査が通りその後すぐに公開されたんですが、もう一つの拡張機能は数日経ってもまだ審査中のままです。

拡張機能はJavaScriptで書くので、悪いことできるスクリプトじゃないかしっかり目に確認しているんですね。

JavaScriptは楽しい

Developer toolsのconsole画面でパパッと書くことができるJavaScriptはプログラミング初学者にもってこいなんじゃないでしょうか。

forやifや四則演算や配列、変数など基本もできますし

なんならスクレイピングも出来ちゃいます。

しかも読み込み済みのDOMを操作するのでサーバに負荷がかかりません。

Googleアカウントがあればブラウザ上でpythonを実行することができるGoogle Colaboratoryもありますが、スクレイピングするにはrequestsする必要があったり、BeautifulSoupをインストールする必要があったりとJavaScriptと比べると手間がかかります。

まあサーバサイドとクライアントサイドで全く違うので比べるのが間違いだとは思いますが。

まとめ

拡張機能の書き方は後で記事にしようかと思います。

今回はこんなの作ったよって報告と、ブログの更新が全くされていなかったので何か書きたかっただけです。

最近暑くてなかなか執筆や勉強が進まないのですが

ゆっくりと増やしていきたいと思います。

あと、プログラマーやSEあたりに転職したいです。

そのために個人開発を頑張ります!

趣味でプログラミングやっている者だけどポートフォリオ(仮)を作ってみた

f:id:htmllifehack:20200603231708j:plain
title

お久しぶりです。

コロナ蔓延の候、みなさまいかがお過ごしでしょうか。

半年ぶりでしょうか。

随分とブログの更新をサボってしまいました。

2019年の10月後半にバセドウ病を患い、それでも11月には1記事書いたものの

体調が優れないため何もできない日々が続いていました。

そんな中コロナウイルスが流行りだし、

時期が重なれば死んでいたんではないかと思う今日この頃。

こんにちは、えこです。

徐々によくなってきたこともあり、最近ポートフォリオを作成しました。

拘ったものではないのですが、全くのポートフォリオ初心者の方の参考になれば幸いです。

作成したもの

ポートフォリオはHTML,CSS,JavaScriptを使用し、CMSを使わずに作りました。

サーバは、企業に見せるならフリーのサーバを使うなという記事も見かけましたが練習のためにGoogleのFirebaseを利用しました。

作成したものはこちらです。

https://portfolio-535d0.firebaseapp.com/

みんなが作ったポートフォリオを見に行く

まずポートフォリオがどんな物なのか調べました。

【ポートフォリオ 参考】

で検索し、どんなことを書いているのかを把握します。

主に、メニューバー、サイトトップ、自己紹介、スキル、製作物、問合せさき、あたりで構成されているようです。

参考にしたサイトはこちら

イケてるWebデザインで作られたポートフォリオサイト21選まとめ | マイナビクリエイター

Adobe XDでワイヤーフレーム を作成する

まずポートフォリオの作り方をググっていたら最初にワイヤーフレーム を作るという記事が出ました。

いきなりコードを書くのではなくて完成イメージを書くようでげす。

【ワイヤーフレーム  ツール】

などで検索するとAdobe XDの体験版が出てきたのでこれを使うことにしました。

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール

使い方はよくわからないけど、公式サイトにチュートリアルがあるので大体で作成しました。

f:id:htmllifehack:20200525093318p:plain
f:id:htmllifehack:20200525093345p:plain

あとサイトはレスポンシブ デザインで構築する必要があります。

スマホの普及率増加に伴い、検索やネット閲覧もパソコンよりもスマホで見る機会が増えました。

2017年のデータですがネット接続の端末の比率は以下の通りです。

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/image/n4201020.png 出典:総務省 インターネット利用の広がり より

また、スマホの普及率でいうと

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/image/n4201030.png 出典:総務省 インターネット利用の広がり より

20代、30代に関してはスマホの普及率は9割を超えています。

  • 20〜50代のスマホの普及率は7割越え
  • パソコンよりもスマホでネット閲覧をしている人の方が多い

という理由からサイト製作する際はスマホ画面で見られることを優先的に考えて作成する方が良いということです。

これは結構前から言われていることですね。

スマホファーストです。

コードを書いていく

ワイヤーフレーム で完成イメージができたらこのイメージに沿ってコードを書いていきます。

仕様書の作成、要件定義なども必要との事でしたがいまいちわからないのでこれは飛ばします。

【HTML編】section,main,articleがわからない

エディタはVScodeを使います。

VScodeは標準でemmetが使えるので html:5 と入力すると基本のタグは生成されて便利です。

さて、構成としては

  • メニューバー
  • サイトトップ
  • 自己紹介
  • スキル
  • 製作物
  • 問合せさき

この辺りを見出しにしてdivで区切っていこうかなと。

と思っていたのですが、HTML5で検索するとどうやらarticlesectionmainなどのタグが追加され、これらを使う事でよりわかりやすく構築できるという記事を読みました。

じゃせっかくだしそれらを使って書いていこう!とリファレンスを読んでみたものの、sectionarticleの違いがわかりませんでした。

何章何節みたいな使い方をするのがsectionであり、sectionの子要素にh1などの見出しを入れるべきらしい。

じゃarticleは?

articleは独立したコンテンツに使うらしい。

HTML5のお勉強 articleとsectionとか - Qiita

なるほど、と言いたいところですがわからん!

いくつかのサイトをDeveloper toolsを使って見ましたが、articleを使っているサイトはなく、なんならsectionすら使っていないサイトもあっ他くらいです。

ということで、わからないなりに適度な感じでベースを作ってみました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>こんにちは</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#top">top</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#skill">skill</a></li>
                <li><a href="#career">career</a></li>
                <li><a href="#works">works</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="top">

    </section>
    <main>
        <section id="about">
            <h1 class="sub-title">about</h1>

        </section>
        <section id="career">
            <h1 class="sub-title">career</h1>

        </section>
        <section id="skill">
            <h1 class="sub-title">skill</h1>

        </section>
        <section id="works">
            <h1 class="sub-title">works</h1>

        </section>
        <section id="contact">
            <h1 class="sub-title">contact</h1>

        </section>
    </main>
    <footer>
        <small>Copyright ©︎ 2020 eco All Rights Reserved.</small>
    </footer>
</body>
</html>

これをベースにして肉付けをしていきます。

【CSS】画面サイズで読み込むCSSを変更する

CSSフォルダの中に、スマホ用cssとPC用CSSを作成しHTMLのhead内に条件を記述します。

<head>
    <link rel="stylesheet" href="./css/css.css" media="screen and (max-width:480px)">
    <link rel="stylesheet" href="./css/pc.css" media="screen and (min-width:481px)">
</head>

media screenで480px以下の時はcss.cssを読み込ませ、481px以上の時はpc.cssを読み込ませるようにしています。

一つのCSS内にmedia screenを記述しても同じようにできますが、編集する際にスクロールするのが大変なので分けて作りました。

こう言うやり方もあるんですね。

動きがないとダサい問題

ここまでだと普通すぎていい印象を与えられそうにない。

が、一から動きがあってセンスのいいサイトを作る知識もない。

と言うわけで簡単に導入できてセンスのあるアニメーションを取り入れてみました。

particles.js

幾何学模様を画面上に表示するjsです。

導入するだけでおしゃれなサイトに様変わりです。

particles.js - A lightweight JavaScript library for creating particles

最初はtopにparticles.jsを入れてたんですが、なぜかfirebaseにデプロイすると反映されないので困りました。

仕方ないのでkeyframesでグラデーションの背景を動かして代替としました。

悲しい…

AOS

AOS - Animate on scroll library

スクロールして各sectionに移動する時、なんの動きもないのは少し味気ないのでアニメーションを取り入れました。

スクロールに連動してフェードイン・フェードアウトしてくれます。

今回はCDNで使いました。

サイトに行ってみるとどんな動きかわかりますよ。

CDNの記載と、javascriptに初期化のコードを記載するだけで使えます。

<script>
  AOS.init();
</script>

keyframes

keyframesを使って簡単なアニメーションを作りました。

#top {
    width: 100%;
    height: 100vh;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    background-attachment: fixed;
    background: linear-gradient(-45deg,#30cfd0 0%, #4a8ef3 30%, #b721ff 60%, #f43b47 100%) ;
    background-size: 500% 100%;
    position: relative;
    animation: gradient 10s ease-in-out infinite;
}

@keyframes gradient {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 100% 200%;
    }
    100% {
        background-position: 0 0%;
    }
}

#topのtopbackgroundlinear-gradientでグラデーションを作成します。

backgroundのグラデーションをドアップで表示させます。

で、keyframesで左上から右下に移動させて、背景が流れているように見せかけています。

ハンバーガーメニュー

【ハンバーガーメニュー&トグルニュー】クリックすると表示されるグローバルナビの実装方法 | Tech dig

スマホで閲覧するときはハンバーガーメニューを表示させたかったので、こちらのサイトのコードをお借りしました。

簡単に言うと、ハンバーガーメニューのclassかidを作成して、普段はhiddenさせておき、ハンバーガーメニューをクリックするとjavascriptでハンバーガーメニュー用のclassかidを付与する仕組みです。

const body = document.body;
const hamburger = document.querySelector('#js-hamburger');
const bg = document.querySelector('#js-bg-black');
hamburger.addEventListener('click', function(){
    body.classList.toggle('menu-open');
})

bg.addEventListener('click', function(){
    body.classList.toggle('menu-open');
})

varじゃなくletconstが推奨になったとのことで、僕もvarは使わずにやっていきます。

document.bodybodyを取得

document.querySelector('#js-hamburger');id=js-hamburgerの要素を取得

const bgも同様

onclickPよりもaddEventListener`のほうが推奨されているのでこちらを使います。

onclickと同様で、id=hamburgerの要素がクリックされたときbodymenu-openというクラスを追加する、という意味になります。

通常クラスの追加や削除には

body.classList.add('クラス名'); // クラス追加

body.classList.remove('クラス名'); // クラス削除

としますが、これを一度にできるのがtoggleです。

toggleはクラスがなければ追加、すでに存在していれば削除をしてくれる便利メソッドです。

javascriptでタイトルをタイピング風にする

JavaScriptとCSSアニメーションでタイピング風表示を行う - Qiita

いくつか調べましたが、僕のなかではこの記事の方法が最高でした。

[...sentence]のところの意味はわかりませんがなるほどと思いましたね。

カーソルの部分はkeyframeを使って点滅を再現。

本当はもっと点滅!って感じにしたかったんですけどわからないのでいったんこれでOKにしてます笑

カーソルは|で表現しました。shift + ¥ (パイプとかパイプラインと呼ばれる記号)

#top p:after {
    padding-bottom: 5px;
    content: '|';
    /* border-right: 1px solid; */
    animation: flash 1.7s linear infinite;

}
@keyframes flash {
    0%, 100% {
      opacity: 0;
      color: #fff;
    }

    35% {
        opacity: 1;
        color: #fff;
    }

    65% {
        opacity: 1;
        color: #fff;
    }
  }

先人たちの技術力をお借りして、やっとマシな見た目になってきました。

実績がない問題

ここまで作っておいてあれですが、僕にはポートフォリオに載せる実績がありませんでした。

😢

仕方ないのでこのブログから厳選した記事を載せておきます。

何かしらサービスを作ったほうが良さそうですね。

何を作ろうかな🤔

まとめ

さて、今回は企業にアピールするためにポートフォリオ(仮)を作ってみました。

sectionやらarticleやらがいまいちわからないんですけどそれっぽいものが作れてよかったです。

cssのkeyframesも今回初めて知ったので簡単にアニメーションが作れるってのは感動しました。

少しずつ何かサービスを作ってポートフォリオ(仮)を充実させていきたいですね。

【python】pythonを使ってファイル名を連番に変更する

f:id:htmllifehack:20191130120846j:plain

お久しぶりです。

バセドウ病になって倒れていたので更新頻度が激下がりになりました。

今回は本当に簡単で短い記事になってしまいますがきっと使う日がくる、そんなお話です。

画像を自動でダウンロードできるようになったらその画像を管理していくことになります。

TwitterでBotを作るときも画像のファイル名がとんでもなく長かったら登録するのも面倒くさいんです。

なので連番振って簡単にしてみました。

過去の僕への記事のようなものです。

やりたいこと

例えばこんな感じに画像が保存されていたとします。

c:\users\owner\pictures\rename_test\S29179908.jpg c:\users\owner\pictures\rename_test\S29179908_1.jpg c:\users\owner\pictures\rename_test\S__29179917.jpg

このS_2917~~が長すぎるので0001、0002のように4桁の数字の連番を振っていきたいときに使います。

globを使ってパスを取得する

おそらく一番簡単なのがglobです。

import glob

file = glob.glob(r"c:\users\owner\pictures\rename_test\*.jpg")
for i in file:
    print(i)

out:
c:\users\owner\pictures\rename_test\S__29179908.jpg
c:\users\owner\pictures\rename_test\S__29179908_1.jpg
c:\users\owner\pictures\rename_test\S__29179917.jpg

globをインポートし、globで指定したフォルダ内のファイルをすべて取得します。

subprocessという関数もありますがこれだとファイル名しか取得できないのでglobを使用します。

pathもないとファイル名の変更ができないためです。

os関数を使ってファイル名を変更する

まずはos関数を使って先ほど取得したパスをパスと拡張子に分割します。

import os

for i in file:
    name, ext = os.path.splitext(i)
    print(name)
    print(ext)

out:
c:\users\owner\pictures\rename_test\S__29179908
.jpg
c:\users\owner\pictures\rename_test\S__29179908_1
.jpg
c:\users\owner\pictures\rename_test\S__29179917
.jpg

os.pathとsplitextを使うと2つの変数に分けて挿入できます。

するとこんな感じで分割ができます。

次はc:\users\owner\pictures\rename_test\とS_29179908に分けたいと思います。

for i in file:
    name, ext = os.path.splitext(i)
    title = name.rsplit('\\',1)
    print(title)

out:
['c:\\users\\owner\\pictures\\rename_test', 'S__29179908']
['c:\\users\\owner\\pictures\\rename_test', 'S__29179908_1']
['c:\\users\\owner\\pictures\\rename_test', 'S__29179917']

splitは左から右へ流れるように文を分ける関数ですが、rsplitはその逆順になります。

例えば、今回で言うとc:\users\owner\pictures\rename_testとS__29179908で分けたいのですがsplitを使うと

for i in file:
    name, ext = os.path.splitext(i)
    title = name.split('\\')
    print(title)

out:
['c:', 'users', 'owner', 'pictures', 'rename_test', 'S__29179908']
['c:', 'users', 'owner', 'pictures', 'rename_test', 'S__29179908_1']
['c:', 'users', 'owner', 'pictures', 'rename_test', 'S__29179917']

こうなります。

split('\')[0:5] としても 'c:', 'users', 'owner', 'pictures', 'rename_test' となってしまいます。

split('\',5) だと c:', 'users', 'owner', 'pictures', 'rename_test', 'S__29179908' こうなります。

とういうことでsplitだと欲しい状態で取得できないのです。

join使えば行けますがもっと簡単にできるのがrsplitです。

物は試しでrplitを使ってみてください。

ファイル名を連番に変更する

最後にos.renameで連番に変更していきます。

for e,i in enumerate(file):
    name, ext = os.path.splitext(i)
    title = name.rsplit('\\',1)[0]
    os.rename(i,title + '\\{0:04d}'.format(e) + ext)

print([i for i in file])

out:
'c:\\users\\owner\\pictures\\rename_test\\S__29179908.jpg'
'c:\\users\\owner\\pictures\\rename_test\\S__29179908_1.jpg'
'c:\\users\\owner\\pictures\\rename_test\\S__29179917.jpg'

enumerateは何回forを繰り返したか数えてくれる関数です。

変数eに回数が入り、iにはファイル名が入ります。

enumerateの場合はzipを使わなくて済むので楽です。

いやenumerateって打つほうが面倒くさいか?

あとはformatを使って0埋めするだけです。

0:04dは4桁に合わせて0埋めするって意味です。

あえて言うなって感じはしますけど一応。

以上で完成です。

f:id:htmllifehack:20191130124629p:plain
before
f:id:htmllifehack:20191130124703p:plain
after

まとめ

本当に短い記事になってしまいました。

最近更新頻度が下がっているのでこんな内容でアクセス数が上がるのか心配です。

一応Adsence載せているのであとで収益とかのお話もできたらなって思っています。

正直4年やってるブログとは思えない少額報酬なんです。

はあ、病気にもなったことだしブログで稼ぎたいなあ

バセドウ病になりました

f:id:htmllifehack:20191030125955j:plain

お久しぶりです、えこです。

病気になったので少しお休みをいただいていました。

甲状腺の機能が異常になる病気です。

まさか自分が病気になるなんて!!

っていうような、そんな感じです。

ことの発端

今年の6月の終わりに風邪をひき、そのあとから手の震え、頻脈、倦怠感を感じるようになりました。

ただ、今まで脈が1分間にいくつだったのか覚えていなかったのと、手が震えるのは普通でしょという意見もあり、

倦怠感に関しては運動不足かもと思っていたので何ら疑うこともなく仕事に勤しんでいました。

10月になって健康診断を行ったとき異常が見られるから結果をもって内科に行くようにと言われました。

しかし健康診断の結果が届く前にまたも風邪の症状が出て、それが5日間続いたので近くの心療内科に行き健康診断でのことを話、そこでも血液検査をしてきました。

それから2日後、甲状腺ホルモンの値に異常が見られるので紹介状を作ってもらい専門医のいる病院に行くことになりました。

そこでバセドウ病と診断されました。

バセドウ病とは

バセドウ病とは自己免疫疾患の一つで、症状は目の奥の細胞がむくんで眼球が飛び出る眼球突出、甲状腺が膨れ上がるびまん性甲状腺腫、骨粗しょう症、甲状腺機能亢進症などがあげられます。

甲状腺腫、眼球突出、頻脈はメルゼブルグ三徴と呼ばれ、バセドウ病の代表的な症状です。

自己免疫疾患

通常体内に入ったウイルスを免疫系が攻撃し、その情報をもとに抗体を作り免疫系と一緒にウイルス感染した細胞を除去していきます。

このとき何ならかの原因で抗体が正常な細胞まで攻撃することがあり、それによって引き起こされる体の異常を自己免疫疾患と呼びます。

そして抗体が甲状腺を攻撃し甲状腺ホルモンを過剰に分泌してしまう病気をバセドウ病と呼びます。

免疫の働きとは?|バイオのはなし|中外製薬

はたらく細胞(1) (シリウスコミックス)
講談社 (2015-08-07)
売り上げランキング: 3,491

甲状腺機能亢進症

甲状腺ホルモンはエネルギーを燃やす働きをします。

甲状腺ホルモンが過剰に分泌されることにより、脈拍と血圧と代謝が上昇、手の震え、体重の減少、動悸、疲労等が起こり、体は常 に運動状態になります。

これらの症状を甲状腺機能亢進症と呼びます。

僕の場合、脈が1分間に110を超え、少し動くと125に上昇します。

加えて体が熱く感じる、食べても食べても体重が減る、動悸がする、手指振戦(手の震え)が起きています。

甲状腺機能亢進症になる原因の主はバセドウ病、甲状腺炎、中毒性多結節性甲状腺腫です。

甲状腺機能亢進症 - 12. ホルモンと代謝の病気 - MSDマニュアル家庭版

 治療法

バセドウ病の治療法は3つあります。

一つはメルカゾールという内服薬です。

簡単な治療法というところがメリットですが、デメリットととして再発の可能性がある、服薬期間が長い(1年~)、肝臓機能障害になる可能性がある、無顆粒球症になることです。

メルカゾールは甲状腺ホルモンの分泌を低下させる働きがありますが同時に白血球の数も減らしてしまいます。

それにより起こるのが無顆粒球症です。

白血球には無顆粒という成分がありこれがなくなってしまうことでウイルスを排除できなくなり重篤なウイルスに感染しやすくなる というものです。

死亡例もある症状です。

風邪の症状が出た場合はすぐに医師に診てもらう必要があります。

薬の効果が出てくるのが2週間からかかり、同時に副作用もでてくるので安心はできません。

2週間おきに血液検査を行い経過を見ていきます。

二つ目は甲状腺摘出手術です。

甲状腺の一部、あるいは全摘出します。

再発の可能性が低いことと短期間で終わるところがメリットですが、摘出することで甲状腺ホルモンの分泌がなくなるため甲状腺ホルモンの働きをする内服薬を一生飲み続けることになること、そして甲状腺機能低下症になる可能性があることがデメリットとしてあります。

甲状腺機能低下症の症状は、エネルギーが燃えなくなるので、代謝が下がり体重増加、皮膚疾患、寒がり、精神疾患、むくみなどか挙げられます。

三つ目がアイソトープ治療です。

アイソトープは放射線治療のことでバセドウ病の場合は放射性ヨウ素のカプセルを服用します。

メルカゾールより早く治るようなのですが病院によってできるできないがあるようなので注意です。

またアイソトープ治療は甲状腺ホルモンの分泌を低下させるため、副作用に甲状腺機能低下症があげれれます。

ほかに、体内に放射線がたまっているので、尿や汗、唾液から放射線が排出されます。

数か月間はお風呂を最後に入る、キスをしない、回し飲みをしないなどエチケットとしての注意も必要となるようです。

僕が通っている病院ではアイソトープ治療は行っていないため、メルカゾールを服用し、それでも改善されない場合は手術する予定です。

 最悪の場合

何らかの理由で処置ができない場合、あるいは摘出後の内服薬で甲状腺ホルモンのコントロールができなかった場合

甲状腺クリーゼという症状が発症する可能性があります。

これは複数の臓器が機能不全になる致死率10%の病です。

甲状腺クリーゼにならないためには心身両方のストレスがかからないようにすることが先決とされています。

 血液検査

血液検査では様々な値がわかります。

タンパク質の数、白血球の数、甲状腺ホルモン、赤血球、血小板、カルシウムなどの数値がわかるんです。

甲状腺ホルモンはFT4、FT3という項目を確認します。

ここの数値が僕は通常の人の数値よりも5倍、6倍多い値になっていました。

僕はこれから診察のたびに血液検査行う必要があります。

病気を疑う

6月に風邪をひいてそのあとから頻脈、手の震え、倦怠感、動悸、多汗があったのになぜ病院に行かなかったか。

自分が病気になるとは思っていなかったから、が一番大きいかもしれません。

そして専門家でもない周りの人に意見を求め、みんな手は震えているよとか、忙しかったから脈が上がったんじゃないかとか

その意見に安心してしまったところがあります。

頻脈や手の震えなどは甲状腺機能亢進症の症状です。

素人でもわかる症状がでていたわけです。

おかしいなと思ったら、すぐに病院に行くことをおすすめします。

 まとめ

内服を始めて今日で5日目。

脈拍は安静時で110前後、動くと120を超えます。

手の震えなども治っていませんが熱も36.8℃前後まで下がったので、僕としては元気で病気の実感がありません。

薬のお陰だと思っていましたが薬の効果が出るのは2週間からかかるそうです。

そして2週間経ったころから無顆粒球症、肝機能障害などの副作用が現れます。

元気だから仕事に行ってもいいか、病院に聞いてみました。

パソコンを使う座り仕事なら大丈夫だけど、くれぐれも気を付けて行動してくださいと医師から言われました。

その後、最初に担当してくれた看護師さんから電話があり、病気の実感がないことを怒られました。

頻脈とは心臓が全身に血液を送るサイクルが早まったことを意味します。

あまりにも脈が速くなりすぎると心臓は血液をうまく送ることができなくなり、吐き気、失神、心停止発作もまれではないくらい起こると言われました。

メルカゾールという薬は副作用のリスクが高い薬であり、バセドウ病も他の病気が発症しやすいものと知りました。

病気は病気、自分が元気だと思っていても血液検査をしなければ元気かどうかわからない。

病気を治そうとする患者の努力と自分の病気を調べて最善を尽くす努力が必要。

脅してるようで申し訳ないけど今の症状が悪化すれば死ぬこともあるんだと看護師さんに言われて、僕なりにバセドウ病を調べてみました。

その結果をここに記します。

 追伸

甲状腺機能障害には種類があります。

バセドウ病、橋本病、プランマー病、無痛性甲状腺炎、亜急性甲状腺炎、甲状腺中毒症など。

正直、自分では風邪と思っていたのでバセドウ病気だと知って驚きです。

この本はすべて載っているわけではありませんが、何かのきっかけや気づきに繋がるかもしれません。

これって、「甲状腺の病気」のせいだったの?
井上 きみどり
K&M企画室 (2019-07-12)
売り上げランキング: 32,591

体が資本です。

働けなくなっても手当てを受けるには時間がかかります。

生命保険とはなんなのかと最近疑問に思います。

すべて早め早めの行動をとりましょう。