キンコミ kintone user community

みんなの投稿

キンコミエディターのマークダウン記法について

「kintoneでやりたいこと実現するには?」に関する話題でなくてすみません。

キンコミのエディターでマークダウン記法で表を書き、所望の見栄えで表示できるように設定変更した(変更できた)!という方、いらっしゃいませんか?

可能であれば、そのノウハウを知りたく。(検索ワードや関連URLのご提示だけでも結構です。)

小生、添付のように拡張機能で表示検証したマークダウン記法の表をどうやっても所望の見栄えで表示できないんですよ…💦
(左方のソース(?)でしか見えてません。)

Webでもそれについて検索できず、キンコミ運営にも相談しましたが先方の環境ではキチンと表示されているとのことで、八方塞がりな状態です。

何卒よろしくお願いします🙇🏻

3件のコメント (新着順)

続報です。

先ほど、運営との打ち合わせ終了しました。

[結論]
●中央揃えの指定は「:- … -:」を使用すること。
●表の前後には空行を挿入すること。
●行頭・行末のバーティカルバー(|)は書いても書かなくてもOK👍
が記法のお作法です。

以下に書いてみました。
"名前|年齢|出身地"
":-:|-:|:-"
"田中 太郎|28|東京都"
"佐藤 花子|24|大阪府"
"鈴木 一郎|35|愛知県"

名前 年齢 出身地
田中 太郎 28 東京都
佐藤 花子 24 大阪府
鈴木 一郎 35 愛知県

おぉ、見えてますね。(謎の空白行も消えてます。)

ちなみに、-をセル幅指定に使うと…
"|名前|年齢|出身地|"
"|:-------------:|--------:|:----------|"
"|田中 太郎|28|東京都|"
"|佐藤 花子|24|大阪府|"
"|鈴木 一郎|35|愛知県|"

名前 年齢 出身地
田中 太郎 28 東京都
佐藤 花子 24 大阪府
鈴木 一郎 35 愛知県

う~ん🤔
それぞれの幅が狭まるのかと思いきや、こちらはコメント表示領域幅を100%として、列数分均等割り付けで動いているようです。(もしかしたら、データを半角スペースでラップしたらうまく行くのかもしれませんが、拘ってもあまり意味ないですね…)

松井のテスト
2025/03/21 09:03

コメント欄お借りします...

↑空行 タイトル1 タイトル2
↓空行 Data1 Data2

松井のテスト
2025/03/21 09:04

"|↑空行|タイトル1|タイトル2|"
"|:--|:--:|:--:|"
"|↓空行|Data1|Data2|"

松井のテスト
2025/03/21 09:05
↑空行 タイトル1 タイトル2
↓空行 Data1 Data2
ふゆき
製造業
2025/03/08 00:12

自分の場合、
「表テーブル作成ツール」という
Webサイトを利用しています

①Excelで表を作って
②表のエリアをcopy
③下記Webサイト貼り付け
 https://notepm.jp/markdown-table-tool
④Markdownのタブのエリア上に現れる
 「クリップボードにコピー」釦を押下げ
⑤キンコミ文中に貼り付け
【表の前後は改行で空行を設けてください】

DATE_CALC DATE_DIFF DATE_FORMAT
指定した内容で日付計算を実行 指定した期間の経過日数を取得 指定した形式で日付を文字列にする
年/year 年/Y 年/Y
月/month 月/M (この表示形式には経過年以降の残月数が入る) 月/m (ゼロ埋めの2桁)
日/day 月/FM (この表示形式には経過期間の総月数が入る) 日/d (ゼロ埋めの2桁)
時/hour 日/D (この表示形式には経過月以降の残日数が入る 時/H (ゼロ埋めの2桁)
分/minute 日/FD (この表示形式には経過期間の総日数が入る) 分/i (ゼロ埋めの2桁)
年初/first-of-year
月初/first-of-month
週初/first-of-week

こうなります...なったかな?





かな
建設業
2025/03/08 15:45

おぉ✨素晴らしく美しい🤩
このサイトめちゃくちゃ良いですね!
サイト上で簡単に入力出来て、プレビューできるのも最高です✨

ふゆき
製造業
2025/03/08 16:10

Seal777 さん

ご_ゴメンナサイm(__)m

マークダウン記法の表をどうやっても所望の見栄えで表示できないんですよ…💦

でしたね...自分も、たまになりますヨ(たまにしか使わないけど)
、で
【表の前後は改行で空行にする】ことで解決しているきがします
  =表の上下で「 Enter 」

解決しなかったら、スミマセンm(__)m

情報ありがとうございます。
そうなんです。
お聞きしたいのは、

コメント文中にテーブルタグで書いた表を仕込むには?

ではなく、

コメント文中に置いたマークダウン記法で書いた表を、正しく表示させるには?

なのです。

【表の前後は改行で空行にする】

も、これは!と思って試してみましたが、

|↑空行|タイトル1|タイトル2|
|:--|--:--|--:--|
|↓空行|Data1|Data2|

↑は添付図のように見えています。(マークダウンのまんまですね😢)

ふゆき
製造業
2025/03/10 07:55

Seal777さん、だから 当然 試してるんだろーなー
って思いながら書いたんですが...やっぱりですか

あー でも、どっかのコメントで
Seal777さんの「表」ちゃんと表示されてるのみかけましたよ
(今 その表 探したけど、見つけられませんでした..
        お気に入り登録しておけばよかった、失敗)

で、自分の「赤文字」装飾で書いた直後にみたら
装飾されてなくれ、しばらくして、見直ししたら
装飾されているなんて事もあったので...

ブラウザ側の問題も考られるかな~?
お役に立てず、スミマセン m(__)m

追記です、上記Webサイトへ 一度貼り付け後に
下記へ、コピペしてみました

↑空行 タイトル1 タイトル2
↓空行 Data1 Data2

どっかのコメントで
Seal777さんの「表」ちゃんと表示されてるのみかけましたよ

それ、添付図のようにテーブルタグでゴリゴリ書き直した表です。
(多分、 https://kincom.cybozu.co.jp/chats/jcgru57xuxaqodrq だと思います。)

マークダウンで書くと、どうしても小生のブラウザに表形式で表示されないので、急遽(シレっと)書き直しました。←今は「文中・表」で書きたい時は、テーブルタグで直接書くことにしています。

ちなみに、ふゆきさんって小生の前出のマークダウンで書いた表、表で見えていますか?

ふゆき
製造業
2025/03/10 11:10

そー、それです...「テーブルタグ」って勉強不足わからないんですが
そんな方法もあるんですね

前出のマークダウンで書いた表、表で見えていますか?

以前お世話になって、覚えたコード記法で(コピペ)書いてみます

|↑空行|タイトル1|タイトル2|
|:--|--:--|--:--|
|↓空行|Data1|Data2|

こんな感じにみえてます
そのまま、コピペだと

|↑空行|タイトル1|タイトル2|
|:--|--:--|--:--|
|↓空行|Data1|Data2|

こんな感じです

あれ?コピペは、ダメみたい
さっき、Webサイト経由コピペ なら OKだったのに?

なんか
「Markdownテーブル」 と
「Markdownテーブル」 って
書き方が違うかもしれない🦆かも

検証、ご連絡ありがとうございます。

あれ?コピペは、ダメみたい
さっき、Webサイト経由コピペ なら OKだったのに?
 
なんか
「Markdownテーブル」 と
「Markdown表テーブル」 って
書き方が違うかもしれない🦆かも

ご紹介いただいたWebサイトは、マークダウンコードをテーブルタグに変換するものなので、書き方が違うのは当然と言えば当然なのかもしれませんね。

やはり、マークダウンコードだけで表形式で表示されている方っていらっしゃらないのかもしれません。

も少し運営に突っ込み入れてみまーす🤔

かな
建設業
2025/03/10 12:04

またまた横から失礼します!

もしかしてですけど、表記する文字の前後に半角スペースがいるかもです!

ふゆき
製造業
2025/03/10 12:20

| ↑空行 | タイトル1 | タイトル2 |
| :-- | --:-- | --:-- |
| ↓空行 | Data1 | Data2 |

こんな感じですか?

何回か試して、うまくいかないので
Webサイト経由を、コード記法でコピペしてみます

| ↑空行 | タイトル1 | タイトル2 |
| :----- | ---------: | ---------: |
| ↓空行 | Data1 | Data2 |

かな
建設業
2025/03/10 12:20

それが手入力で表示がきちんとされないバージョンですね!

| ↑空行 | タイトル1 | タイトル2 |
| :-- | --:-- | --:-- |
| ↓空行 | Data1 | Data2 |

⇧これだとダメで
⇩これだと行けてます。



↑空行 タイトル1 タイトル2
↓空行 Data1 Data2




どうやら上下の「|」←これの行数を合わせないといけないようです。
ただキンコミのエディター内でやると難しい(Markdownサイトからコピペしたものでも見た目がズレる)ので、ここで作成したものをコピペ→Markdownを挟む(入力の手間を考えたらMarkdownで作った方がラクかもしれませんね)のが無難そうです。

ふゆき
製造業
2025/03/10 12:37

おー、なるほど、

「-----」が Excelのセル幅調整みたいの役割なんですね
     ( ≒ 文字バイト数の指定)
そして、
「:」が 文字位置の指定なんだ

勉強になります、ありがとうございます。

検証、ご連絡ありがとうございます。

マークダウンで「-」はセル幅調整用、「:」は文字揃え位置の指定用

なのはその通りなのですが、問題は「マークダウン記法(文法)そのままに表形式で表示させたい」ということです。

皆さんご提示の方法に沿って説明すると、
①所望の表をマークダウン記法(文法)で
https://notepm.jp/markdown-table-tool に書き、
テーブルタグに変換してキンコミエディターに貼り付け、
④[返信する]などで投稿する。(と表形式で表示される)

①所望の表をマークダウン記法(文法)で
②キンコミエディターに直接書き
③[返信する]などで投稿する。(と表形式で表示される)
と、前出の②、③を簡素化したいのです。

前後の半角スペースや文字揃え位置云々は、markdown-table-tool に閉じるお作法です…残念ながら

ちなみに、テーブルタグで文字揃えを書くと、
<table>
<th style='text-align:center'>中央揃え</th><th>デフォルト</th><tr>
<td style='text-align:left'>左揃え</td><td style='text-align:right'>右揃え</td><tr>
<td style='text-align:right'>右揃え</td><td style='text-align:left'>左揃え</td>
</table>
で、↓こんな感じです。





中央揃え デフォルト
左揃え 右揃え
右揃え 左揃え

(手打ちだと、前後に謎な空白行が入りますが…)

かな
建設業
2025/03/10 14:15

うーん、、やはりそこまで行くとエンドユーザー側では解決難しそうですね。。💧
(少なくとも私には無理だ(;^ω^))
キンコミの開発サイドで表挿入エディターとか作ってくれたら良いのになぁ、という感じですね|ω・)

キンコミの開発サイドで表挿入エディターとか作ってくれたら良いのになぁ、という感じですね|ω・)

そうですよねぇ…同感です。
キンコミ運営に突っ込む際、その辺のところも打診してみますね。

ちなみに、かなさんの環境では、マークダウンコードでの表は表形式で見れてますか?

「見れてない!」声が集まれば、運営にも打診しやすくなるので…

かな
建設業
2025/03/10 14:55

そうですね!

全然見れてないですw(素?の状態ですね)
他のマーク(見出しとか太文字とか)もエディター画面では変わったか分からないので、(マークを)覚えてなくて思いがけず見出しとか太文字になることありますねw

続報です。

本件について、運営に問い合わせたところ、打ち合わせをもつことになりましたので、ご報告します。

また、かなさんの

表挿入エディターとか作ってくれたら良いのになぁ、

に触発され、JavaScriptの勉強がてら覚えたての生成AI+VS Codeで添付のような簡易ツールを作ってます。
([Preview]ボタン押下でそれなりの文字列にしてクリップボードに送るだけですが、ブラウザに別タブで表示⇒クリップボードの文字列をキンコミエディターにペーストとできれば、文法気にしなくてもよくなるかなぁ…と思ってます。)

目標は「キンコミエディターに搭載」なんですけどね。

ご参考まで

かな
建設業
2025/03/12 17:58

おぉ〜✨👏👏✨
アップロードされるのを楽しみにしています!!

ツール、作って上げてみました。

https://kincom.cybozu.co.jp/chats/ujlqe7kicax4kvjl

お使いいただいて、ご意見等あればお願いします🙇🏻
(運営側に了解とっていないので削除されるかもですが…)

ふゆき
製造業
2025/03/17 14:24

(運営側に了解とっていないので削除されるかもですが…)

削除される前に、ダウンロードしました
使用はこれからですが、パッ見 便利そうなので
使わせていただきます、ありがとうございます!

※ ショートカットをブックマークしました!

ふゆき
製造業
2025/03/17 14:42

わがままいって申し訳ないですが

2つ 追加してもらえませんか?

①コード記法
②リンク記法

2つ 追加してもらえませんか?

マジっすか?😁💦
②リンク記法
 入れ込み検討してみます。

①コード記法
 技術的には出来ますが、
 自動計算式を書くのによい記法だと思いますが、同時に(キンコミでNGとされてる)JavaScriptなども載せやすくなってしまうため、運営側との調整が要りそうですね…
 本件は、運営OK出たら搭載検討してみます。

ふゆき
製造業
2025/03/17 15:05

なるほど~
以前、Seal777 さんにお世話になった「コード記法」は...
これ、結っ構ー 計算式を正確に伝える為には必要なんだけどな~

まー、JS,CSS,のコードも書けちゃいますから
しょうがないですね、とりあえず、コード記法だけは
今までの方法で書いておきますので、無理しないで下さい。

②リンク記法

入れ込んでみました。
いかがでしょうか。

 「マークダウンエディタ for キンコミエディタ」を作ってみました。

↑コレもEasyMarkdownで書きました。

ふゆき
製造業
2025/03/17 17:01

お礼

ありがとうございます!!!

使わせていただきます!!!