2021年9月17日金曜日

vscode #06 : Markdown PDF でフォント指定してPDF化

どうも、もりもりです。

今回はたまに出てくるvscodeネタです。 今となっては欠かせない人は多いのではないでしょうか。 社内ではレポートや議事録など、Excelで作成するドキュメントが多いのですが まぁ内容が確認できればOKなのでPDFでもOKにしてもらいました。 なのでMarkdownで書いて拡張機能の「Markdown PDF」を入れてPDF化してます。 がしかし!中国語フォントに。。。

と言うことで、「Markdown PDF」使用時のフォントの指定方法を紹介したいと思います。

拡張機能「Markdown PDF」

拡張機能は下記です。

CSSファイルを作成

cssファイルを作成します。ファイル名を付けて保存。 どこに保存してもいいですがPDF化するmdファイルと同階層に格納しておけば後で設定がラクです。 今回はメイリオを指定してみます。

md.css

body {
    font-family: "Meiryo";
}

code {
    font-family: "Meiryo";
}

設定にCSSファイルの相対パスを追加

vscodeの設定を開き(Windows : Ctrl + , / Mac : command + ,) 「markdown styles」で検索。下記設定に、PDF化したいファイルからの相対パスを入力し、OKをクリックするだけ。

今回の例ですと、.\md.cssとするだけ。

拡張機能自身が持っているスタイルを上書きするような記事もあったりしますが 更新時や何かの拍子に元に戻ってしまうこともあると思うので設定に追加する方がいいでしょう。

また、時と場合によってはフォントを変更したいこともあると思います。 なのでこちらの設定に追加する方法をオススメします。

ちなみに拡張機能が保持しているスタイルは下記にあります。(※Windowsの場合)

C:\Users\xxxx\.vscode\extensions\yzane.markdown-pdf-1.4.4\styles

あとはmdファイル内右クリックでPDF出力メニューを選択してサクッとPDF化するだけです。 それでは皆さま、良い vscode life を。

過去のvscode関連記事はこちらを↓↓↓
以上、もりもりでした。

2021年9月11日土曜日

自宅のWiFi環境改善 ~ メッシュWi-Fi導入

こんにちは、やっまむーです。

我が家では以前より無線LANの環境で悩みがありました。
リビングに置いているNintendoSwitchでダウンロードをしようとすると非常に時間がかかるのです。
他にもテレビでYouTube等の動画コンテンツを見ていると、低画質に切り替わったり、ローディングのために再生が停まることもあります。

原因は親機からの距離と間の障害物です。
以下はIO-DATAの『Wi-Fiミレル』というアプリで自宅の無線LANの強度を調べたものです。

リビング側の数値が良くないです。

親機は玄関横の下足箱の中にあるので、その付近はまだよいですが、テレビを置いているリビングは数値が小さくなっています。
普段使いではそれほど気になりませんが、通信に時間がかかるのは許せないので、WiFi環境を改善することにしました。

機器の選定

リビングでも十分な通信速度を確保するため、あと新しい機器を試してみたい欲求から、今回はメッシュWi-Fiを構築することにしました。

要件としては以下になります。

  • メッシュWi-Fi対応 : 必須
  • 有線ポートを複数(最低2つ) : パソコンとNASを繋ぐため
  • 価格 : 出費が嵩んでいるので

そして該当するものから選んだのはASUSの『ZenWiFi AC (CT8)』を選びました。

My new gear!

大きさは160mm × 75mm × 161.5mm と少し大きく見えますが、シンプルな外見でリビングに置いてもそれほど違和感はありません。

大きさ比較

大きい分、ポートの数は充実しています。

WAN×1 + LAN×3、USBも付いています

設置 & セッティング

下足箱のルーターを交換してセットアップを進めていきます。

セッティングはブラウザ、または専用のアプリから行います。
画面の指示に従ってSSIDや管理者の設定、インターネット接続の設定を済ませていきます。

ざっと設定を終えて回線速度を測ってみましたが、スマートフォンではそれほど速度が変わった感じはありませんでした。
しかし、NintendoSwitchに関してはハッキリと違いでており、これまでと比べて格段に改善しました。

さて、セッティングが完了したので、後は家中のデバイスの設定更新をしていきます。
スマートスピーカー等は繋がらなくなるので設定を全てリセットしていきます。
このあたりは導入時の設定が簡単になった影響すかね・・・。

最後にパソコンから回線速度を測ってみます。

有線LANで繋いでいた時は300Mbps以上は簡単に出ていたのに・・・。
やはり有線LANも引く必要がありそうですね。
次はそのあたりの整備をしてみようと思います。

ではではー。

2021年9月3日金曜日

ローカルにあるmdファイル(マークダウン)を見る時は、Chrome拡張機能の「Markdown Viewer」が便利


 こんにちは。よっしーです。


仕事で設計書などをマークダウンで記載することが多くなってきており、

Typoraを使う機会が増えました。


TyporaはEditerとしては凄く優秀なのですが、

ViewerとしてはEditer機能を備えているがゆえにイマイチなところが多く、

(リンクをワンクリックで開けなかったり、リンクから別ページへ遷移する際に別ウィンドウでしか開けなかったり)

マークダウンの記載内容をレビューする際、

Typoraの画面を見せながらというのはあまり適さないと感じます。


では、何を使うか。


Chrome拡張機能の「Markdown Viewer」がおすすめです。


この拡張機能を適応することで、Chrome上でローカルにある

mdファイル(マークダウン)を表示することが出来ます。


※※※ローカルのmdファイルを表示するために以下の設定が必要となります※※※


Chromeに適応後、Markdown Viewer のメニューを開き、

「ADVANCED OPTIONS」を開きます。


「ALLOW ACCESS TO FILE://URLS」 を選択します。

「ファイルのURLへのアクセスを許可する」を有効にします。


以上で、設定は終わりです。


あとは、ChromeへmdファイルをD&Dすると、

こんな感じでキチンとマークダウン記述を解釈して表示してくれます。


もちろんリンクもワンクリックで飛んでくれるし、

別ウィンドウで開くこともありません。

表示もかなり軽いと思います。


私は、

マークダウンの作成は「Typora」で行い、

マークダウンを見せる際は「Markdown Viewer」を使う。

というスタイルに落ち着きました。


興味があれば「Markdown Viewer」を使ってみて下さい。


ではまた~。

2021年8月27日金曜日

Microsoft Edge テーブルの行単位でテキストボックスを編集不可にできないの??

おはようございます。

こんにちは。

こんばんは。

ドラゴンです。


 

タイトルにもある通り、
Microsoft Edgeではテーブルの行単位でテキストボックスを編集不可にできるのか??

結論からいいますと

できません。

補足として、Internet Explorerでは行単位での設定が可能です。

★Internet Explorerの場合
trタグにdisabled属性を設定することで行単位で編集を不可にできます。

<table border="1">
    <tr disabled="disabled">
        <td>
            <input type="text" />
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
</table>

下の画像のように2つのテキストボックスとも編集できなくなっていますね。

★Microsoft Edgeの場合
テキストボックスそれぞれに、disabled属性を設定してください。

<table border="1">
    <tr>
        <td>
            <input type="text" disabled="disabled"/>
        </td>
        <td>
            <input type="text" disabled="disabled"/>
        </td>
    </tr>
</table>

最後に

今回はタグの中にdisabled属性を設定しましたが、実際の業務では特定の行だけを編集不可にしたい
といった場面が出てくるかと思います。 その場合は、ループで回して各テキストボックスにdisabled属性を設定してもらえればよいかと思います。

それでは、ドラゴンでした~~~。

2021年8月20日金曜日

Typoraの紹介③ ~数式を編集する~

 

おはようございます。ひっくです。

今回も第1回、第2回に引き続き、MarkdownエディタのTyporaを取り扱います。

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介② ~画像の保存先を変更する~

今回は数式の記載方法を紹介します。

何故数式の記載方法を紹介するのか?


簡単な数式を表示する場合、あまり意識することがなかったのですが、

機械学習の学習内容を個人的にまとめたりする際、数式が出てくることが多く

それなりに複雑な数式を記載するとなると、特殊な記法を使用する必要がありました。

 

(理系出身の方だと、PCでレポートを作成する機会があれば使用されているかもしれませんが、

私は文系出身のため、その辺りの知識がありませんでした。)

 

ここに辿りつくまでそれなりに調べたりした過去があるので、まとめておこうと思った次第です。

 

数式の記法(LaTeX)


さてTyporaでは数式の記法として、設定によりLaTeX(ラテック/ラテフ)を使用することができます。

予め決まった記法に従い編集すると、高校等で学習していた際見たことのある

数式が表示されるようになります。

(つまり慣れるまでは記法を覚える必要があります。ここのハードルが少し高いかもしれません。)

 

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

以下赤枠の設定をチェックONにします。

 

右上の「×」を押下後、Typora自体を再起動してください。

これで設定が反映されます。

 

数式を書いてみる


Typoraでは、LaTeX記法の前後を「$」で挟むことで、数式を表現しています。

例えば、「 」のような数式は、次のように表記して表現します。

記法 表示内容 意味・備考
\leqq 小なりイコール
~
※「 \ 」( \ +半角SP)でも可
半角スペース 空白(半角SP)

 

複雑な数式になると、記載する式が多くなります。

例えば、「 」のような数式は、次のように表記して表現します。

記法 表示内容 意味・備考
\sigma σ シグマ(ギリシャ文字)
\sqrt 平方根(ルート)
\frac{α}{β} 分数({}内に分子、分母を記載)
\displaystyle ブロック表記
(インライン表記と同様の表記[ ]でも
行の高さになるべく収めるか否かという点で
表示内容に差異が出る)
\textstyle インライン表記
以下は上記の例をインライン表記にしたもの
\sum 総和
\sum_{a}^{n=1} 「総和」に、下付き(a)・上付き(n=1)を付与
下付きは{}前に「_」を付与
上付きは{}前に「^」を付与する
\overline{a} 上線({}内の文字上部に線を引く)

 

ギリシャ文字や下付き、上付き文字を駆使しながら、表現しなくてはなりません。

 

上記で挙げた例はほんの一部となるので、他にどのような書き方があるだろうと興味を持った方は

是非「LaTeX」「コマンド」等で検索してみてください。

LaTeXの記法(コマンド一覧)をまとめたWebサイトがいくつかヒットします。

(私も学習結果をまとめる際、これらのサイトを利用しました。)

 

まとめ


数式をTyporaで表現するために必要な設定について、今回は紹介しました。

Typoraで記載した数式は、PDFでのエクスポート、HTMLでのエクスポートでも

Typoraで記載・表示した際と見た目が変わることはありません。

数式を表現する機会が多い方、それをPCで編集したい方にピッタリかと思います。

興味を持った方は是非使ってみてください。

 

今回はこのへんで。ではまた!

2021年8月10日火曜日

jQueryでスクロールを連動

どうも、もりもりです。

今回はjQueryで複数のコンテナにセットしたスクロールバーの動きを連動させる方法を紹介したいと思います。 ASP.NETでデータを一覧表示するにあたって、ヘッダはもちろん固定ですが列も一部を固定にしたいという要望が合ったので まずはHTMLでどうすれば良いかを検証します。

まずはコンテナを4つに区切る

一覧を下記の4つに区切ります。

  • ヘッダ固定
  • ヘッダスクロール
  • データ部固定
  • データ部スクロール

index.html

<div class="list">
    <div class="header">
        <div class="fixedHeader">
        </div>
        <div class="scrollHeader">
        </div>
    </div>
    <div class="dataList">
        <div class="fixedDataList">
        </div>
        <div class="scrollDataList">
        </div>
    </div>
</div>

スクロールをコンテナにセット

ヘッダスクロール部には横スクロール、データ固定部には縦スクロール、データスクロール部には縦横両方スクロールをセットします。

index.css

.scrollHeader {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    overflow-x:scroll;
    overflow-y: hidden;
}
.fixedDataList {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    min-width: 204px;
    max-height: 200px;
}
.scrollDataList {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    max-width: 500px;
    max-height: 200px;
}

スクロールバーを連動

ヘッダのスクロールイベントで、横の位置をデータスクロール部の横の位置にセットします。 同様にデータ固定部とデータスクロール部のスクロールイベントにも連動させたいスクロール位置を合わせます。 これだけです。

index.js

var scrollHeader = $('.scrollHeader');
var fixedDataList = $('.fixedDataList');
var scrollDataList = $('.scrollDataList');

scrollHeader.scroll(function() {
    scrollDataList.scrollLeft(scrollHeader.scrollLeft());
});
fixedDataList.scroll(function() {
    scrollDataList.scrollTop(fixedDataList.scrollTop());
});
scrollDataList.scroll(function() {
    scrollHeader.scrollLeft(scrollDataList.scrollLeft());
    fixedDataList.scrollTop(scrollDataList.scrollTop());
});

スクロールバーを非表示

スクロールバーを非表示にするには下記のスタイルを追加。(Chrome、Edge、Safariで有効)

index.css

.scrollHeader::-webkit-scrollbar {
    display:none;
}
.fixedDataList::-webkit-scrollbar {
    display:none;
}

スクロールを高速化

PCによってはスクロールがもっさりと動くことも。そんな時は1行 will-change: transform; を追加するだけ。

index.css

.scrollHeader {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    overflow-x:scroll;
    will-change: transform;
}
.fixedDataList {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    will-change: transform;
    min-width: 204px;
    max-height: 200px;
}
.scrollDataList {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    will-change: transform;
    max-width: 500px;
    max-height: 200px;
}

OSによってはサイズ調整が必要

Macではスクロールバーはコンテナ内に表示されますが、Windowsでは常に表示されます。 スタイルのscrollDataListmax-widthmax-heightを微調整してください。 だいたい17pxぐらいかな?

OSでそれぞれ対応するのが面倒ということでればいっそのことスクロールバーのスタイルを追加して常時表示するという手もありかと。 下記の全体ソースではスクロールバーのスタイルあり版にしてます。

全体ソース

全体はこんな感じです。

※表示幅の関係でスクロールバー分レイアウトが崩れてしまってます。 「0.5x」でご確認いただければと。

See the Pen InterlockedScroll by Y Mori (@ymdevx3) on CodePen.

さいごに

ここまでできたのでASP.NETのListViewで使いたい場合はLayoutTemplateやItemTemplateに落とし込むだけです。 ASP.NET開発においても最終的にできるHTMLを意識しておけば苦労することはないでしょう。

以上、もりもりでした。

2021年7月30日金曜日

マイナポータルAPIを使って算定基礎届を提出してみた!

2020年11月から健康保険組合向けの電子申請が開始されました。
マイナポータルAPIを利用したソフトを開発し、それを使って算定基礎届を提出しました。

マイナポータルAPI対応ソフトの開発


厚生年金向け手続きの電子申請にはe-Govがありますが、健保組合向けにはそうしたサイトはありません。
電子申請するためには、マイナポータルAPIに対応したソフトを利用する必要があります。

https://www.its-kenpo.or.jp/images/NEWS/information/hoken/shikumi.jpg
(「関東ITソフトウェア健康保険組合」のサイトより)

まずは自社で使用することを目的として、昨秋よりマイナポータルAPIを利用したソフトの開発を開始しました。
昨冬の賞与支払届の提出時期には間に合いませんでしたが、この度ようやく完成にこぎつけました。

開発したソフトを利用して初めての申請!


今回開発したソフトは、CSVファイル(KPFD0006.csv)による届出にのみ対応しています。
算定基礎届データが入ったCSVファイルを指定し、申請したところ、手続きが受理されました。


一週間後、手続き完了のメールが届きました。
アプリでもステータスを確認でき、健保組合からのデータをダウンロードして、無事に手続きが完了しました。


当社では2018年から電子申請に取り組んできました。
厚生年金、雇用保険、労働保険などの手続きはすでにe-Govを利用しており、最後に残った健康保険も電子申請できたことで、電子申請への道はここに完結です!


またいつか、どこかで。