はてなブログ マークダウン記法で画像に好きなリンクを付けたい

はてなブログ(マークダウン記法)で自分でupした画像にリンクを貼る方法がちとメンドーだったのでメモ

はてなブログのサイドバーのメニュー写真を投稿から画像をアップロードして記事に挿入すると、エディターでは次のような はてな独自のf:idから始まるショートコード(fotolife記法)になります。

[f:id:kikiki-kiki:20180721152853j:plain]

プレビューで見るとこんな感じ。👇

<span itemscope="" itemtype="http://schema.org/Photograph">
  <img src="{image-url}" alt="f:id:kikiki-kiki:20180721152853j:plain" title="f:id:kikiki-kiki:20180721152853j:plain" class="hatena-fotolife" itemprop="image">
</span>

aタグは付いていないのですが、自動的に画像をクリックするとpopupで表示されるイベントが設定されています。

独自のリンクを貼ろうとして、

<a href="https://chaika.hatenablog.com/">
  [f:id:kikiki-kiki:20180721152853j:plain]
</a>

の様に画像のショートコードを<a></a>で囲んでもショートコードが画像に展開されず、ただのリンクの付いた文字列になってしまいます。👇
[f:id:kikiki-kiki:20180721152853j:plain]

記事中に挿入した画像に好きなリンクを貼りたい場合は、この自動挿入されるfotolife記法ではない方法で画像を表示させる必要があるようです。

はてなブログで挿入した画像に好きなリンクを貼る方法

1. マークダウンで画像を表示する方法

ただの画像を表示するマークダウンで画像を表示してしまえば、好きにリンクを設定することができます。

マークダウンで画像を表示する方法 👇

![alt属性](画像のURL "画像のtitle属性")

※ alt属性は空、title属性は無くてもOK

1. 画像をuploadし挿入する
2. プレビュー表示
3. 画像のURLを取得 ※ chromeの場合は画像を右クリックし「画像アドレスをコピー」で取得できます。
4. 編集モードに戻し、挿入された画像のタグを削除
5. マークダウンで画像を作成
   ![alt]({画像のURL})
6. 画像のタグをリンクで囲む
   [![alt]({画像のURL})](リンク貼るURL)

最終的にサンプルの例だと次のような感じになっていればOK

[![星宮いちごです！](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file})](https://chaika.hatenablog.com/)
## titleを設定する場合
[![星宮いちごです！](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file} "おしゃもじをマイクに")](https://chaika.hatenablog.com/)
## 空altの画像で
[![](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file})](https://chaika.hatenablog.com/)

👇

<a href="https://chaika.hatenablog.com/">
  <img src="{画像のURL}" title="おしゃもじをマイクに" alt="星宮いちごです！">
</a>

aタグにtitle属性を付ける方法

リンクのマークダウンのURLの後ろに"で囲った文字列を付けるとaタグのtitle属性を設定することができます。

[表示される要素](リンク貼るURL "aタグのtitle属性")

画像にリンクを貼ってリンク(aタグ)にtitle属性を設定する👇

[![星宮いちごです！](https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file} "おしゃもじをマイクに")](https://chaika.hatenablog.com/ "EVERY DAY IS A NEW AIKATSU DAY!")

<a href="https://chaika.hatenablog.com/" title="EVERY DAY IS A NEW AIKATSU! DAY">
  <img src="{画像のURL}" title="おしゃもじをマイクに" alt="星宮いちごです！">
</a>

画像のaltもaタグのtitleも自由に設定できるのでSEO的にも素敵です！　

2. はてなの画像リンク:image=を使う方法

「:image」と記述すると、そのURLが画像を示している場合、その画像を直接表示させることができます。
出典: リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ　

プレビューから取得した画像のURLをそのままエディターに入れた場合

[https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file}]

このままでは画像は表示されず、画像にリンクの貼られれた状態でURLがそのままテキストで表示されます👇
https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg

画像のURLの後ろに:imageを付けると画像が表示されるようです。

[https://cdn-ak.f.st-hatena.com/images/fotolife/k/{hatena-id}/{date}/{file}:image]

👇表示

それならこれをリンクのマークダウンのテキストにしたり、aタグで囲えばうまく行きそうな気がします。

## markdown
[[{画像のURL}:image]](https://chaika.hatenablog.com/)
## html
<a href="https://chaika.hatenablog.com/">[{画像のURL}:image]</a>

👇 残念ながらmarkdownでもhtmlの記述方式でも画像のURLがそのまま表示されてしまいました。
はてなの独自ショートコードはタグで囲むとプレーンテキストと解釈されるのでしょうか？
markdown
https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg:image
html
[https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20180721/20180721152853.jpg:image]

また、「:image=」に続けて画像のURLを指定することで、任意の画像に対してリンクを設定することができます。
出典: リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ

[リンク貼るURL:image={画像のURL}]

この方法だと画像に独自のリンクを貼ることができました。👇

<a href="https://chaika.hatenablog.com/" class="http-image">
  <img src="{画像のURL}" class="http-image" alt="https://chaika.hatenablog.com/">
</a>

imgタグ・aタグにalt, title属性を設定する方法はよく調べてないのでちょっと解りませんでした。(そのまま:title=をつけても意図したとおりに表示されなかった...)

3. その他の方法

プレビューで画像のURLを取ってくるので通常のHTMLにしてしまってももちろん問題なく画像に独自のリンクを設定することができます。

<a href="https://chaika.hatenablog.com/"><img src="{画像のURL}" alt="" title=""></a>

いずれにせよ、一度挿入した画像をプレビューしてURLを取得しなければならないのでチョット面倒です...
一度画像のURLを取得してしまったら[![画像URL]](リンク)でも[リンク:image=画像URL]どちらでも手間は同じくらいな印象でした。(マークダウンの![]の方がaltやtitleも細かく設定できるし、githubとか色んな所で応用は効きそうです)
まぁ画像挿入時にリンクを簡単に設定できるオプションが欲しいところですが…

---

[参考]

• リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ
• Markdown Cheatsheet · adam-p/markdown-here Wiki · GitHub
• Markdownで画像を表示する · GitHub

最速の仕事術はプログラマーが知っている

Mac OSX High Sierra 開発環境セットアップのメモ (4) MySQL 8.0

1. MySQLのインストール

HomebrewでMySQLをインストールする

$ brew install mysql
$ mysql --version
mysql  Ver 8.0.11 for osx10.13 on x86_64 (Homebrew)

v8.011がインストールされました。

2. MySQLの環境設定

MySQLの起動

$ mysql.server start

rootユーザーの パスワードを変更する

$ mysqladmin -u root password

MySQLの初期設定

MySQLが起動している状態で下記のコマンドを実行すると対話式で初期設定が開始されます

$ mysql_secure_installation

対話式で下記の項目を設定していきます

1. パスワードの強度チェックを有効にするか
2. rootパスワードの変更
3. anonymous user(匿名ユーザー)の削除
4. リモートからrootユーザでのログインの禁止
5. testデータベースの削除

1. パスワードの強度チェックを有効にするか

Securing the MySQL server deployment.
# rootユーザーのパスワードを入力
Enter password for user root:

VALIDATE PASSWORD PLUGIN can be used to test passwords
and improve security. It checks the strength of password
and allows the users to set only those passwords which are
secure enough. Would you like to setup VALIDATE PASSWORD plugin?
# パスワードの強度をチェックするプラグインを有効にするかどうか
# 有効にする場合は y を入力
Press y|Y for Yes, any other key for No:

1-2. 有効なパスワードの強度レベルの選択（↑のプラグインを有効にした場合）

There are three levels of password validation policy:

LOW    Length >= 8
MEDIUM Length >= 8, numeric, mixed case, and special characters
STRONG Length >= 8, numeric, mixed case, special characters and dictionary file
# LOW: 8文字以上
# MEDIUM: 8文字以上で最低 1 つの数値・小文字および大文字・特殊文字 (英数字以外) を含む
# STRONG: MEDIUMの条件に加えて4文字以上の部分文字列が辞書ファイル内の単語と一致してはならない
Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG:

2. rootパスワードの変更

# rootのパスワードが設定されていると強度が表示される
Using existing password for root.

Estimated strength of the password: <rootパスワードの強度>
# rootのパスワードを変更する場合は y を入力
Change the password for root ? ((Press y|Y for Yes, any other key for No) :

3. anonymous user(匿名ユーザー)の削除

# anonymous user(匿名ユーザー)を削除するかどうか
By default, a MySQL installation has an anonymous user,
allowing anyone to log into MySQL without having to have
a user account created for them. This is intended only for
testing, and to make the installation go a bit smoother.
You should remove them before moving into a production
environment.
# anonymous user(匿名ユーザー)を削除する場合は y
Remove anonymous users? (Press y|Y for Yes, any other key for No) :

4. リモートからrootユーザでのログインの禁止

# リモートからrootでのログインを許可するかどうか
Normally, root should only be allowed to connect from
'localhost'. This ensures that someone cannot guess at
the root password from the network.
# リモートからrootでのログインを禁止する場合は y
Disallow root login remotely? (Press y|Y for Yes, any other key for No) :

5. testデータベースの削除

# デフォルトで作成されている`test`データベースを削除するかどうか
By default, MySQL comes with a database named 'test' that
anyone can access. This is also intended only for testing,
and should be removed before moving into a production
environment.
# 削除する場合は y
Remove test database and access to it? (Press y|Y for Yes, any other key for No) :

6. 設定の反映

# 権限テーブルをリロードして即時変更を反映するかどうか
Reloading the privilege tables will ensure that all changes
made so far will take effect immediately.
# 設定を有効にする場合は y
Reload privilege tables now? (Press y|Y for Yes, any other key for No) :

All done!

ローカル環境なので、パスワードの強度の設定とrootのパスワード変更はお好みで、
あとは全てyで良いのではないかと思います。

設定ファイルによる設定

設定ファイルの作成

$ sudo touch /etc/my.cnf

/etc/my.cnfに設定を記入して保存

[mysqld]
# データベースで利用する文字コードをUTF-8に指定
character-set-server = utf8
# パスワードの有効期限日数を無効に
default_password_lifetime = 0
# パスワードの強度をチェックを無効に (ローカル環境なので)
validate-password = OFF

default_password_lifetime

MySQL 5.7 からユーザーのパスワードの有効期限がデフォルトで360日になりました。 360日するとパスワードの変更を促されてログインできなくなります。 パスワードを定期的に変更した方が良いのかという議論は賛否両論あると思いますが、本番環境などでパスワードが有効期限を迎えてしまってサービスがストップすることは、サービス提供を第一に考えた場合によろしくないので、この有効期限の設定を 0 に設定して無効にしておきます。
出典: MySQL 5.7 をインストールしたら最初に行うセットアップ | WEB ARCH LABO

MySQLを再起動

$ mysql.server restart

MySQLコマンドのエイリアスを作成

毎回mysql.serverと書くのも面倒なので.bashrcにエイリアスを作成します

# myaql
alias mysql.start='mysql.server start'
alias mysql.stop='mysql.server stop'
alias mysql.restart='mysql.server restart'

3. DBを管理するためのGUI Sequel Proのインストール

Sequel Pro
サイトからダウンロードしてインストール

Sequel での接続

1. ソケットタブを選択
2. ユーザー名とパスワードを入力
3. ソケットのパスを入力

mysql.sockの場所を調べる方法

$ mysql_config --socke
/tmp/mysql.sock

Sequelでlocalhostで接続できない問題にハマる

ターミナルからは今までどおりmysql -u root -pでMySQLに接続できていたのですが、Sequelからlocalhostのrootユーザーでログインしようとすると

Authentication plugin 'caching_sha2_password' cannot be loaded: dlopen(/usr/local/lib/plugin/caching_sha2_password.so, 2): image not found

というエラーが表示されDBに接続することができませんでした。

どうやらMySQL8からユーザー認証の方法がmysql_native_passwordからcaching_sha2_passwordに変更になっているようで、Sequelのようなクライアント側でも同じ接続方式になっていないとダメなようです。
つまり、アプリ側がcaching_sha2_passwordの方式に対応する必要があると...

MySQLの認証をmysql_native_passwordに戻してしまえばcaching_sha2_passwordに対応してないアプリでも接続できるっぽい

良いのか悪いのかはちょっと判断できないのですが、アプリがまだcaching_sha2_passwordの認証に対応していないならMySQLのユーザー認証を以前のmysql_native_passwordにしてしまえば接続できるようです。

1. rootユーザーの認証方式をmysql_native_passwordに変更する

ターミナルでMySQLにログインして下記コマンドでパスワードをを再設定

mysql > ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY '<PASSWORD>';

2. 設定ファイルでデフォルトの認証プラグインを変更

/etc/my.cnfに下記を追記

[mysqld]
... [中略] ...
# デフォルトの認証プラグインをmysql_native_passwordに
default_authentication_plugin=mysql_native_password

# 3. MySQLを再起動

$ mysql.server restart

MySQLにログインして設定が反映されているか確認

mysql> select user,host,plugin from mysql.user;
+------------------+-----------+-----------------------+
| user             | host      | plugin                |
+------------------+-----------+-----------------------+
| mysql.infoschema | localhost | mysql_native_password |
| mysql.session    | localhost | mysql_native_password |
| mysql.sys        | localhost | mysql_native_password |
| root             | localhost | mysql_native_password |
+------------------+-----------+-----------------------+

mysql> show variables like 'default_authentication_plugin';
+-------------------------------+-----------------------+
| Variable_name                 | Value                 |
+-------------------------------+-----------------------+
| default_authentication_plugin | mysql_native_password |
+-------------------------------+-----------------------+

再度Sequelで接続すると無事DBに接続することができました！

アプリがcaching_sha2_passwordの認証方式に対応した時はMySQLから下記コマンドでMySQLのユーザーの認証方式を戻してやれば良さそうです。(ちょっと面倒...)

mysql > ALTER USER <user@host> IDENTIFIED WITH caching_sha2_password BY '<PASSWORD>';

　
MySQLの環境設定今まで結構楽だった印象だったのですが、MySQL 8になったタイミングだったせいか結構メンドーでした。。。

---

[参考]

• MySQL 5.7 をインストールしたら最初に行うセットアップ | WEB ARCH LABO
• MySQL :: MySQL 5.6 リファレンスマニュアル :: 6.1.2.6 パスワード検証プラグイン
• MySQL5.7の初期設定まとめ
• [Sy] MySQL5.7 にて root のパスワード変更などの初期設定をする（mysql_secure_installation 使用） | Syntax Error.
• MySQLのmy.cnf に日本語コメントを入れてみた | QK
• Homebrew MySQLをアップデートしたらmysql.sockが無くなってエラーが出るようになった。 - かもメモ
• GUI Sequel Pro

[GUI Sequel でMySQLに繋げない問題]

• MySQL :: MySQL 8.0 Reference Manual :: 2.10.1.2 Changes Affecting Upgrades to MySQL 8.0
• mysql - Authentication plugin 'caching_sha2_password' cannot be loaded - Stack Overflow
• MySQL8.0新機能 (caching_sha2_password 認証プラグイン)
• 日々の覚書: MySQL 8.0.4におけるデフォルト認証形式の変更
• （解决方法）MySQL 8 + macOS 错误：Authentication plugin 'caching_sha2_password' cannot be loaded
• WindowsのPythonでMySQL80を触ろうとしたら躓いた話 - ごちうさ民の覚え書き
• MySQL5.7でCREATE USERするときのパスワードチェックを無効にする方法

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践

SQLアンチパターン

Mac OSX High Sierra 開発環境セットアップのメモ (3) Python

Pythonをインストールしてみました。

pyenvのインストール

Rubyで言うところのrbenv、バージョン管理のパッケージをhomebrewでインストールします

$ brew install pyenv

pyenvのパスを通す

~/.bashrcに下記を記述して保存

export PATH="$HOME/.pyenv/shims:$PATH"

パスを反映させる

$ source ~/.bashrc

Pythonをインストール

pyenvでインストールできるバージョンを確認

$ pyenv install --list

Pythonのインストール

$ pyenv install <version>

使用するPythonのバージョンを指定

$ pyenv global <version>

インストールできていることを確認

$ python --version

ライブラリパッケージのインストール

Python3ではpip3でパッケージ管理をするようです。
Python2まではpipだったようで、Python 2とPython 3が共存している場合はpipがv2系、pip3がv3系のパッケージをインストールするもののようです。
Python 3だけの環境ならpipコマンドででも特に問題なくv3のパッケージがインストールできるそうです。

MacのデフォルトでPython2が入っているのでpip3コマンドでライブラリをインストールします

$ pip3 install numpy  # 線形代数
$ pip3 install scipy  # 数式処理
$ pip3 install matplotlib  # 描画 
$ pip3 install pandas  # データ操作

　
Pythonを使える環境ができたので、学習していきたいとおもいます。

👆良さそう

---

[参考]

• Python Releases for Mac OS X | Python.org
• 【決定版】MacでPythonを使って『機械学習』を学ぶための環境構築
• pyenvを使ってMacにPythonの環境を構築する
• pythonのインストール（Mac）
• pyenv 利用のまとめ
• Python - Pythonの「pip」と「pip3」は何が違う？(46066)｜teratail
• TODO: pythonでwebサーバを立ち上げる

独学プログラマー Python言語の基本から仕事のやり方まで

12歳からはじめる ゼロからの Pythonゲームプログラミング教室