izanami Editor

izanami エディターは、
マークダウンエディターです。

記事の 3 行要約、フィードバックの表示、文章の質の検証、
タグの正規化、美しいシンタックスハイライトなど、
記事を読む人にもやさしい機能を備えています。

logo

ドキュメント

  • マークダウン短縮記法表
  • izanami エディター
  • コンテンツ投稿ガイド
  • チームブログ

ガイドライン

  • コミュニティガイドライン
  • ブランドガイドライン

ヘルプ

  • izanami について
  • よくある質問

記事の冒頭で3行要約

記事の要約を入力すると、記事の冒頭に概要を表示することができます。

冒頭で読者が記事の内容を把握しやすくなる

要約を入力することで、description タグや og タグにも反映されます。これにより、検索結果やソーシャルメディアでの記事の見え方が改善され、読者に魅力的な記事内容を伝えやすくなります。

チーム限定公開公開

チームブログのPRO版をご契約いただくと、 チーム内だけで記事を共有できる「チームブログ限定公開」がご利用可能です。詳しくは、チームブログについてをご覧ください。

エディターのテーマ切り替え

ダークテーマとライトテーマを切り替えて執筆できます。クリーンボタンで文章を整形できます。

ナビゲーター

エディターはコンテンツの質や一貫性を保つためにナビゲートします。例えば、検索結果にノイズとなる 100 文字未満の短い記事が作成されないようにすることで、全体の質を高めることができます。

テック記事自動判別

技術内容を含むテック記事と、技術内容を含まない一般向け記事をある程度自動判別します。編集画面で変更が可能です。

記事冒頭でフィードバック表示

エディターから記事を投稿後、ユーザーからのフィードバック(役に立ったか、内容が合っているか、情報が古くないか、異なるアプローチがあるかなど)を受け取ることができます。フロント画面からは投稿者へ簡単にフィードバックできます。

これにより、サイトに訪れたプログラミング初心者が誤った内容の記事を自分のコードに適用してしまうことを防いだり、記事が長い間更新されなくても読者に記事の冒頭で客観的な情報を伝えることができるようになります。

記事の冒頭でフィードバックが表示される

情報に不備があるか、技術記事として適切かどうかを投票できます。

エディターでフィードバックを追加

Shiki で実現するシンタックスハイライト

シンタックスハイライト機能の画像
エディターおよびプレビュー画面の両方でカラーリングがリアルタイムで反映される

izanami で使用しているShikiは、VS Code の “TextMate スコープ” を使用してシンタックスハイライトを提供しています。

これらのスコープは VS Code 自体の更新や、新しい言語サポートの追加により更新されることがあります。定期的に VS Code のテーマや言語解析の更新を取り込むことができる仕組みになっているため、izanami でも新しい言語や最新のハイライトルールが自動的に反映される可能性があります。

他の言語やエイリアスについてはLanguagesでご確認ください。

例えば以下のようなエイリアスが使えます。

言語の例エイリアスの例
TypeScriptts
JavaScriptjs
GraphQLgql
Shellsh
Pythonpy
Rubyrb
Rustrs
Kotlinkt
Objective-Cobjc
Visual Basicvb
CodeQLql
Emacs Lispelisp
Kotlinkt
Markdownmd

不具合やエラーなどで動作が安定しない場合、他のシンタックスハイライトライブラリを採用する可能性があります。

画像は自動で figure に変換

画像を挿入すると、自動で `figure` タグで囲まれ、代替テキストは `figcaption` タグに変換されます。テキストが不要な場合は手動で削除できます。

バリデーション

高度なバリデーション機能により、安心して執筆および閲覧ができる環境

文章の質の検証

文章量、見出し数、ユーザーの読了時間の目安をリアルタイムで確認できます。

キーワード出現率

タグで設定したキーワードの出現率をリアルタイムで確認できます。

SEO スコア

SEO スコアメーターを見ながら、リアルタイムで文章のクオリティを確認できます。

カラーセマンティクスショートコード

ショートコードを使用することで、さまざまな種類の情報をカラーセマンティクスを活用して明示的に伝えられます。

情報を示す配色によって直感的に意味を伝えることで、ユーザーにとってよりわかりやすいデザインを実現します。

表の横幅を自動調整

表のコンテンツ量に応じて、自動的に横スクロールを有効にするか、画面にフィットさせるかを判定します。表によるコンテンツ崩れを防ぐため、読者はどのような端末でも快適に閲覧できます。

コンテンツが多い場合のテーブル
コンテンツが多い場合は、横スクロール可能になる
コンテンツが少ない場合のテーブル
コンテンツが少ない場合は、横幅に合わせてフィットする

タグの正規化

適度にタグの正規化を行います。

  • python →Python
  • パイソン → Python
  • 機会学習 → 機械学習

快適な UX でタグを追加

  • エンターキー、タブキー、半角カンマでタグを追加
  • トレンドを反映したサジェスト機能

読者に無益なタグをブロック

  • 不適切なタグ名のチェック
  • 繰り返し記号(### や .....)の排除
  • タグ名の重複チェック
  • 適切な文字数のチェック
タグ機能の説明画像タグ機能の説明画像タグ機能の説明画像

アイキャッチ画像の自動生成

記事一覧ページに表示されるアイキャッチ画像は自動で生成されるため、アイキャッチ画像を用意したり選択する必要がありません。自動生成されたアイキャッチ画像は読み込みのたびにランダムに変わります。

手動で静的なアイキャッチ画像を設定

自動生成される動的アイキャッチ画像が気に入らない場合は、手動でアイキャッチ画像を設定できます。

外来語と日本語の間に半角スペースを入れる

記事エディタの「クリーンボタン」を押すことで外来語(英単語)と日本語の間に自動で半角スペースが追加されます。

外来語と日本語の間に半角スペースが自動で挿入された例
半角スペースが入ることで日本語と英単語の境目が明確になり、読者が英単語のコピーをしやすくなります。

このルールは JTF 日本語標準スタイルガイドとは異なります。JTF 標準では、半角文字と全角文字の間にスペースを入れないことが推奨されていますが、本サービスでは可読性を重視し、スペースを入れる機能も実装しています。

izanamiでは、外来語と日本語の間に半角スペースを入れることを推奨しています。これにより、キーワード検索の精度向上が期待されます。

URL を iframe に変換

埋め込み用ウィジェットの例

前後に改行を入れてURLを貼り付けてください。
以下は、自動的に埋め込みコードに変換されます。

対応サービス

  • iframe 埋め込みコードは使用できません。

ブログカード

URL を貼り付けると整形されたブログカードが生成されます。

公開・下書きの切り替え

公開・下書きを簡単に切り替えできます。

コードの差分、ハイライト、フォーカス

コードブロック内でコメントを入れることで、コードの差分、ハイライト、フォーカスを表示できます。

差分表示
上図のコメントを入れることで、ハイライトや差分が表示される
フォーカス
1 行だけフォーカスし、他の行にブラー(ぼかし)がかかる

フォールドとアンフォールド

文字数が多くなりスクロール量が増えた場合は、アローアイコンをクリックしてセクションを折りたたんだり展開したりして、スクロール量を調整できます。

フォールド機能の画像

マルチカーソル

複数行を同時に選択できるマルチカーソル機能に対応しています。Alt + クリック(または Ctrl + クリック)でカーソルを追加してください。

マルチカーソル機能の画像

絵文字の利用

絵文字を挿入することができます。絵文字は検索できます。

絵文字の利用

キーマップ

エディタにフォーカスしている状態で、キーボードショートカットが利用できます。

キーマップWindows/LinuxmacOS
保存Ctrl + sCmd + s
コードを折りたたむCtrl + Shift + [Cmd + Alt + [
コードの折りたたみを解除Ctrl + Shift + ]Cmd + Alt + ]
すべてのコードを折りたたむCtrl + Alt + [Cmd + Alt + [
すべてのコードの折りたたみを解除Ctrl + Alt + ]Cmd + Alt + ]
行の先頭に移動HomeCmd + ArrowLeft
行の末尾に移動EndCmd + ArrowRight
行の上へ移動Alt + ArrowUpAlt + ArrowUp
行の下へ移動Alt + ArrowDownAlt + ArrowDown
行をコピーして上へ移動Shift + Alt + ArrowUpShift + Alt + ArrowUp
行をコピーして下へ移動Shift + Alt + ArrowDownShift + Alt + ArrowDown
行を削除Shift + Ctrl + kShift + Cmd + k
コードのコメントトグルCtrl + /Cmd + /
行のインデントを減らすCtrl + [Cmd + [
行のインデントを増やすCtrl + ]Cmd + ]
検索Ctrl + fCmd + f

izanami editor

Documentation

izanamiは、さまざまな分野のエンジニアと個人開発者が交流し、情報を共有するプラットフォームです。継続的に新しい技術を学べる場所を提供することを目指しています。プログラミング、デザイン、学術など、関心のある分野に関する作品やノウハウを発信してください。

Markdown 記法表

izanamiエディターで使用できる記法表です。1行ハイライト、コードフォーカスなどの拡張記法も扱えます。

izanamiエディター

マークダウンエディター。記事の 3 行要約、フィードバックの表示、文章の質の検証、タグの正規化など。

コンテンツ投稿ガイド

コンテンツの質や一貫性を保つために、編集や管理の過程で行われる一連のガイドラインや基準。

チームブログ

チームブログは、大人数で管理できるメディアを作る機能です。チームブログを無料で作成できます。

感謝メダル

感謝メダルを送ることで、その記事のユーザーに感謝の気持ちを伝えることができます。

スポンサー

ユーザーに 1 回以上「感謝メダル」を贈呈した方は、スポンサーとして表記されます。

リワード

リワードとは、メダルを贈呈された際に贈呈者が支払った金額から、その一部が受取者に支払われる金額です。

Habit

自分だけが確認できる、習慣を記録することができる機能です。

logo

エンジニアや個人開発者が
技術情報を投稿するための
プラットフォームです。個人開発アプリのPRにもどうぞ。

最新情報はこちら

Documents

  • Markdown 記法表
  • izanami エディター
  • チームブログ
  • Habit
  • 感謝メダル

Overview

  • izanami community
  • izanamiについて
  • Vision
  • Creator's Sponserとは

Guideline

  • コンテンツ投稿ガイド
  • コミュニティガイドライン
  • ブランドガイドライン
  • よくある質問

Compliance

  • Terms
  • 特商法表記
  • Privacy Policy
  • Service Provider
©izanami
  • logo
    • Log in