非プログラマーのためのはてなブログ+Google Photos入門

# はじめに

知らない人のために

はてなブログ
http://hatenablog.com/

Google Photos
https://photos.google.com/

この2つのサービスを連携させて使っていきます。

# 目標

- Markdownってどう発音するのか覚える
- Markdownの書き方を覚える
- Google Photosに写真を上げる方法を覚える
- はてなブログの記事にGoogle Photosの写真を載せる方法を覚える

# Markdownってどう発音するの?

マークダウン、です。

# Markdownとは

>https://ja.wikipedia.org/wiki/Markdown
>Markdown（マークダウン）は、文書を記述するための[軽量マークアップ言語](https://ja.wikipedia.org/wiki/%E8%BB%BD%E9%87%8F%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E8%A8%80%E8%AA%9E)のひとつである。本来は[プレーンテキスト](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AC%E3%83%BC%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88)形式で手軽に書いた文書から[HTML](https://ja.wikipedia.org/wiki/HTML)を生成するために開発されたものである。しかし、現在ではHTMLのほか[パワーポイント](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%AF%E3%83%BC%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88)形式や[LATEX](https://ja.wikipedia.org/wiki/LaTeX)形式のファイルへ変換するソフトウェア（[コンバータ](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%90%E3%83%BC%E3%82%BF)）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の[方言](https://ja.wikipedia.org/wiki/%E6%96%B9%E8%A8%80_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E))が存在する。

なんだかわかったようなわかんないような。

まずHTMLというのがあります。

```html:ありきたりなHTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>ありきたりなタイトル</h1>
	<p>ありきたりな世界</p>
	<p><a href="http://www.example.com">ありきたりなリンク</a><br>ありきたりな文章</p>
	<blockquote>
		ありきたりな引用文と<a href="http://www.example.com">ありきたりなリンク</a>
	</blockquote>
</body>
</html>
````

こんなテキストです。Webページはこれを使って書かれています。

でただこれを書くのは(入力補完でマシになりますが)めんdです。そこでMarkdownの出番です。

```
# ありきたりなタイトル

ありきたりな世界

[ありきたりなリンク](http://www.example.com)  
ありきたりな文章

>ありきたりな引用文と[ありきたりなリンク](http://www.example.com)  
```

まあま見やすいですよね？で、これをmarkdownのパーサー(コンバーター)に通すと上のhtmlに変換されて

># ありきたりなタイトル

>ありきたりな世界

>[ありきたりなリンク](http://www.example.com)  
>ありきたりな文章

>>ありきたりな引用文と[ありきたりなリンク](http://www.example.com)  

という感じで表示できます。というかこの解説記事もMarkdownで書いています。

# Markdown入門(n番煎じ)

掃いて捨てるほどMarkdownの解説はありますが、一応解説しておきます。

## 普通の文章を書くには

そのまま書くだけです

```plain:文章
ありきたりな文章
```

>ありきたりな文章

## 段落分けしたい

空行を作ります

```plain:空行の作り方
ありきたりな文章

ありきたりとは
```

>ありきたりな文章

>ありきたりとは

## 改行したい

これが2つの流儀がありまして

1. 改行するだけでいい(GitHub, Qiitaなど)
2. スペース2つ+改行(**はてなブログなど**)

```plain:Githubなど
ありきたりな文章
ありきたりとは
```

```plain:はてななど
ありきたりな文章__
ありきたりとは
```

``_``はスペースに読み替えてください。

>ありきたりな文章
ありきたりとは

## 太字にする

```plain:太字
**ありきたり**な文章
```

>**ありきたり**な文章

## 太字ではないけど強調したい

アルファベットのキーワードの強調に使うことが多い。

```plain:行内引用
ありきたりな文章に``const``という文字が紛れ込む
```

>ありきたりな文章に``const``という文字が紛れ込む


## 箇条書き

これが分かりやすくて、私大好きです。

```plain:2種類の箇条書き
- ``Simulator::AirWarPhase``の``vector<int> anti_air_score``をarrayに
- ``Fleet::RandomKammusuSS``の``vector<size_t> list``, ``vector<KammusuIndex> alived_list``のarray化
- ``Simulator::TorpedoPhase``の``vector<vector<int>> all_damage``のarray化
- ``Fleet::SearchValue``の高速化(無理じゃね？)
- ``Simulator::Calc``のreturn文のstd::make_tupleでvectorがコピーされている・・・？
-  ``Result::JudgeWinReason``からvectorを排除する
- constexpr化の促進

1. gitが使える端末を立ち上げる
2. ``git config --global core.editor "'c:/program files/sublime text 3/subl.exe' -w"``する(パスは読み替えてください)
3. 以上
```

>- ``Simulator::AirWarPhase``の``vector<int> anti_air_score``をarrayに
- ``Fleet::RandomKammusuSS``の``vector<size_t> list``, ``vector<KammusuIndex> alived_list``のarray化
- ``Simulator::TorpedoPhase``の``vector<vector<int>> all_damage``のarray化
- ``Fleet::SearchValue``の高速化(無理じゃね？)
- ``Simulator::Calc``のreturn文のstd::make_tupleでvectorがコピーされている・・・？
- ``Result::JudgeWinReason``からvectorを排除する
- constexpr化の促進


>1. gitが使える端末を立ち上げる
2. ``git config --global core.editor "'c:/program files/sublime text 3/subl.exe' -w"``する(パスは読み替えてください)
3. 以上

## リンクを貼りたい

サービスによっては、URLを貼るとそのままリンクが付くこともありますが(Github, Qiitaなど)任意の文にリンクを付けたいこともあるので覚えましょう。

```plain:Linkをはる
[C++11の文法と機能(C++11: Syntax and Feature)](http://ezoeryou.github.io/cpp-book/C++11-Syntax-and-Feature.xhtml)
```

>[C++11の文法と機能(C++11: Syntax and Feature)](http://ezoeryou.github.io/cpp-book/C++11-Syntax-and-Feature.xhtml)




## 引用したい

```plain:引用
>[C++11の文法と機能(C++11: Syntax and Feature)](http://ezoeryou.github.io/cpp-book/C++11-Syntax-and-Feature.xhtml)
>宣言とは、ある名前が、その翻訳単位で、何を意味するのかということを、明示するためにある。

>定義とは、名前の指し示すものを、具体的に記述することである。宣言と定義は、多くの場合、同時に行われることが多いので、あまり意識しづらい。 
```

>>[C++11の文法と機能(C++11: Syntax and Feature)](http://ezoeryou.github.io/cpp-book/C++11-Syn
tax-and-Feature.xhtml)
>>宣言とは、ある名前が、その翻訳単位で、何を意味するのかということを、明示するためにある。

>>定義とは、名前の指し示すものを、具体的に記述することである。宣言と定義は、多くの場合、同時に行われることが多いので、あまり意識しづらい。 

## 写真を貼りたい

### Markdown的には

```plain:画像をはる
![画像の説明](画像へのリンク)
```

# Google Photosを使おう

4592×3448まで(1,600万画素)なら容量を消費せずに写真を保管できるすぐれものです。写真も簡単に上げられます。

はてなブログは容量が小さいらしいので写真はここを使いましょう。


# はてなブログで写真を貼るには


便利なことにはてなブログではGoogle Photosと連携しています。

![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/8e2e82ba-fe91-a7e0-1728-e43f796aa34b.png)
![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/753ab9ef-d1f0-befc-4d0e-c20b882a64d6.png)
![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/ba4f13e6-4138-b0b2-e994-b8142949d6ad.png)
![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/49cf171f-25f6-9c61-04f1-4c50b8bcab1d.png)
![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/c8094fdc-c149-3a9b-1586-09ef7522b80e.png)
![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/edb15cde-37d4-6e34-1193-016f1d1a79ad.png)
![ブログ記事編集 - はてなブログ.png](https://qiita-image-store.s3.amazonaws.com/0/94177/09e8e17b-7887-a694-2414-5ac09732dd2e.png)

なんかMarkdownじゃなくてHTMLなのが残念ですが気にしない。

# Markdownをもっと楽に書くために

Visual Studio Codeという物がありまして、このソフトを使うとプレビューしながら、コードの色分けもありつつ書けます。

詳細は
[VisualStudioCodeで最速で俺流Markdown編集環境を構築する](http://qiita.com/yumetodo/items/1a8d371a20ba9a50eeaf)

# 終わりに

(まともな)プログラマとちょっとした文章をやり取りするときはMarkdownにするといいでしょう。