herohoroブログ

simple Tableを使って進捗管理やマークダウン記法での表を作ろう



🔄   2022-08-02

simple tableがAPIに追加されました。

即効アルパカ先生にメンション付けてツイート(*^^*)♫

easy-notion-blogに1/10(日)追加されました\(^o^)/

https://github.com/otoyo/easy-notion-blog/pull/21

simple tableの呼び出し方

image block

【Table】を選ぶ

image block

使うとこんな感じ

▼Notion内での見え方

image block

▼ブログ上での見え方

A列B列
1行A1B1
2行A2B2

列名や行名の部分を塗る

Optionsをクリック

image block

【Header column】【Header row】をONにする

image block

▼ Norion内での見え方

image block

▼ ブログ上での見え方

A列B列
1行A1B1
2行A2B2

実際に使ってみる①

Next.js Learnで学んだことをGitHubにまとめた目次

image block

https://github.com/herohoro/next.js_learn

これ、実はNotionで下書きをしてました。。。

image block

👆

この表をブログで公開すればわざわざリポジトリのREADMEを経由せずにアクセスできる!

やってみよう\(^o^)/

Learn_section名Learn_lesson名概要対応commit
Create a Next.js AppSetup準備first
Create a Next.js AppEditing the Page見出し文字を編集Edit page_h1
Navigate Between PagesPages in Next.jsページ作成Add posts/first-post
Navigate Between PagesLink Componentページ間リンク設置Add link_pages
Assets, Metadata, and CSSAssets画像追加Add profile.jpg
Assets, Metadata, and CSSMetadataタブ名変更Add tabName
Assets, Metadata, and CSSThird-Party JavaScriptログ仮設置Add script_console-log
Assets, Metadata, and CSSLayout ComponentLayoutで装飾Add first-post_CSS
Assets, Metadata, and CSSGlobal Stylesglobal cssで<a>文字色変更global.css <a>color
Assets, Metadata, and CSSPolishing Layout条件分岐でLayoutや文字回り(utils)の装飾Add 条件分岐でLayout_CSS
Pre-rendering and Data FetchingImplement getStaticPropsmdデータの取得後一覧表示Add mdデータを収集して一覧表示にする
Dynamic RoutesImplement getStaticProps,Implement getStaticPaths本文の一部を表示Add 本文表示
Dynamic RoutesRender Markdown本文全内容を表示Add 本文内容表示
Dynamic RoutesPolishing the Post Page本文タイトル・日付の装飾CSS 本文と日付
Dynamic RoutesPolishing the Index Pageページ間リンクAdd homeから各ページリンク
API RoutesCreating API RoutesAPIを使って簡単表示Add api
⚠️
Sync設定をしている表は非表示になっちゃう!!

※ 「Next.js Learn で作ったコード【まとめ】」にも表を追記しました〜〜〜

実際に使ってみる②

今までsupport確認用ページをNotion上で公開してました。

このページの中にsimple tableを埋め込んで進捗報告をしてました。

image block

simple tableが使えるようになったので

公開pageを経由しなくても確認できるようになった\(^o^)/

埋め込んでみると・・・・

image block

ブログではこんな感じ

image block

https://herohoro.com/blog/support_check

Notionのtable小ワザ

simple tableをコピーしてマークダウンで記入するような場所に貼り付けると

普通にマークダウン版の表に変換してくれます。

  • VSCode
image block

テキストにリンクを埋め込んだ状態で貼り付けるとテキストのみになってしまう。

貼り付けた後、リンク埋め込みの修正が必要😅

image block

  • GitHub comment
image block

image block

マークダウンで記入するのは個人的に苦手なので

他の部分もNotionでの下書きを経由してから作成していたりしますm(_ _)m

Notion便利(*´ω`*)

下書きした表をそのままブログに活用できてしまうのは画期的\(^o^)/

今回追加された機能に関するコードはこちら

https://github.com/otoyo/easy-notion-blog/pull/21

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/