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

11631 ワード
はてなブログ 非エンジニア Picasa GooglePhotos Picasa テキストリンク

はじめに

知らない人のために

はてなブログ
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（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

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

まず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に変換されて

ありきたりなタイトル

ありきたりな世界

ありきたりなリンク

ありきたりな文章

ありきたりな引用文とありきたりなリンク

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

Markdown入門(n番煎じ)

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

普通の文章を書くには

そのまま書くだけです

文章
ありきたりな文章

ありきたりな文章

段落分けしたい

空行を作ります

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

ありきたりとは

ありきたりな文章

ありきたりとは

改行したい

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

  1. 改行するだけでいい(GitHub, Qiitaなど)
  2. スペース2つ+改行(はてなブログなど)
Githubなど
ありきたりな文章
ありきたりとは
はてななど
ありきたりな文章__
ありきたりとは

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

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

太字にする

太字
**ありきたり**な文章

ありきたりな文章

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

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

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

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

箇条書き

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

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など)任意の文にリンクを付けたいこともあるので覚えましょう。

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)

引用したい

引用
>[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)
宣言とは、ある名前が、その翻訳単位で、何を意味するのかということを、明示するためにある。

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

写真を貼りたい

Markdown的には

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

Google Photosを使おう

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

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

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

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







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

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

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

詳細は
VisualStudioCodeで最速で俺流Markdown編集環境を構築する

終わりに

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