初心者のFileMaker pro Q&A (旧掲示板)

みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。

1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 （優しく回答しましょう）

You are not logged in.

Announcement

新しい掲示板は、こちら:https://fm-aid.com/forum/t/filemaker

Pages: 1

#1 2022-11-28 14:03:04

ヨッシー
Guest

FileMaker ProでMark Down文書を作成

プログラムは組めないのですが、そんな人間にも優しいFileMaker Proが好きになって、仕事でちょっとしたことに使えるファイルなどをちまちまと作っている者です。

表記の件で質問させてください。
部署マニュアルや個人マニュアルをMark Downで作成したいと思い、こちらの記事（https://www.fairmind.jp/staff/2014/12/22/web-viewer-markdown/）を参考にファイルを作りました。グローバルフィールドの内容をWebビューアに読み込ませる形なので、表示自体はすぐできました。しかし、表示結果がイメージ（例えば「Markdown Guide Basic Syntax（https://www.markdownguide.org/basic-syntax/）」とはだいぶ異なっていました。せめて、先のイメージのものが表示できるようにしたいのですが、どのようにしたら良いか分かりません。
ご教示いただけましたら幸いです。よろしくお願い致します。


参考にさせていただいた記事で、Webビューアに貼り付けるとされている内容は以下のようになっています。

"data:text/html,<!DOCTYPE HTML>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>markdown</title>
</head>
<body>
<div id='result'></div>
<script>
void function(document, global){
    var result = document.getElementById('result');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.github.com/markdown/raw');
    xhr.setRequestHeader('Content-Type', 'text/plain');
    xhr.onload = function(e){
        result.innerHTML = xhr.responseText;
    };
    xhr.onerror = function(e){
        alert('errer');
    };
    xhr.send('" & Substitute ( markdown::input ; ¶ ; "\n" ) & "');
}(document, this);
</script>
</body>
</html>"


表示は「Markdown Guide Basic Syntax（https://www.markdownguide.org/basic-syntax/）」をイメージしておりましたが、いくつかの点で異なっています。主に困るのは、

・罫線が表示されない
|  TH  |  TH  | TH  |   TH TH TH
| ---- | ---- |---- |  ⇒ TD TD TD
|  TD  |  TD  | TD  |   TD TD TD
|  TD  |  TD  | TD  |

・インライン（記法：「' text '」）は、「text」のフォントが変わりサイズが少し小さくなる程度なので分かりづらい
・引用は、その文字列がインデントされるだけなので分かりづらい
・リンクが、特定の場所に固定される（例：「![needs](needs.jpg) ⇒ 「file:///C:/Users/****/AppData/Local/Temp/needs.jpg」） など


※ 「Markdown Thing」や「MD Stocker」を拝見しました。こんなものを自分も作れるようになりたいと思いますが、現状私には全く理解が及びませんでした。
※【動作環境】
OS Windows11 Pro
FileMaker Pro17

#2 2022-11-28 14:45:09

qb_dp
Member

Re: FileMaker ProでMark Down文書を作成

stylesheetの適用が必要です。
赤文字が追加部分です。

"data:text/html,<!DOCTYPE HTML>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>markdown</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css'>
</head>
<body>
<div id='result' class='markdown-body'></div>
<script>
void function(document, global){
    var result = document.getElementById('result');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.github.com/markdown/raw');
    xhr.setRequestHeader('Content-Type', 'text/plain');
    xhr.onload = function(e){
        result.innerHTML = xhr.responseText;
    };
    xhr.onerror = function(e){
        alert('errer');
    };
    xhr.send('" & Substitute (  markdown::input ; ¶ ; "\n" ) & "');
}(document, this);
</script>
</body>
</html>"

Last edited by qb_dp (2022-11-28 14:46:09)

Offline

#3 2022-11-28 16:31:17

ヨッシー
Guest

Re: FileMaker ProでMark Down文書を作成

qb_dp様

ご返信いただき、ありがとうございました。
早速試したところ、いくつか改善されました。しかし、他のフォーマットを含めて改善されないところと、逆に機能しなくなったところがありました。


＜改善された点＞
・表の罫線が入らない ⇒ 罫線が入り、一番上の行の文字がbold、1行ごとに背景色が付く
・引用 ⇒ 文頭の左にグレーの縦線が入り、見やすくなった
・コード（「'''text'''」） ⇒ textに背景色が付き、見やすくなった
・インライン（「'text'」）⇒ textに背景色が付き、見やすくなった


＜改善されない点＞
・リンクが、特定の場所に固定される（例：「![needs](needs.jpg) ⇒ 「file:///C:/Users/****/AppData/Local/Temp/needs.jpg」）
・タスクリスト（「-[ ]」）⇒ このまま（「-[ ]」）で表示される
・detailタグ ⇒ 機能しない

<details>
<summary>xxx</summary>  ⇒  xxx
aaaaaaaaaaaaaaaaaaaaa        aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccc
</details>


＜機能しなくなった点＞
・斜体 ⇒ 太字表示になる


これらの中であと「斜体」と「リンク」が正常に動けば、とてもありがたいです。style sheet(CSS)も覗いてみましたが、すみません、怖くて触れませんでした。

※「Markdown Thing」を作られた方ですよね。お返事をいただけて光栄です。「Markdown Thing」の画面や処理の仕方は、自分にはまだ分からないことだらけですが、とても勉強になります。ありがとうございます。

#4 2022-11-28 17:52:38

qb_dp
Member

Re: FileMaker ProでMark Down文書を作成

・リンクは、フルパスで書かないと、FileMakerの作業フォルダになります。
・チェックボックスは、HTMLタグが帰ってきてないようです。(api.github.com/markdown は、あまりイジたコト無いので不明)
・detailタグ 動いています。
・斜体 日本語は非対応の模様
・斜体 ⇒ 太字表示になる 再現せず

※stylesheet最新版
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.css'>

00d312a649bc6f39b268316e00e5a164.png

Offline

#5 2022-11-28 18:51:58

ヨッシー
Guest

Re: FileMaker ProでMark Down文書を作成

見やすい表を付けていただきありがとうございます。

・チェックボックスは、HTMLタグが帰ってきてないようです。(api.github.com/markdown は、あまりイジたコト無いので不明)
・detailタグ 動いています。
・斜体 日本語は非対応の模様
・斜体 ⇒ 太字表示になる 再現せず

上の部分は確認しました。


・リンクは、フルパスで書かないと、FileMakerの作業フォルダになります。

こちらについて、画像ファイル（needs.jpg）がデスクトップ上の「MD」フォルダ内にあるのでパスを以下のように書きました。

![needs](file:/C:/Users/****/Desktop/MD/needs.jpg)

そうしますと、画像は表示されず、リンクの文字列を拾うと、
file:///C:/Users/****/AppData/Local/Temp/  となります。もしかして、「フルパスで」という理解から間違っていましたら申し訳ありません。

#6 2022-11-28 19:05:06

ヨッシー
Guest

Re: FileMaker ProでMark Down文書を作成

一点、間違いがあり補足します。

・detailタグ 動いています。

  この部分ですが、よく見たら動きませんでした。「xxx」はリンクの表示なっているのですが、クリックしても展開しませんでした。こちらのFileMaker Proはバージョン17なので、その違いによるのでしょうか？

#7 2022-11-29 08:56:22

qb_dp
Member

Re: FileMaker ProでMark Down文書を作成

FileMaker Pro 17は、WEBビューアがInternet Explorer ベースのエンジンなので、detailタグに対応していないようです。
FileMaker Pro 19.3.1 以降は、Microsoft Edge WebView2 エンジンに変わっています。
https://support.claris.com/s/article/Cl … anguage=ja

Offline

#8 2022-11-29 09:10:31

qb_dp
Member

Re: FileMaker ProでMark Down文書を作成

Internet Explorer ベースのWEBビューアでも以下を入れると detail が動くようです。

<script src='https://cdn.jsdelivr.net/npm/details-polyfill@1.2.0/index.min.js'></script>

https://www.jsdelivr.com/package/npm/details-polyfill

Offline

#9 2022-11-29 09:34:17

ヨッシー
Guest

Re: FileMaker ProでMark Down文書を作成

おはようございます。

返信をありがとうございます。いただいた文字列を入れると、動きました。しかし、展開した選択項目が1行で表示されたので、選択肢の末尾に半角スペースを2つ入れたところ、改行されて展開できました！

リンクの改善は、なかなか難しいでしょうか？

#10 2022-11-29 09:37:36

Shin
Member

Re: FileMaker ProでMark Down文書を作成

アクセス権が必要なのでは。

Offline

#11 2022-11-29 10:18:57

himadanee
Guest

Re: FileMaker ProでMark Down文書を作成

フルパスは「リンクの文字列を拾うと」に倣って
file:/C:/Users/****/Desktop/MD/needs.jpg
でなく
file:///C:/Users/****/Desktop/MD/needs.jpg
にしてみたらどうですか。
file:のURLもhttp:と同様//から始まるのが正式で、ホスト名がないのでスラッシュ3つになりますので。

![needs]のあたりは全く意味が解ってないのでコメントしないでいましたが...

#12 2022-11-29 17:35:51

qb_dp
Member

Re: FileMaker ProでMark Down文書を作成

ローカルパスだと、imgタグの src が空で返ってきています。
https:の場合でも、画像が camo.githubusercontent.com にキャッシュされそのパスが、src に設定される特殊仕様のようです。

Offline

#13 2022-11-29 22:10:41

ヨッシー
Guest

Re: FileMaker ProでMark Down文書を作成

himadanee様
コメントをありがとうございます。
file:///C:/Users/****/Desktop/MD/needs.jpg と入力しますと、
  ↓
file:///C:/Users/****/AppData/Local/Temp/ と返ってきてしまいました。

「![needs]」の部分は、画像リンクのMarkdown記法で、「![代替テキスト](画像URL )」だそうです。



Shin様
コメントをありがとうございます。

アクセス権をWindows11の設定から「ユーザーアカウント」で確認しましたが、「管理者」となっています。ご指摘いただいているアクセス権はもっと別のものでしょうか？



qb_dp様
ありがとうございます。
ご指摘の内容は「特殊仕様なので、これはもう仕方がない」という理解でよろしいでしょうか？

しかし、あれやこれやと試した結果、「![needs](/../image/needs.jpg)」と入れてみると、「file:///C:/image/needs.jpg」となり、「image」フォルダが使えることが解りました。仕様として仕方がないのであれば、今回は「image」フォルダを使う形で良しとしようかと思います。

#14 2022-11-30 08:41:39

Shin
Member

Re: FileMaker ProでMark Down文書を作成

ローカルでの運用でしたね、アクセス権は管理者でしたら関係なかったです。

Offline

#15 2022-12-01 20:57:02

ヨッシー
Guest

Re: FileMaker ProでMark Down文書を作成

メッセージをいただきました、qb_dp様、Shin様、himadanee様、ありがとうございました。

#16 2022-12-02 09:46:02

qb_dp
Member

Re: FileMaker ProでMark Down文書を作成

先頭を / (スラッシュ)にすると src の値が戻るようなので、以下のようにすると「image」フォルダ意外も使えます。

マークダウン
![needs](/C:/Users/****/Desktop/MD/needs.jpg)

WEBビューア 記述
result.innerHTML = xhr.responseText.replace('href=\"/', 'href=\"').replace('src=\"/', 'src=\"');

Offline

Pages: 1

Registered users online in this topic: 0, guests: 1
[Bot] ClaudeBot

Board footer

Powered by FluxBB
Modified by Visman

[ Generated in 0.007 seconds, 9 queries executed - Memory usage: 600.86 KiB (Peak: 617.77 KiB) ]