Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@FuRuYa7(ichro furuya)

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

Last updated at Posted at 2019-08-31

はじめに

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 のソースコードを見やすく表示:

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

言語の一覧
:star: ⇐ 左の星をクリックすると一覧が開きます
入力する言語名（小文字） 記述言語
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
→良ければ「保存する」をクリック。

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

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

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

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

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

Q01-01.jpg

１. 表題を入力:「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:

表示すると絵文字:
: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]
(https://gist.github.com/DQNEO/7096380)

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

追記: 2020-01-01

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

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

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

追記: 2020-02-05

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

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

追記: 2020-03-04

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

まとめ

何とか投稿できました。

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

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

参考まで。

[次の投稿に続く]
(https://qiita.com/FuRuYa7/items/c1d6ddaf0084870da628)

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

投稿一覧

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?