SINKCAPITAL
SINKCAPITAL
Comapny Blog
マークダウンで記事を書けるようにしてみた
tech

背景

ひとまずホームページができてきたので、 ホームページに簡単な社員ブログを作成しようと思ったのが始まりです。 マークダウン形式で書くため色々探し、 デプロイをcode deployでやっていたこともあってpythonの markdown というモジュールを使うことにしました。

やったこと

  1. メインページのjsを書き換え、目次が出るように変更
  2. マークダウンをhtmlに変換し、uikit用にclass名を挿入
  3. htmlファイルを作成

メインページのjsを書き換え、目次が出るように変更

...
def __make_blog_vue(_contents_dict):
    with open(dir_name + "/___blog_vue___.js", "r") as f_blog:
        blog_vue = f_blog.read()
    blog_vue = blog_vue.replace("___TOC___", json.dumps(_contents_dict).replace('"', "'"))
    with open(dir_name.replace("/blog", "/js") + "/blog_vue.js", "w") as f_blog_vue:
        f_blog_vue.write(blog_vue)
...
new Vue({
    el: "#event",
    data: {
        toc: ___TOC___
    },
    created() {
    }
    ,
    methods: {}
})
;

マークダウンをhtmlに変換し、uikit用にclass名を挿入

...
md = markdown.Markdown(extensions=['tables', 'toc'])
...
convert_dict = {
    "<ul>": "<ul class='uk-list uk-list-bullet'>",
    "<table>": "<table class='uk-table uk-table-striped'",
    "<code>": "<pre><code>",
    "</code>": "</code></pre>",
    "src=\"../../": "src=\"./"
}
...
def __make_content_html(_md_file_name):
    author = md_file.split("/")[-2]
    html_file = md_file.replace(".md", ".html").replace(author, "contents")
    # mdファイルを読み込む
    with open(md_file, "r") as f_md:
        md_content = f_md.read()
    # 出力先フォルダの作成
    if not os.path.exists(dir_name + "/contents"):
        os.makedirs(dir_name + "/contents")
    # マークダウンをhtmlに変換し、uikit用のタグを挿入
    with open(html_file, "w") as f_html:
        html_content = md.convert(md_content)
        html_content = __add_uikit_class(html_content)
        f_html.write(html_content)

def __add_uikit_class(_html_content):
    for before, after in convert_dict.items():
        _html_content = _html_content.replace(before, after)
    return _html_content
...

htmlファイルを作成

def __make_blog_html(_title):
    with open(dir_name + "/___blog___.html", "r") as f_blog:
        blog_html = f_blog.read()

    blog_html = blog_html.replace("___TITLE___", _title)
    with open(dir_name.replace("/blog", "") + "/blog_" + _title + ".html", "w") as f_blog_html:
        f_blog_html.write(blog_html)
...
<div id="headerContent"></div>
<!-- Main Content -->
<div uk-grid>
    <div class="uk-width-1-1 uk-align-center">
        <div class="uk-width-2-3@m uk-align-center uk-padding uk-padding-remove-horizontal">
            <div id="blogContent"></div>
        </div>
        <div class="uk-width-1-4@m uk-align-center uk-padding uk-padding-remove-horizontal" id="event">
            <h2>他の記事</h2>
            <ul class="uk-list">
                <li v-for="(val, key) in toc"><a :href="val.path">{{key}}</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="footerContent"></div>
<script async src="js/blog_vue.js" async></script>
</body>
</html>

感想

  • 想像よりも簡単にできた
  • 大きくなってくるとCDN版vuejsをやめたほうが良さげ

変換python全文

import markdown
import glob
import os
import json

dir_name = "./frontend/blog"
 
md = markdown.Markdown(extensions=['tables', 'toc'])
md_file_list = glob.glob(dir_name + "/markdown/*.md", recursive=True)

_contents_dict = {}
for md_file in md_file_list:
    title = md_file.split("/")[-1].replace(".md", "")
    _contents_dict[title] = {
        'name': title,
        'path': 'blog_' + title + '.html'
    }

convert_dict = {
    "<ul>": "<ul class='uk-list uk-list-bullet'>",
    "<table>": "<table class='uk-table uk-table-striped'",
    "<code>": "<pre><code>",
    "</code>": "</code></pre>",
    "src=\"../../": "src=\"./"
}


def __make_blog_vue(_contents_dict):
    with open(dir_name + "/___blog_vue___.js", "r") as f_blog:
        blog_vue = f_blog.read()
    blog_vue = blog_vue.replace("___TOC___", json.dumps(_contents_dict).replace('"', "'"))
    with open(dir_name.replace("/blog", "/js") + "/blog_vue.js", "w") as f_blog_vue:
        f_blog_vue.write(blog_vue)


def __make_blog_html(_title):
    with open(dir_name + "/___blog___.html", "r") as f_blog:
        blog_html = f_blog.read()
    blog_html = blog_html.replace("___TITLE___", _title)
    with open(dir_name.replace("/blog", "") + "/blog_" + _title + ".html", "w") as f_blog_html:
        f_blog_html.write(blog_html)


def __make_content_html(_md_file_name):
    author = md_file.split("/")[-2]
    html_file = md_file.replace(".md", ".html").replace(author, "contents")
    # mdファイルを読み込む
    with open(md_file, "r") as f_md:
        md_content = f_md.read()
    # 出力先フォルダの作成
    if not os.path.exists(dir_name + "/contents"):
        os.makedirs(dir_name + "/contents")
    # マークダウンをhtmlに変換し、uikit用のタグを挿入
    with open(html_file, "w") as f_html:
        html_content = md.convert(md_content)
        html_content = __add_uikit_class(html_content)
        f_html.write(html_content)


def __add_uikit_class(_html_content):
    for before, after in convert_dict.items():
        _html_content = _html_content.replace(before, after)
    return _html_content


if __name__ == '__main__':
    __make_blog_vue(_contents_dict)
    for md_file in md_file_list:
        title = md_file.split("/")[-1].replace(".md", "")
        __make_content_html(md_file)
        __make_blog_html(title)
$  tree
  .
  ├── ci
  │   └── markdown_to_html.py
  └── frontend
      ├── blog
      │   ├── ___blog___.html
      │   ├── ___blog_vue___.js
      │   ├── contents
      │   └── markdown
      │       ├── �\200\220\220\210格�\223\223\230\200\221GCP_Cloud_Archtect�\201��\217\227\201\213\202\212\201��\201\227\201\237.md
      │       └── �\203\236\203��\202��\203\200\202��\203��\201��\230\213\202\222\233��\201\221\202\213\202\210\201\206\201��\201\227\201��\201��\201\237.md
      ├── blog.html
      └── js
          └── blog_vue.js
Nuxt上でのd3を利用した散布図の作成方法
櫻井 裕司
2021/10/29 櫻井 裕司
techdataAnalytics
クリック可能な散布図をNuxtjs上で作成する場合にd3.jsが汎用性が高く便利でした。利用するにあたって難しかった点などを備考録としてまとめています。
アクセスログを可視化しGAのデータを直感的に理解できる型態にする試み(ネットワーク型)
櫻井 裕司
2021/09/05 櫻井 裕司
techdataAnalytics
ビジネスに活きる分析を進める上で弊社では「理解できる」ことを重要と考えており、特に直感的理解は可視化を進める上で特に重要だと考える内容の一つです。弊社では様々なお客様のデータ分析を進める上で常により示唆の大きい可視化を追求しており、今回はその中で最近試みているネットワーク側の可視化についてまとめたいと思います。
代表櫻井による特別講演会が白陵高等学校で開かれました
櫻井 裕司
2021/07/31 櫻井 裕司
eventpersonal
2021年の夏に兵庫県の私立白陵高等学校において、代表櫻井による特別講演会を開催いたしました。今振り返って高校の頃の自分に伝えたいことについてお話しました。
Nuxtで動的ページを随時追加する場合にNot Foundとなる
櫻井 裕司
2021/05/31 櫻井 裕司
tech
Nuxtで動的ページを登録する方法はありますが、登録後に随時コンテンツが追加される際はNot Foundとなってしまうので、そう言った際の対処方法について
GKEをやめてCloud Runを始めてみました
櫻井 裕司
2021/04/19 櫻井 裕司
tech
firebaseで構築したシステムの裏で動かすバッチの負荷が大きく、cloud functionsで終わらなかったためCloud Runを利用してみました。動作確認までの知見等を雑多にまとめてみました。
AWSをやめてfirebaseを使い始めて感じたメリットやデメリットとそれの対応策(LT登壇内容)
櫻井 裕司
2021/03/26 櫻井 裕司
techeventpersonal
みそかつウェブ・GDG Nagoya主催の「around firebase」とCloud Native Nagoya主演の「Cloud Native Nagoya」にてfirebaseのLTをさせていただきました。そこで会話させていただいたfirebaseを使い始めて感じたメリット・デメリットについてまとめています。
PWA+SPAのwebアプリ作成にnuxtjs+firebaseがめちゃ便利だった
櫻井 裕司
2021/01/16 櫻井 裕司
tech
PWA+SPAのwebアプリを作る際にnuxt.js+firebaseを合わせて利用すると便利だったので知見を書き留めています
s3のhostingでPWAを導入する方法
櫻井 裕司
2020/12/19 櫻井 裕司
tech
アプリ作成時にpwaが比較されることが多かったですが、実際にpwaを実装した経験がなかったため今回自社サイトをPWA化してみました。
dockerでseleniumを動かしてみる(chrome_headless)
櫻井 裕司
2020/12/06 櫻井 裕司
tech
seleniumの相談をいただくことが増えたため、seleniumの勉強もかねてdockerでの実行テストを行いました
THE DECKのイベントにお邪魔させていただきました
本林 秀和
2020/12/05 本林 秀和
eventpersonal
大学コンソーシアム大阪のイベント@The DECK にお邪魔してきました
flutter(dart)を触ってみた感想
櫻井 裕司
2020/11/18 櫻井 裕司
tech
android向けアプリへの対応も考慮してflutter(dart)を触ってみたので、感想をまとめておこうと思います。理解が深まっていく中で定期的にまとめていければと思います。
代表本林による特別講演会が滝高校で開かれました
本林 秀和
2020/11/07 本林 秀和
eventpersonal
2020年11月7日(土)愛知県の私立滝高校において、代表本林による特別講演会を開催いたしました。IT業界やデータサイエンスについてお話しました。
AWS・GCPを選ぶ際の観点
櫻井 裕司
2020/10/28 櫻井 裕司
tech
AWSかGCPを選ぶ際の観点について書き留めておこうと思います
CloudFormationとterraformの比較
櫻井 裕司
2020/10/04 櫻井 裕司
tech
AWS CloudFormationとterraformの両方を使ってみて感じた違いをまとめてみました。
iosのcallkit周りでできること
櫻井 裕司
2020/08/24 櫻井 裕司
tech
新規事業を検討する上でios(swift)の電話周りでできることを調査したため、調査結果をブログとして残しています。
【個人ブログ】CTOの株運用ブログ_順調な滑り出し
櫻井 裕司
2020/07/19 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省特定サービス産業実態調査のデータ分析
櫻井 裕司
2020/07/18 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「特定サービス産業実態調査」について見ていこうと思います。
「お絵かきつみ木バトル」をリリースしました
櫻井 裕司
2020/07/12 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「お絵かきつみ木バトル」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
総務省工業統計調査のデータ分析
櫻井 裕司
2020/07/11 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「工業統計調査」について見ていこうと思います。
【個人ブログ】CTOが個人的に株をはじめました
櫻井 裕司
2020/07/08 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省サービス産業動向調査のデータ分析
櫻井 裕司
2020/07/08 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。初回は「サービス産業動向調査」について見ていこうと思います。
タスク管理アプリ「タスククロス」をリリースしました
櫻井 裕司
2020/04/08 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「タスククロス」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
【terraform】gcpでcicd環境を構築する方法
櫻井 裕司
2020/01/04 櫻井 裕司
tech
企業サイトはAWSを利用しているのですが、要件によってはGCPの方が適している場合もあるため、GCPでのcicd構築も行いました。AWSと比較しつつ説明しているため是非ご参考にしてみてください。
【合格体験記】GCP_Cloud_Archtectに受かりました
櫻井 裕司
2019/12/23 櫻井 裕司
personalqualification
Google Professional Cloud Architectに合格したので、勉強法別のコスパをまとめてみました。
AWSでサブドメインなし(wwwなし)からサブドメインあり(wwwあり)へのリダイレクト設定
櫻井 裕司
2019/12/23 櫻井 裕司
tech
もともと企業サイトがサブドメインありで公開していたが、サブドメインなしでもエラーなく接続できるように設計。terraformで作成しているので是非ご参考ください。