月別アーカイブ: 2021年9月

月曜日連載! Microsoft Wordスタイル探索 (34)HTMLとはなにか。だれが決めているのか。

来る10月12日(火)16時からの「ちょっと一息・アンテナハウスウェビナー」は、

WordでHTMLを書けたらスゴイ!という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックで開催する予定です。

次の画像をクリックするとウェビナー案内ページが開きます。

関心をお持ちの方は、ぜひ、ご参加ください。

さて、このブログをお読みいただいている方でHTMLという言葉を知らない人は少ないと思います。しかし、HTMLという言葉を知っている人でも、HTMLとはどういうもので、どのように使うのか、そもそも誰が決めているのか? について詳しく知っている人は少ないのではないでしょうか。そこで、まずHTMLとはなにか。誰が決めているのか。について極簡単に紹介してみます。

HTMLの概念はWebとともに誕生したものです。Webの基本概念を作り出したのはTim Berners-Leeです。彼の書いた“Weaving the Web”という本によると、1990年頃からWebを構成する3要素であるURL(資源の場所を特定する)、HTTP(通信規約)、HTML(ハイパーテキスト記述言語)を構想したようです。

Webが世間に登場したのは1990年代前半ですが、Webが一般に流行りだしたのは、1990年代後半です。ちなみに、アンテナハウスのWebサイトは1996年に開設しました。

そのころからW3C(Tim Berners-Leeが中心になって設立したWeb標準化コンソーシアム)でHTML拡張と標準化がすすめられました。

HTML3.2 (1997年1月W3C勧告、2018年3月に譲位)
HTML 4.01(1999年12月W3C勧告、2018年3月譲位)
XHTML1.0 (2000年1月W3C勧告、2018年3月譲位)
HTML5(2014年10月W3C勧告、2018年3月譲位)
HTML 5.1 (2016年11月W3C勧告、2017年10月第2版、2021年1月に譲位)
HTML5.2(2017年12月W3C勧告、2021年1月に譲位)

譲位という概念は難しいですが、W3Cの勧告が放棄される状態は次の3種類があると説明されています。

W3C勧告の放棄

W3C勧告の放棄


W3C Process Document、6.2.12.3. Abandoning a W3C Recommendation

ここではSupersededの状態を譲位と表現しました。譲位された仕様の参照先はすべて、HTML Living Standardとなっており、HTML Living StandardがWebページを記述するための、現在有効な唯一の仕様となります。

この10年ほどHTML5という言葉が、Webページの代名詞になっていました。W3Cの仕様ではHTML5という言葉が仕様の名前として使われています。

それに対して、HTML Living StandardのページではHTML5という言葉は、現代のWeb技術を表すバズワードであるとされています。
1.2 Is this HTML5?

HTML5はもはや特定のHTMLを示す用語ではなくなったことになります。

また、HTML Living StandardではXHTMLという用語はなくなってしまい、代わりにHTMLをXML文法で書く方法が規定されています。

1.8 HTML vs XML syntax
——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (33)Word文書からWebページ(HTML)変換について考える
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)


e-na伊那谷 旅便り 第76回 そばを蒔く

信州はそばの産地です.ここ上伊那地方でも、転作水田には小麦や大豆とともにそばがよく栽培されています.今年は土蔵の後ろの田んぼは転作作物としてそばを蒔くことにしました.約10.2aの小さな田んぼです.

そばには夏そばと秋そばがあります.7~8月に収穫するのは夏そば、10~11月に収穫するのを秋そばと言います.わたしの界隈ではおよそ秋そばを栽培しています.秋そばは播種の時期が8月上旬なので5月から播種までは雑草が生えないようにトラクタで毎月耕起してやります.あと肥料として炭酸苦土石灰と鶏糞をブロードキャスタで散布しトラクタで埋め込みます.なかなか準備も大変です.

そばを蒔くにはまずそばの種子を購入しなければなりません.7月の末から農協で販売してくれていますので、それを6kgほど購入してきました.信濃1号という信州そばの王道の品種です.

そばを蒔くのはどうするのでしょう?実は手で蒔くなんていうことはまずやりません.普段は粉剤や粒剤の農薬を散布するのに使用するエンジン付きの散布機で行います.下は散布機に種子をいれたところ.背負い式なので蒔いた分量をときどき確認しながらエンジンをかけて均一になるよう散布します.

播種が終わったら、トラクタで軽く耕起して種子に土を被せます.早いもので、3から4日するとニョキニョキと芽がでてきます.

もう少し成長するとこんな感じになります.

そばには除草剤は要りません.よく小麦や大豆だと雑草にやられて大変な目にあうのですが、そばは根から雑草の生育を抑制する物質が出ているそうです.確かにそば畑は小麦や大豆などにくらべると雑草が少なく管理が楽です.

さて8月の下旬になるとそばは一斉に開花します.


あとは蜂やアブが受粉に来てくれることを祈るばかりです.他家受粉なので、これらの生き物が花粉を運んでくれないと花は咲いても実がつきません.自然って大事ですね.

丁度田んぼの稲刈りの季節が重なって、土手の曼珠沙華の花とマッチしてとてもきれいです.

あとは10~11月の収穫が楽しみです.上伊那地方では地元産のローカルなそばを売っています.もしかしたら私の家のそばも出荷したら、みなさんのお手元に届くかもしれません.

アンテナハウスブログ「I love Softwere2!」で連載の「e-na 伊那谷 旅便り」を再構成してWeb「e-na 伊那谷 旅便り」にまとめました。


【10月13日】「改正電帳法をまず1カ月無料で、要件確保も独自でやりきる方法を学べる」【ウェビナー】

こんな方にお薦めの「改正電帳法をまず1カ月無料で、要件確保も独自でやりきる方法を学べる」無料ウェビナーのご案内です。

  • 改正電帳法の新旧比較概要を完全把握したい
  • 改正電帳法要件確保の「e-Success」の製品&サービス概要とデモを見たい
  • 「e-Success」の無料体験版の入手方法が知りたい
  • 専門コンサルタントの無料コンサルを受けてみたい
  • 「e-Success」のキャンペーン制度を聞きたい
  • ウェビナーアジェンダ

    1. Section1 改正電帳法の新旧比較と詳細要件 25分
    2. Section2 「e-Success」の概要とユーザー事例等 10分
    3. Section3 「e-Success」のデモ・無料体験版・キャンペーン等 15分
    4. Section4 質疑応答:(事前に受付可能) 10分

    改正電帳法をまず1カ月無料で、要件確保も独自でやりきる方法を学べる ウェビナー

    日時:
    2021年10月13日(水)15:00~16:00
    概要
    改正「電帳法」の新旧比較と詳細要件を正確に説明させて頂きます。
    アンテナハウス製「e-Success」(イーサクセス)の概要とユーザー事例等を説明し、「e-Success」のデモ・無料体験版・キャンペーン等のご案内をさせて頂きます。また、日頃疑問に感じておられることに対して、講師との質疑応答タイムを設けております。
    内容紹介・お申込みページ
    こくちーずプロからお申し込み:
    https://www.kokuchpro.com/event/ahwebinar20211013/
    Zoomウェビナーへ直接お申込みいただく場合:
    https://zoom.us/webinar/register/3916309836961/WN_sj9eVnaRSJeMU-opXxrYHA

XSL-FO試行錯誤 スライドPDFをXSL-FOで組む

以前に、スライドをXSL-FOで作成した例をご紹介しました。
今回、明日9/17(金)17時よりオンライン開催される「FormatterClub2021」用のスライドを改めてXSL-FOで作成したのでご紹介します。

まずは明日の宣伝です。

FormatterClub2021ウェビナー

【どなたでも無料視聴可能】

日時
2021年9月17日(金)17:00~18:10
概要
今回のFormatterClubでは、キヤノンの吉田一様にFormatterでのマニュアル作成と自動組版の取り組みを発表していただく他、XSL拡張仕様のご説明、AH Formatterの今後をご紹介を致します。
内容紹介・お申込みページ
ウェビナー登録ページ

今回はPowerPointで下書きを作成した後、清書をXMLで行い、XSLTでXSL-FOに変換するという方法を取っています。以前のウェビナーではPowerpoint原稿をそのまま使ったのですが、見出しや各箇所の文字サイズといった、同じ内容の繰り返しが多い事柄に対し個別に変更を行っていくのはちょっと辟易してしまったためです。
Powerpoint文書もXMLの集合ではあるのですが、PresentationMLはとくにDrawingML色が強く、いってみればグラフィカルな配置に重点が置かれているため、「流し込んだら良い感じに自動配置してほしい」といった要求のための元テキストを得るのは恐らくWord以上に困難です。

XSLTのバージョンは3.0で動かしています。記事中に登場するFO、XSLTの動作について保証するものではありません。ご了承ください。

XML

次のようなXMLからXSL-FOを生成します。

<section xml:id="about"><title>概要</title>
   <div style="slide" layout="cover" />
 ...
   <div style="slide" layout="fig-desc">
   <description>
     <dl>
       <dlentry>
         <dt>書名</dt>
         <dd>AH XSL Formatter拡張仕様使いこなしガイド</dd>
       </dlentry>
       <dlentry>
         <dt>公開日</dt>
         <dd>2021年5月18日</dd>
       </dlentry>
       <dlentry>
         <dt>概要</dt>
         <dd>XSLをAH XSL Formatterが独自に拡張した仕様についてのガイド
           <list style="unordered">
            <li>複合的なショウケース</li>
            <li>「やりたいこと」から引ける逆引きリファレンス</li>
          </list>
        </dd>
      </dlentry>
     </dl>
   </description>
   <figure>
      <image href="./XSL-FO-Extensions.png"/>
   </figure>
 </div>
 <div style="slide" layout="plain">
 ...
 </div>
</section>
...

若干の制限を設けたブロックとしてdescriptionタグを用意していますが、概ねHTML5程度の表現力のXMLを用意しました。汎用タグdivで何でも表そうとすると、子や親の要素・属性に制限を設けることが難しいという欠点にぶつかります。

dlentryはdtとddの組を区切るのに使用しています。HTML5のようにdivでないのは上と同じ理由です。区切りを前提にすることによってXSLT上でのパースがかなり楽に行えます。

ulとol相当はlistのclassとして使い分けます。CommonMarkのDTDなどはこのように扱っていますね。

テーマ擬き

Powerpoint、あるいは多くのプレゼンテーション用ソフトには「テーマ」という、スタイル設定の集合があります。
Word文書などと同様、Powerpoint文書はレイアウト用と見た目用の構造が渾然一体となっているのでテーマ切り替えだけでは大抵万事上手くは行かず適宜調整することになります。とまれ、見た目上の違いが印象に大きな影響を与えるスライド文書では類似の機構があると便利です。

今回は次のレイアウトを用意しました。

  • 「表紙用レイアウト」
  • 「大項目扉ページレイアウト」
  • 「通常ページレイアウト」
  • 「段組レイアウト」
  • 「画像とその説明用レイアウト」
  • 「大きめの画像表示レイアウト」

大きく異なるレイアウトについては異なるページマスターとして用意します。
通常ページ、段組、画像とその説明、大きめの画像表示レイアウトは同一のページマスターです。また、スライド全体の表紙と、大項目扉ページは同一のページマスターです。両者の違いは、fo:region-startfo:region-beforefo:region-afterの領域の有無、またそれを考慮したfo:region-bodyであるかです。

表紙系のページ

表紙以外のページ

(AH XSL Formatter拡張仕様ではページシーケンスの入れ子が行えるので「同じ項目内容の途中でスライドのレイアウトを切り換える」という要求を簡単に満たすことができます。この辺りも元のXML構造の設計に影響します。)

表紙系でないページでは、小項目のタイトルをfo:region-beforeに表示することにします。スライドではヘッダーとしての表示と見出しとしての表示を兼用してもあまり違和感がありませんね。また、大項目をfo:region-startに配置します。16:9のスライドの場合、画面の左端から右端までが4:3に比べ遠くなるため、タイトル領域として活用することにしました。こうすることで、大項目と小項目を両方表示したいとき、1つのヘッダーに大項目と小項目を両方表示するよりも、あまり文字を小さくせずにすみます。

段組レイアウトはAH XSL Formatter拡張仕様であるブロックコンテナへのcolumn-count指定で実装しました。

画像とその説明用のレイアウトはインラインコンテナを並べて実装しています。インラインコンテナは分離しないよう、念のためkeep-with-*などを指定します。幅指定を行わないと2つめのインラインコンテナが次の行へ送られてしまったり、高さ指定を合わせておかないとline-stacking-strategyによっては配置がガタガタしてしまいますから注意が必要です。

画像とその説明用のレイアウト
<fo:block>
 <xsl:attribute name="line-stacking-strategy">line-height</xsl:attribute> 
   <fo:inline-container width="48%"
     height="100%"
     keep-with-next.within-line="always">
     <fo:block>
        <xsl:apply-templates select="child::description"/>
     </fo:block>
   </fo:inline-container>
   <fo:inline-container width="50%" height="100%">
     <fo:block>
       <xsl:apply-templates select="child::figure"/>
     </fo:block>
   </fo:inline-container>
 </fo:block>

ほかの方法としては、「region-bodyを複数用意してflow-nameを切り換える」、「画像を左右へのフロートで配置する」といったものが考えられます。フロート配置は王道ですが、スライド用途の場合、AH XSL Formatter拡張でなければ思ったように(目的のスライド位置に)配置することはかなり難しいかもしれません。

箇条書き

スライドでは箇条書きが頻出する傾向があります。端的に内容を示し、口頭でのプレゼンに詳細内容を譲るためなど理由は考えられますが「様々な場所で登場する」ということに留意する必要があります。

XSL-FOのリスト構造はstart-indentとend-indentが肝要です。

ブロックのインデントは基本的には親の値を引き継いでいれば問題ありませんが、start-indentを指定したブロックの入れ子にリストブロックがあるケースなどでは、うっかり領域の端からの値にならないよう、inherited-property-value(*-indent)で親のインデントの値を取得してから自分のインデントを追加する必要があります。

<!-- 入れ子レベル$listLevelは計算済 -->
...
<xsl:attribute name="provisional-distance-between-starts">
 <xsl:value-of select="'inherited-property-value(start-indent) + 0.5em + ' || $listLevel || 'em'"/>
 </xsl:attribute>

fo:list-item-labelの内部はブロックなので、ラベルに使える記号の自由度は高いです。今回は入れ子レベルによるラベルの切り換えは行いませんでした。

定義箇条もリストブロックにしました。同じDL内のDTの文字列長を比較し、最長のものを基準にインデントを決定しています。あまりにDTが長ければ単純なブロックに切り換えます。今回は和欧混合文などは考慮しません。


<xsl:template match="dl">
 <xsl:variable name="dt-lens">
   <xsl:for-each select="child::dlentry/dt">
     <len>
        <xsl:sequence select="xs:double(string-length(./text()))"/>
     </len>
   </xsl:for-each>
 </xsl:variable>
 <xsl:variable name="max-length-dt" select="xs:integer(max($dt-lens/len/text()))"
   as="xs:integer"/>
 <xsl:choose>
   <xsl:when test="$max-length-dt &lt; 20">
     <fo:list-block
       provisional-distance-between-starts="inherited-property-value(start-indent) + {$max-length-dt}em + 2em"
       provisional-label-separation="1em">
        <xsl:for-each select="child::dlentry">
           <fo:list-item>
             <fo:list-item-label ...">
                <fo:block ...>
                   <xsl:apply-templates select=".//dt"/>
                </fo:block>
             </fo:list-item-label>
             <fo:list-item-body ...>
                <fo:block ...>
                   <xsl:apply-templates select=".//dd"/>
                </fo:block>
             </fo:list-item-body>
           </fo:list-item>
         </xsl:for-each>
     </fo:list-block>
   </xsl:when>
   <xsl:otherwise>
    ...
   </xsl:otherwise>
  </xsl:choose>
</xsl:template>

最長である「公開日」の長さを基準にインデントが決定されています。均等割り付けの指定は「:」を含んでしまっているので「概要」の後のスペースなどはちょっと微妙です。end方向に揃えるか、axf:text-autospaceで揃えるか、ブロックの横にフロートかブロックコンテナで「:」配置すればより良くなるでしょう。

枠内にテキストを収める

大項目の扉ページでは、見出しテキストを四角い枠内に収めることにしました。

スライドは本と比べ、ページごとの独立性が高くなることが多いでしょう。「1枚の中に必要なコンテンツを収めたい」というとき、フォントサイズや字間、伸縮などを最適なものから外しても1枚のスライド内に収めるため、オーバーフロー処理を記述します。

どうにかテキストを枠内に収めるにしても限界値はあります。より汎用的に使うのであれば、文字数制約や、枠自体のサイズを指定し直すような記述を追加することになるでしょう。


今回採用、実装しなかったものとしては「自由配置の吹き出し」や「画像の上から付ける下線」などがあります。グラフィカルな配置はスライドとしても重要な要素ですが、代用が可能なものでもあります。たとえば画像側で下処理を行っておけば、清書としては都度処理する必要はありません。
とはいえ、まったくそれらの処理ができないのも不便ではあります。
今後、このようにXMLからPDFスライドを作成する機会があれば、SVGやブロックコンテナをページ上の座標など簡単なパラメータで任意の場所に配置するような形態で実装するかもしれません。

関連記事



【動画公開】「4つのステップで基本的に改正電帳法の独自攻略が可能です」

皆様! 改正電帳法の学習に手を焼いていませんか!?
そんな企業担当者様へお贈りします。

Youtubeセミナー「4つのステップで基本的に改正電帳法の独自攻略が可能です」
本Youtubeセミナーは、下記(概要説明あり)から編集しましたホットな情報です。
皆様の改正電帳法の独自攻略を応援しています。

「改正電子帳簿保存法の最新動向」と検収照合、入金消込の効率化を実現するセットソリューションのご紹介
株式会社アール・アンド・エー・シーと、ネットスマイル株式会社とのコラボウェビナー!

日  時:2021年8月24日(火)15:00〜16:10
概  要
■セッション概要
1)改正電子帳簿保存法の最新動向【15分】
「4つのステップで基本的に改正電帳法の独自攻略が可能です」
1 改正電子帳簿保存法より法律用語定義と帳簿・書類、スキャナ、電子取引の各制度を理解する
→電帳法の4つの制度を俯瞰することが最大の近道!
2 改正電子帳簿保存法施行規則(「財務省令」)より各制度の要件を俯瞰する
→電帳法を制するには帳簿から!
3 要件の理解を深めるために、改正電子帳簿保存法取扱通達趣旨説明(「通達」)を読破する
→国税局も税務署も「通達」を裏付けに確認指導してくる!
4 自社の導入目的に合致した「一問一答」を「財務省令」や「通達」を参照しながら理解する
→単なる「一問一答」の摘み食いでの自社よがりな楽観的な解釈は大きなリスクを伴う!

その他ご案内

【e-Successの参考資料や情報】

【更に、この時期ならではのお得な情報】

皆様、「e-Success」は、現在20 %割引で購入できる『キャンペーン』中です。詳しくは、https://www.antenna.co.jp/e-success/campaign-2021.html より


月曜日連載! Microsoft Wordスタイル探索 (33)Word文書からWebページ(HTML)変換について考える

先日、noteに「行政文書をマークダウン化しよう!ところでマークダウンって何? 」という記事が掲載されていました。

これは従来Wordで書いてPDFで配信されていた、経済産業省情報プロジェクト室 の「PlayBook」を、マークダウンで書いてGitHubで公開するように変更した過程について説明したものです。

実際にマークダウンで書いた文書の例として、「 meti-dx-team/METI-Digital-Service-Playbook」から閲覧できる「PlayBook」の内容をご覧いただくと良いでしょう。

マークダウンは、10年位前から流行り始めており、ソフトウェアの簡易マニュアルではよく見かけます。簡単なメモを書いて、それを随時更新していくには便利であり、どちらかというと書き手と読み手が同じ集団であるときに一番効果を発揮すると思われます。そういう意味では、「PlayBook」の作成には向いていると言えるでしょう。

しかし、このマークダウンの「PlayBook」が、一般の人に読みやすいか、というとどうでしょうか? 読みやすい、理解しやすいと思った人がどの位いるでしょうか?

個人的には、マークダウンはシンプルなメモ的な文章は良いですが、こういう長文は向かないんではないだろうか? と感じます。それにもう少し図表やイラストを入れる方が良いのではないでしょうか? 私自身、マークダウンで本を書いたことがありますが、その経験を踏まえて、マークダウンは表現力が決定的に足りない、と考えています。もちろん、マークダウンにはHTMLのタグを直接書けますので、HTMLタグを直書きすれば良いのですが、それを始めるとHTMLタグのオンパレードになってしまうのです。実際のところ、それならHTMLで書けば良いや、となります。

そういう風に考えますと、やはりWordの方が、マークダウンよりは簡単に豊かな表現ができそうです。では、Wordで書いた文書を、簡単に、Webページに掲載するようなHTMLにできるか、ということになります。これについては既に検討しました。

月曜日連載! Microsoft Wordスタイル探索 (31)WordのWebページ保存は使えない。その理由は?
月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?

Word文書をHTMLに変換するツールやWebサービスは多種多様ありますが、ざっと調べてみた結論としてはなかなかこれといったものはないようです。

根本的な理由として考えられるのは、Microsoft Wordはもともと紙に印刷する文書を作成するためのワープロであり、特にレイアウトの指定方法がA4、B5といった固定サイズのページを大前提としていることです。それに対して、Webページのレイアウトは考え方が全く異なります。

従来のWordからHTMLへの変換ツールは、Wordで指定されたレイアウトをそのままHTMLタグに出そうとしています。

Wordの便利な点の一つに作表機能の使いやすさがあります。そこで、Wordで作った図のような表をHTMLにしたいと考えたとします。

Wordで作成した表の例

Wordで作成した表の例


この表を、あるWordからHTMLに変換するWebサービスでHTMLにすると次のような出力になります。
<div style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’>
<ul style=”margin-bottom:0cm;list-style-type: undefined;”>
<li style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’>
<h2 style=’margin-top:0cm;margin-right:0cm;margin-bottom:0cm;margin-left:42.55pt;text-align:justify;text-indent:-21.3pt;font-size:14px;font-family:”游ゴシック Light”;font-weight:normal;’>表のスタイル</h2>
</li>
</ul>
</div>
<div align=”center” style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’>
<table style=”border-collapse:collapse;border:none;”>
<tbody>
<tr>
<td style=”width: 120.5pt;border: 1pt solid rgb(191, 191, 191);padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong>表のスタイル</strong></p>
</td>
<td style=”width: 63.6pt;border-color: rgb(191, 191, 191) rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: solid solid solid none;border-width: 1pt 1pt 1pt medium;border-image: none 100% / 1 / 0 stretch;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong>標準の表1</strong></p>
</td>
<td style=”width: 92.1pt;border-color: rgb(191, 191, 191) rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: solid solid solid none;border-width: 1pt 1pt 1pt medium;border-image: none 100% / 1 / 0 stretch;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td rowspan=”2″ style=”width:2.0cm;border:solid #BFBFBF 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;”>
<p style=’margin:0cm;text-align:center;font-size:14px;font-family:”游明朝”,serif;’><strong>最後の列</strong></p>
</td>
</tr>
<tr>
<td style=”width: 120.5pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191);border-style: none solid solid;border-width: medium 1pt 1pt;border-image: none 100% / 1 / 0 stretch;background: rgb(242, 242, 242) none repeat scroll 0% 0%;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td colspan=”2″ style=”width: 155.7pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;background: rgb(242, 242, 242) none repeat scroll 0% 0%;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:center;font-size:14px;font-family:”游明朝”,serif;’><span style=”color:black;”>セルの左右結合</span></p>
</td>
</tr>
<tr>
<td style=”width: 120.5pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191);border-style: none solid solid;border-width: medium 1pt 1pt;border-image: none 100% / 1 / 0 stretch;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong>合計</strong></p>
</td>
<td style=”width: 63.6pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td style=”width: 92.1pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td style=”width: 2cm;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
</tr>
</tbody>
</table>
</div>

ここではすべての表セルに対してWordで指定したスタイルがCSSで指定されています。このため、変換したHTMLをWebページとして使うにあたって、例えば罫線の見栄えを少し変更したいときは、スタイル変更に思った以上の手間がかかるでしょう。

そうすると、Wordで指定したレイアウトの中で、HTMLにしたとき構造を表すようなレイアウトのみをHTMLタグに変換し、印刷のためのレイアウトを捨ててしまうような変換方式を考えると良さそうです。

そうなんですが、Wordで作成する文章で文字の大きさや字体の変更しているとき、例えば文字のサイズが大きいと、意味上は重要、階層構造上は本文よりも上位になるといったように、Wordではレイアウトと構造が混然一体です。そのため「構造を表すようなレイアウトのみをHTMLタグに変換し、印刷のためのレイアウトを捨てる」というのは実は結構難しいのです。
—-
宣伝です。来る10月12日(火)16時から、「ちょっと一息・アンテナハウスウェビナー」で、

WordでHTMLを書けたらスゴイ!

という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックについてお話しする予定です。関心をお持ちの方は、ぜひ、ご参加ください。
——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?
◆次回:月曜日連載! Microsoft Wordスタイル探索 (34)HTMLとはなにか。だれが決めているのか。
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)


e-na伊那谷 旅便り 第75回 長谷ドライブ

長谷は上伊那郡東部にあり、南アルプスと伊那山地の間のにある峡谷地域です。

長い秋雨が明け、気持ちのいい天気の中、自然豊かな長谷をドライブしてきました♪
途中には思わず足を止めてしまうような、景色やおいしいものが沢山あります。

まずは長谷に来たら定番のコレ!!
道の駅南アルプスむら長谷にある「パンや」のミニクロワッサン!
本当においしくて何個でも食べられてしまいます♪



そして道の駅近くにある美和湖(美和ダム)の上を歩きます。
景色・空気ともに最高です♪
もう少ししたら紅葉が楽しめますよ(^^)



さてお次は、長谷杉島にある知る人ぞ知る「杉島名物ドーナツ万十」!
黒餡または白餡の入ったまんじゅうを油で揚げて、砂糖をまぶしたドーナツです。
見た目ほど甘くなく、お土産にもおすすめ♪

最後は!またまた食べ物ですが(笑)、「平家の里」です!!
長谷ならではのジビエ焼肉・激辛火消しラーメンが食べられるお店です。
名物の激辛火消しラーメンは辛さにランクがあり、上位の辛さを完食するとお店の木札に名前を書いて飾られます。
私には到底無理な辛さです……。
今回寄った時にはお昼休憩だったので食べてくることはできませんでした。

他にも、綺麗な川で川遊び・BBQが楽しめたり、道中で猿や鹿と遭遇したりと自然を満喫することができます。
ぜひ、お出かけしてみてください♪


アンテナハウスブログ「I love Softwere2!」で連載の「e-na 伊那谷 旅便り」を再構成してWeb「e-na 伊那谷 旅便り」にまとめました。


無料で1か月「電帳法」対応ソフトが利用できます

令和4年1月1日から改正電帳法の新要件で一部義務化されるものがあります。
それは、「電子取引」(電子的に取引情報を授受した際にデータ(PDF等)で保存するもの)が、従来認められていたPDF等から紙に印刷しての保存が税法上認められなくなるからです。

国税庁発表の引用:「申告所得税及び法人税における電子取引の取引情報に係る電磁的記録について、その電磁的記録の出力書面等の保存をもってその電磁的記録の保存に代えることができる措置は、廃止されました。

さて、そこで皆様へ朗報です。

無料で1か月、電帳法対応の電子文書管理システムが利用できます。
その名は「e-Success」(イーサクセス)です。
「e-Success」は、国税庁が認めるJIIMA認証製品なので、安心してご利用頂けます。
「e-Success」は、PC版やサーバー版があり、これらは1か月無料でご利用が可能です。
もちろん、登録されたデータは、1か月超後、有料版に移行された際も継続利用可能です。
→ まずは、手軽なPC版「e-Success-Lite」をお試し利用されては如何でしょうか

【e-Successの参考資料や情報】

月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?

現在のWebページの多くは、WordPress、はてなブログのようなブログ、Wikiペディアを代表とするWiki、最近では、noteやテッキーな人達にはGitHubが人気を集めています。こうしたWebページを見ると、一様に短文であり、またテキスト中心のシンプルな作りになっていて表現される内容の量や表現力という点で、PDFによるものと比べて、もの足りなく感じます。

PDFによる文書作成というと、まずMicrosoft Wordを思い浮かべるわけですが、Wordには、見出し作成、目次作成、段落への自動番号付け、文章の校閲機能、など強力な文章の編集機能があります。文章だけではなく、作図、表作成機能なども優れています。

Wordで図表などを盛り込んで作成した文書を、そのままWebページにできれば、Webページの表現内容がいまより豊かになるはずです。しかし、前回((31)WordのWebページ保存は使えない。その理由は?)も説明した通り、Wordで編集中の文書を、Word自身の「名前を付けて保存」「Webページとして保存」しても、そのままでは、Webページとして使えません。

Wordで作成した文書をWebページ(HTML)にしたいというニーズがあれば、それを満たすために、サービスやツールが提供されるのは必然です。次に、現在、どういうものがあるかを簡単にまとめてみます。

1.WordのWebページ保存で作成したHTMLをフィルターするツール
この代表例として、Webページ編集ソフトのDreamWeaverの「Word HTMLのクリーンアップ」機能があります。DreamWeaverは、デスクトップPC上で動作するアプリケーションです。「Word HTMLのクリーンアップ」ダイアログには次図のようなオプションがあります。

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ


DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ(続き)

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ(続き)


Wordを使ってWebページ保存したファイルで実際に試すと次の図のようなダイアログが表示されます。いろいろと不要なタグを削除したり、Word独自のスタイルを適用するための属性を削除しています。
DreamWeaverの「Word HTMLのクリーンアップ」結果報告ダイアログ

DreamWeaverの「Word HTMLのクリーンアップ」結果報告ダイアログ

2.Wordの不要なタグをフィルターするWebサービス
同じようなフィルタリング機能を提供するWebサービスもいろいろあります。

例えば、『Convert Word Documents to Clean HTML』サービスを見てみましょう。
https://word2cleanhtml.com/

Convert Word documents to Clean HTML のトップ画面

Convert Word documents to Clean HTML のトップ画面

簡単なサンプルで試してみます。次はWordで箇条書きを指定してみました。箇条書きの項目の一部にルビを指定しています。

Word文書で箇条書きを指定した部分

Word文書で箇条書きを指定した部分


この文書を『Convert Word Documents to Clean HTML』にペーストします。ペーストした段階では、箇条書き項目(上の図でアンダーラインの部分)は次のようになります。
『Convert Word Documents to Clean HTML』にペーストした状態

『Convert Word Documents to Clean HTML』にペーストした状態


このペーストしたファイルをコピーしてローカルにファイルとして保存、ブラウザ(Edge)で表示したところ次のようになります。
『Convert Word Documents to Clean HTML』にペーストした状態をブラウザで表示

『Convert Word Documents to Clean HTML』にペーストした状態をブラウザで表示

次に、これを「Convert to Clean HTML」(ボタン)でクリーンなHTMLにします。同じ箇所は次のようになっています。

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果


一見して、Word文書をコピーしたときについていた沢山のタグが削除されて、シンプルなHTMLタグ付けになっています。ルビを付けた部分はきちんとルビタグで表現されています。

良さげです。しかし、この変換後のファイルをローカルに保存してブラウザ(Edge)で表示すると次のようになってしまいます。

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果をブラウザで表示

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果をブラウザで表示

箇条書きの項目先頭の記号が文字化けしてしまっています。

この変換例では、前回((31)WordのWebページ保存は使えない。その理由は?)で整理した問題の中で、次の二つが該当します。

(2) 箇条書きを通常の段落タグにしているなどタグの表現が貧困
(3) 文字化け

『Convert Word Documents to Clean HTML』サービスはかなり良さそうですが、結構、大きな問題が残っています。

要するに、Wordで作成した文書からHTMLを作って、単にフィルタリングするだけでは不十分であり、もう少し賢い解決策が必要、と言えるでしょう。

—-
宣伝です。来る10月12日(火)16時から、「ちょっと一息・アンテナハウスウェビナー」で、

WordでHTMLを書けたらスゴイ!

という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックについてお話しする予定です。関心をお持ちの方は、ぜひ、ご参加ください。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (31)WordのWebページ保存は使えない。その理由は?
◆次回:月曜日連載! Microsoft Wordスタイル探索 (33)Word文書からWebページ(HTML)変換について考える
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)


【動画公開】「DITAで本を書いてAH XSL Formatterで自動組版する」、FormatterClub2021ウェビナーのお知らせ

2021年8月10日に開催しました、ちょっと一息アンテナハウスウェビナー「DITAで本を書いてAH XSL Formatterで自動組版する」の録画を編集した動画が公開されています。

動画は1本10分程度の4本立てとなりました。

ご好評いただけましたようで、当日は予定時間をはみ出すくらいにご質問をいただきました。
「タグを気にせず書きたい」といった意見もございました。個人的には「タグを気にしながら書きたい」派でしたのでそういった方のための資料はあまり用意できていなかったのですが、そういった方面のアプローチも存在しますので、機会があればあらためてまとめたいと思います。

さて、この動画自体は少し前に公開されたのですが、何故今ブログ記事にしているかというと、次のイベントに関連するためです。

FormatterClub2021ウェビナー開催

日時
2021年9月17日(金)17:00~18:10
概要
今回のFormatterClubでは、キヤノンの吉田一様にFormatterでのマニュアル作成と自動組版の取り組みの発表の他、XSL拡張仕様のご説明、AH Formatterの今後をご紹介を致します。
内容紹介・お申込みページ
ウェビナー登録ページ

Formatter Club は、アンテナハウスの XML 自動組版ソフト『AH Formatter』を導入されているユーザーや関心を持っていただいている皆様と開発者とを繋ぎ、会員同士の交流、情報交換により『AH Formatter』の利用技術を向上させ、より皆様のお役に立てる製品としていくために役立てることを目的として発足いたしました。
『AH Formatter』とその関連技術(XSL、CSS、XML 多言語組版など)に関心のある方でしたらどなたも参加できます。参加費は無料です。
Formatter Club の活動には会員メーリングリストを情報交換のために利用し、会員専用の Web ページも提供いたします。また定例会を開催し、会員相互の親睦をはかります。定例会は、『AH Formatter』開発者から最新バージョンの紹介・デモ、活用事例紹介、組版技術の向上のための勉強会などを行います。

Formatter Club について | アンテナハウス株式会社

ということで、「XSL拡張仕様のご説明」として『使いこなしガイド』の紹介をさせていただく予定です。
今回のウェビナーはFormatter Club会員様以外でも参加が可能ですのでお気軽にご登録、ご視聴ください。

関連記事



Pages: 1 2 Next