Qiita に記事をアップしてみました #初心者

はじめに

Linux で困ったことをググると、Qiita (キータ) の記事がよくヒット。いつも助けてもらっているので、少しでも貢献出来たらと思っていました。

Qiita は、Markdown で書いて、ソースコードを見やすく表示出来る Rouge が使えます。Markdown といっても色々あり、記述が同じでも結果は微妙に違ったりします。こちらはGitHub のMarkdown に準拠しています。　→GFM (GitHub Flavored Markdown)

投稿は、ノウハウに関することなら個人的な備忘録でも良いようです。凝った記事にしなければ、投稿するのは、それほど難しくなさそう。
まず最初は、「Qiita に記事をアップした体験」を投稿してみました。

Qiita のMarkdown の書き方:

１. 投稿の編集画面の右上の「？」ボタンで、Markdown の書き方のダイアログが開きます。
また、（もっと詳しく知りたい方はこちら）のリンクからQiita Markdown記法チートシートが開きます。

２. Qiita Markdown記法チートシート
→Qiita で使えるMarkdown が紹介されてます。

３. GitHub Flavored Markdown 仕様
→元になっている書き方の詳細を確認できます。
GitHub で使われているMarkdown は「GitHub Flavored Markdown」と呼ばれています。

４. 書き方の参考にしたい記事があったら:
記事の右上にある「ギア」ボタンをクリック→「Markdownで本文を見る」→ファイルとして保存したり、テキストエディタで確認できます。
（ログインしていないと表示されません。）

Qiita のソースコードを見やすく表示:

Qiitaでシンタックスハイライト可能な言語一覧より引用:

ソースコードを見やすく表示する、シンタックスハイライト（構文の強調表示）の機能として、「Rouge」が使われています。

言語の一覧

⇐ 左の星をクリックすると一覧が開きます

入力する言語名（小文字）	記述言語
abap	ABAP
actionscript	ActionScript
apache	Apache
api blueprint	API Blueprint
applescript	AppleScript
awk	Awk
biml	BIML
1c (bsl)	1C (BSL)
c	C
ceylon	Ceylon
cfscript	CFScript
clojure	Clojure
cmake	CMake
coffeescript	CoffeeScript
common lisp	Common Lisp
config	Config File
console	Console
coq	Coq
c++	C++
crystal	Crystal
c#	C#
css	CSS
d	D
dart	Dart
diff	diff
digdag	digdag
docker	Docker
dot	DOT
eiffel	Eiffel
elixir	Elixir
elm	Elm
erb	ERB
erlang	Erlang
factor	Factor
fortran	Fortran
fsharp	FSharp
gherkin	Gherkin
glsl	GLSL
go	Go
gradle	Gradle
graphql	Graphql
groovy	Groovy
hack	Hack
haml	Haml
handlebars	Handlebars
haskell	Haskell
html	HTML
http	HTTP
hylang	HyLang
idl	IDL
igorpro	IgorPro
ini	INI
io	Io
irb	Irb
irb_output	Irb_output
java	Java
javascript	JavaScript
jinja	Jinja
json	JSON
json-doc	Json-doc
jsonnet	Jsonnet
jsx	JSX
julia	Julia
kotlin	Kotlin
lasso	Lasso
liquid	Liquid
literate coffeescript	Literate CoffeeScript
literate haskell	Literate Haskell
llvm	LLVM
lua	Lua
make	Make
markdown	Markdown
matlab	MATLAB
moonscript	MoonScript
mosel	Mosel
mxml	MXML
nasm	Nasm
nginx	nginx
nim	Nim
nix	Nix
objective-c	Objective-C
ocaml	OCaml
pascal	Pascal
perl	Perl
php	PHP
plain text	Plain Text
plist	Plist
pony	Pony
powershell	powershell
praat	Praat
prolog	Prolog
prometheus	Prometheus
.properties	.properties
protobuf	Protobuf
puppet	Puppet
python	Python
q	Q
qml	QML
r	R
racket	Racket
ruby	Ruby
rust	Rust
sass	Sass
scala	Scala
scheme	Scheme
scss	SCSS
sed	sed
shell	shell
sieve	Sieve
slim	Slim
smalltalk	Smalltalk
smarty	Smarty
sml	SML
sql	SQL
swift	Swift
tap	TAP
tcl	Tcl
tex	TeX
toml	TOML
typescript	TypeScript
tulip	Tulip
turtle/trig	Turtle/TriG
twig	Twig
vala	Vala
visual basic	Visual Basic
verilog and system verilog	Verilog and System Verilog
vhdl 2008	VHDL 2008
viml	VimL
vue	Vue
wollok	Wollok
xml	XML
yaml	YAML

書き方:

１. 書き方は、コードブロックの指定をして（バッククォートを3つ)から、小文字で言語名を入力。言語名は、Rouge に準じます。

２. 「```」の次に1文字入力するごとに「補完」が働きます。選択するだけで言語名が入力出来ます。
（おぼろげでも単語を知っている必要があります。）

３. コードブロックの上下に空行を挿入しないと正しく表示されないことがあります。

例. Markdown で書いたコード:

記述:

```markdown
#### Qiita Markdown Test ...
- test1
- test2
```

結果:

#### Qiita Markdown Test ...   
- test1
- test2

例. Markdown で書いて、「qiita test.md」として表示したいとき:

ファイル名部分には半角スペースを直接使えません。
全角スペースか で代用します。

記述:

```markdown:qiita test.md
#### Qiita Markdown Test ...
- test1
- test2
```

結果:

qiita test.md

#### Qiita Markdown Test ...
- test1
- test2

投稿の準備

まずは、Qiita のアカウントを作成

Qiita に登録（ユーザ登録）を開きます。
→「Qiita にログイン」画面が表示されました。

１. GitHub アカウント、Twitter アカウント、Google アカウントを持っていて連携したい場合:

下記のどれかをクリック
- GitHub アカウントでログイン
- Twitter アカウントでログイン
- Google アカウントでログイン

２. 単にQiita のアカウントを作成するなら:
- 新規登録 をクリック。

GitHub アカウントをもっているので、GitHub に連携しました。

「GitHub アカウントでログイン」をクリック→「GitHub のログイン画面が出るので、ログイン」
→メールが送信されます。認証コードを確認して、GitHub の認証コード入力画面に入力。

GitHub のAuthorize Qiita （認証）画面
→許可するなら緑色の「Authorize increments」ボタンをクリック。

「 Qiitaへようこそ!」画面が表示されます。

１. ここで、新規登録（ユーザ登録）します。

ユーザ名 (すでにGitHub のユーザ名が入力されています)
メールアドレス（入力）
「私はロボットではありません」にチェック。

「利用規約に同意して登録」ボタンをクリック。

２. 興味のある分野のタグをフォローしてみましょう。

「Git」のフォローボタンをクリック（任意）

３. 一番下の緑色の「Qiitaの利用を開始する」ボタンをクリック。

Qiita ホーム画面が表示されました。
GitHub から連携したので、右上にGitHub での自分のマークが表示されています。

Qiita ホーム

Qiita ホーム画面には、左に4つのタブがあります。

トレンド
タイムライン
タグフィード
マイルストーン

最初は「トレンド」タブが選択されています。

最近人気の記事（毎日5時/17時に更新）
あなたにおすすめの開発チーム
ユーザーランキング（1位:金杯、2位:銀杯、3位: 銅杯、…）
タグ・ランキング（1位:金杯、2位:銀杯、3位: 銅杯、…）
Organizationランキング（組織の記事）
Qiita:Zine おすすめ記事

Qiita で使える機能を確認しました。

「マイルストーン」タブで「300（いいねを獲得）」をクリック。
興味のある記事を読んでみて、役立ちそうな記事なら…

記事の右上の「ギア」→「Markdownで本文を見る」→ファイルとして保存を選択しました。
これよりも、プログラムで開く→テキストエディタ（既定）の方が、閲覧と保存ができて便利かな。

記事の下の「いいね」ボタンをクリック。
「いいね」が「いいね済み」の表示に変わりました。複数回は押せないみたい。

記事の下の「ストック」ボタンをクリックすると、
ホーム画面の上段にある「ストック一覧」ボタンにて、ストックに登録した記事が確認できました。

GitHub 連携したら、ログイン時は「GitHub アカウントでログイン」をクリック

Qiita ホームにアクセスします。

もし、ログインしていなかったら、右上の「ログイン」文字をクリック。

「Qiita にログイン」画面が表示されました。

メールアドレスとパスワード入れて「Qiita にログイン」
→「パスワードが設定されていないユーザです。TwitterかGitHubでログインしてください。」表示。
Qiita にログインだとログインできません。

GitHub から連携しているので「GitHub アカウントでログイン」をクリック。
→パスワードなしで、すぐにQiita ホームが開きました。
（Qiita はログアウトしたけど、GitHub はログインしたままでした）

Qiita 、GitHub 、共にログアウトしていた場合
「GitHub アカウントでログイン」をクリック →GitHub ログイン画面 →メールアドレス、パスワード入力 →「Sign in」をクリック。→Qiita ホームが開きました。

投稿

準備: メールアドレスの2段階認証

右上の「投稿する」ボタンをクリック。
登録したアカウントの設定画面が表示されました。

メールアドレス
xxxxxx@xxxx
→良ければ「保存する」をクリック。

「メールアドレスの認証が完了していません。認証用メールを送信するにはこちらをクリックしてください。」表示。
→ここで、認証用のメールが来ていないかを確認。来ていなければ、「送信するにはこちら」をクリック。

認証用のメール「メールアドレスのご確認」を受信。
→開いて「メールアドレスを認証」リンクをクリック。

公開用プロフィールで、名前を登録できる画面になりました。
→名前（名、姓）、自己紹介を入力→「更新する」をクリック。

そのプロフィール画面で、上段の「投稿する」をクリック。

やっと、投稿の編集画面になりました。

１. 表題を入力:「Qiita に記事をアップしてみました」
→他の人が検索しやすいように、表題を見ただけで投稿内容が見えるのがgood 。

２. タグを入力:「Qiita 初心者 Markdown 」
→半角スペースで区切って、5個まで。
文字を入力するたびに補完が働きます。スペースで補完は完了。

ここまでで、ファイルの先頭行が生成されるはず…。

---
title: Qiita に記事をアップしてみました
tags: Qiita 初心者 Markdown
author: Qiita
slide: false
---

３. 本文を入力: 記事を書いていきます。
→「良い記事を書くには」をクリックすると、良い記事を書くためのガイドラインが表示されます。

右のプレビューを確認しながら、本文を入力、修正していきます。

入力途中で、まだ投稿できる段階でないなら、

右のプレビュー画面の右下にある、緑色の「Qiita に投稿」の隣の「▲」をクリック→「下書き保存」に変更。
→記事が未完なので、誤って投稿しないようにできます。
見ていると定期的に自動保存されます。たぶん、ブラウザで現在の画面を維持するためのものみたい。

ここで選択できるのは3つ

Qiita に投稿
下書き保存
限定共有投稿

一度投稿すると、ここで選択できるのは2つ

下書き保存
更新

下書き保存

「下書き保存」にしてクリックすると、左の編集画面が「下書き一覧」画面に変わりました。
「未投稿(1/10)」、「投稿済み」でタブ分けされていて、未投稿に保存されました。
(1/10)とあるので、未投稿は10個までなのかな。
右のプレビュー画面の上にあるボタンで「編集」と「削除」が選べます。

限定共有投稿とは、

URLを知っているユーザーのみ見れて、Googleの検索でも表示されません。公開したくない個人的な投稿に便利です。Qiita に公開すべきでない投稿（ノウハウ以外）などもここに落ちることがあるみたい。

また、記事を限定共有から公開に変更することは出来ますが、投稿した記事を限定共有に変更出来ないようです。

Markdown の書き方のヘルプ:

編集画面の右上の「？」ボタンをクリック。
→基本的なMarkdown の書き方のダイアログが開きます。

（もっと詳しく知りたい方はこちら）をクリック
→Markdown記法チートシートがブラウザで開きます。

画像の貼り付け:

１. 事前にWeb にアップする画像を準備しておきます。

→ スクリーンショットは素のままだとサイズが大きいので、画像編集ソフトなどで、切り抜いたり、リサイズで幅を調整したり、圧縮をかけたりして軽くしています。ただし、見やすいことが重要。

→ 個人的には、幅600 px （ピクセル）で、ファイルサイズ80KB 以下を目安にしています。
（KolourPaint での画像編集のやり方はこちら）

２. 編集画面の右上の「山の絵」ボタンをクリック。
→ ローカルフォルダにある画像ファイルを選択、または、編集画面に画像ファイルをドラッグドロップします。

→ Qiita には画像アップロード機能があります。画像をWeb上のどこかに設置したり、そのURLを書く、という手間が要らないので楽です。

投稿されたMarkdown を見ると、画像のリンクは、2つのURL が見つかりました。

qiita-image-store.s3.ap-northeast-1.amazonaws.com　←画像のドラッグドロップで自動でリンク
user-images.githubusercontent.com　←たぶん、手動

画像のファイルサイズの上限は、

アップロード上限についてから引用。

Qiitaに1件も投稿してない状態では、画像のアップロード上限は2MBで、1件以上投稿したことがあれば月間100MBとのことです。

→何かしら投稿してから、投稿を始めるのが幸せみたい。

絵文字の入力:

楽しさを加えるだけでなく、色のついた絵文字を加えることで、注目して欲しいところを示す使い方も出来ます。

編集画面の右上の「ニコニコ」ボタンをクリック。
→絵文字の一覧 →選んだ絵文字のコード（文字列）が貼り付けられます。

文字列として貼り付けられます:

:raised_hand:

表示すると絵文字:

目次について:

記事を投稿すると、自動的に見出し1〜6 から抽出した「目次」が作成されます。
閲覧画面の右側に目次は表示され、見出しによるジャンプが出来ます。
なので、見出しを付けるときは、目次になることを意識すると良いかもしれません。

Qiita ホームから、下書き編集に入るには、

画面右上の自分のアイコンをクリック →下書き一覧
→投稿の編集画面に戻ります。
左の編集画面に「下書き一覧」ダイアログが表示されています。

ここで、未投稿の記事を選んで、右のプレビューの「編集」ボタンをクリックすると、記事の編集ができます。

注: 左の編集画面の右上の「鉛筆」ボタンは新規投稿です。

下書きが完成したら、投稿

右のプレビュー画面の右下にある、緑色の「下書き保存」の隣の「▲」をクリック→「Qiita に投稿」に変更。
「Qiita に投稿」をクリック。→「利用規約に同意する」にチェック→投稿する。

投稿後の編集について

追記：
(2019-09-11 02:11)

投稿した内容を少し修正するだけなら、編集→更新で済みますが、あちこちに散らばっている文字列を置換（例えば「ギア」アイコン→「歯車」アイコンに変更）したいときは、
テキストエディタの助けが必要です。

１. 編集→すべて選択してテキストエディタに貼り付けて、文字列を置換→すべて選択してコピー（記憶）

２. 編集→すべて選択して Delete →テキストエディタより貼り付け
→「更新」ボタンの横の▲をクリックして、「下書き保存」→編集画面が閉じました。

３. 投稿されている内容は以前のままで、上部にある「編集」ボタンが「編集を続ける」に変わっています。
ボタンを押すと、すぐに下書き保存した画面が開きます。
下のボタンは「更新」に戻っていました。

４. 右のレビューで確認して大丈夫なら「更新」

運用に支障がないように、よく考えられています。

作業していて、戸惑ったところ:

１. 「メールアドレスの認証」がなかなか出来なかったこと。

メールアドレスの認証用のメールが来ていたので、「メールアドレスを認証」リンクをクリック。
公開用プロフィールで、名前を登録して、「更新する」をクリック。
ここで、「Qiita ホーム」に戻り、上段の「投稿する」をクリック。
→すると、メールアドレスが認証されていません。と弾かれました。

再トライして、
公開用プロフィールで、「Qiita ホーム」に戻らずに、上段の「投稿する」をクリック。
→すると、投稿の編集画面が無事に表示されました。

２. Markdown の番号付きリストにて、途中で文章を挿入すると、番号が中断されたり、乱れました。
面倒なので、半角数字でなく、全角数字で強制的に番号の並びを合わせました。

３. 表のような横並びの文字列のリストにて、右側にある文字列の頭をそろえることができませんでした。
半角スペースとかTab で頭をそろえても、プレビューでは半角スペースとかTab は省略されます。
 を使っても、ブラウザでは等幅フォントが使われるとは限らないので難しそう。

とりあえずは、見やすいように全角スペース（□）で無理やり隙間を空けました。

apache □□ ← Apache
api blueprint □□ ← API Blueprint
applescript □□ ← AppleScript

Markdown 記述の機能だけで 枠が表示されない表 とか作れないのかな？そうすれば、頭を合わせるのも楽です。
（html ならCSS を訂正すれば枠を消せるらしいけど）

表は、枠表示ありが見やすいので、訂正しました

追記: 2019-10-06

シンタックスハイライトで指定できる「言語の一覧」を 枠表示ありの表 に変更しました。

表は隠れています。クリックすることで改善した表が見れます。枠表示ありの方が見やすいですね。

「省略した表の記述」を使うと自動で表を作ってくれるので、面倒な表を作らずに済みます。楽でした。

Qiita の投稿でフォントの差に気付きました

追記: 2019-12-23

Qiita に投稿してFirefox ブラウザで確認すると「@＠」の違いが分かりづらいことに気付きました。

ブラウザのフォントは、デフォルトのフォントです。
→Firefox 規定のフォント:「規定 (Noto Sans CJK JP)」

「@＠」は「半角の@、全角の＠」なのですが、
あなたの環境では違いが分かりますか？

「半角の@@@@@」
「全角の＠＠＠＠＠」
→違いを際立たせるには、コード記述にするのがいいみたい。
「半角の@@@@@」
「全角の＠＠＠＠＠」

それと、Qiita に投稿では「@@test@@」の中の「@test」はリンク扱いになります。(404 ERROR)
これも全体をコード記述にするのがいいみたいです。
「@@test@@」

やはり、下書き保存での確認と、投稿後の再確認が必要ですね。

Qiita の投稿で抹消線（打ち消し線）を引くには

追記: 2020-01-01

投稿で不具合があった時の回避策を書いたのですが、改修でその記述は要らなくなりました。すっきりさせるため削除しようと思いましたが、何かの役に立つかもと、残すことにしました。そこで抹消線です。

~~もう古い情報だけど、もしかしたら役に立つかも？~~

~~もう古い情報だけど、もしかしたら役に立つかも？~~

参考:

DQNEO/gfm_strike.md

Qiita の投稿でリンクを貼り付けるときの注意？

追記: 2020-01-01

投稿に投稿一覧を付けていますが、投稿の編集のURL を貼り付けてしまい、後で気付きました。

そして、他の投稿にも投稿一覧を貼り付けていたので後始末が大変。

Qiita の画面の右側にリンク表示あり

追記: 2020-02-05

いつからか、ブラウザを最大表示したとき、投稿画面の右側に「見出しをリンクとして表示してくれる」機能が付きました。見たいところに一発でジャンプできて便利です。

「投稿一覧」をリンクに変更

追記: 2020-03-04

各投稿のうしろに投稿一覧を付けていましたが、投稿のたびに他の投稿も修正が必要なので「リンク」にしました。

まとめ

何とか投稿できました。

リアルタイムにプレビューを見ながら編集できますし、画像の貼り付けがドラッグ&ドロップで簡単に出来ます。

作業環境としては、とても良く出来ていると思いました。
Qiita サポートチームに感謝！

参考まで。

次の投稿に続く

今までの投稿一覧は「ここ」

投稿一覧

Qiita に記事をアップしてみました

MATE(1) Ubuntu MATE 20.04 Daily をUSB メモリにインストール

Debian(1) DuZeru 4.1 をUSB メモリにインストール

Qiita に記事をアップしてみました