smellman's Broken Diary

クソみたいなもんです

2025/01/02の日記 - Honkitにmarkdownlintを導入する

自分が過去にHonkitで書いていたドキュメントに対してmarkdownlintを導入しました。

導入手順は以下の通りです。今回はmarkdownlint-cli2を使いました。

npm install --save-dev markdownlint-cli2

次に`npm run lint`でlintを実行できるように仕組みます。

まずは.markdownlint-cli2.jsoncを作成します。

{
  "$schema": "https://raw.githubusercontent.com/DavidAnson/markdownlint/main/schema/markdownlint-config-schema.json",
  "default": true,
  "config": {
    "MD013": { "line_length": 800 }
  } // 行の長さを800文字に制限
}

jsoncはjsonに対してコメントがつけられるという仕組みです。ここではMD013ルールの行の長さを800としています。これは日本語で書いているドキュメントなので一行が80文字は短いという観点から抑制をするためです。

続いて、markdownlint-cli2を実行するようにpackage.jsonのscriptsの項目に記載をします。

{
  "name": "vector_tile_book",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "honkit build",
    "serve": "honkit serve",
    "lint": "markdownlint-cli2 --config .markdownlint-cli2.jsonc '**/*.md' '#node_modules' '#_book'",
    "prebuild": "npm run lint"
  },
  "keywords": [],
  "author": "Taro Matsuzawa <btm@tech.email.ne.jp> (https://smellman.hatenablog.com/)",
  "license": "ISC",
  "devDependencies": {
    "honkit": "^6.0.2",
    "markdownlint-cli2": "^0.17.1",
    "send": "^1.1.0"
  }
}

markdownlint-cli2ではまず'**/*.md'と指定することで全てのmarkdownを処理するようにしています。

また、'#node_modules'、'#_book'と#から指定することで、除外するファイルを設定します。

あとはnpm run lintをして、エラーを確認してひたすら直していきます。僕の作ったレポジトリでは100件近くエラーがでていたので手動で直しましたが、プロジェクトによっては`--fix`をつけて自動的に修正するという仕組みを使うとよいでしょう。

次にGitHub Actionsで必ずmarkdownlintが通るように設定をします。

name: Publish

# Publish npm and dockerhub when Release Pull Request is merged
#
# https://hub.docker.com/r/honkit/honkit
on:
  push:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@v4
      - uses: DavidAnson/markdownlint-cli2-action@v19
        with:
          globs: '**/*.md'
  build:
    needs: lint
    runs-on: ubuntu-24.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 22
      - name: Restore npm cache
        id: restore-cache
        uses: actions/cache@v4
        with:
          path: node_modules
          key: js-depend-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
      - name: npm install
        if: steps.restore-cache.outputs.cache-hit != 'true'
        run: npm install
      - name: build docs
        run: npx honkit build
      - run: touch _book/.nojekyll
      - name: Deploy
        id: deployment
        uses: actions/upload-pages-artifact@v3
        with:
          path: _book
  deploy:
    runs-on: ubuntu-24.04
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

上記のyamlファイルではlint jobとbuild jobが依存関係にあります。lintが成功しない限りbuildは動かないため、markdownがlintを通ってない場合はGitHub Pagesにアップロードされることはありません(build jobとdeploy jobが依存関係にあります)。

今回作ったレポジトリは以下の物です。

github.com

まだPull Requestに対してmarkdownlintを書けるようにしてないというか、書いてるのが僕だけなので直接mainにぶち込んでるという状況なので、これから改善していきたいと思います。

あと、そもそもこのレポジトリの内容自体古いので内容の更新や追記などをしていきたいと思います。

ではでは。

2025/01/01の日記 - あけおめ

あけましておめでとうございます。

新年早々切れ痔でキレそうですが、みなさんいかがお過ごしでしょうか。

昨年はあまりよいアウトプットが出来なかったのですが、今年はイベントの運営や参加を通して良いアウトプットを出して行きたいです。

直近では、以下のイベントに参加する予定です。

  1. 小江戸らぐ 1月のオフな集まり (第270回)
  2. State of the Map Japan 2024/FOSS4G Hokkaido 2024
  3. オープンソースカンファレンス2025 Tokyo/Spring

stateofthemap.jp
foss4g.hokkaido.jp
event.ospn.jp

State of the Map Japan 2024ではまだ発表者を募集していますので、北海道に行けるぞ!って方は是非お申し込みを!なお、FOSS4G Hokkaido 2024の方は発表者は締め切っています。

オープンソースカンファレンス2025 Tokyo/Springは会社として申し込みをしています。出展はLobsta / Redmine GTT Projectが主になると思います。

www.lobsta.jp
github.com

ではでは。

2024/12/31の日記 GitLabに学ぶ パフォーマンスを最大化させるドキュメンテーション技術 読了

昨日読んだ「GitLabに学ぶ 世界最先端のリモート組織のつくりかた」に引き続いて、続編となる「GitLabに学ぶ パフォーマンスを最大化させるドキュメンテーション技術」をだいたい7ポモドーロで読み切りました。

www.seshop.com

前著でも言及した内容がたびたび出てくるので、前著でGitLabの考え方をインプットした上で、本著を読むとより理解が深まると思います。

ドキュメンテーション技術とありますが、単なるライティングだけでなく組織のカルチャーと深く結びついたドキュメンテーション技術という感じで、GitLabのような大きなリモート組織を理解、真似する上で重要な概念が説明されています。

個人的には今のところ一人で書いてるドキュメントがあって、これをなんとかしたいという所を知りたかったのだけど、全体として想像以上の学びがあり、大変良かったです。

なんとか、自分の所属している(会社以外を含めた)組織にちょっとでも広められたらなと思いました。

しかし、技術書(この本と前著は技術書なのかは微妙ですが)を3日で3冊も連続で読むのはくたびれました。疲れたー!

というわけで、明日以降はBLUE BACKSの「みんなの高校地学」を読んでいこうと思います。

まぁ、このペースで読んでもまだ積ん読があってですね...

では、良いお年を。

P.S. 今年もブレイクコア豊作だったよ!全然まとめる余裕ねぇー!!

2024/12/30の日記 - Tidy First?とGitLabに学ぶ 世界最先端のリモート組織のつくりかた 読了

昨日実家へ帰省する途中からTidy First?を読み始めて、今日の夕方前ぐらいには読み終えました。

www.oreilly.co.jp

エクストリームプログラミングでおなじみのKent Beckの本で、三部作の一作目ということで、個人がいつ「コードを整頓するか」にフォーカスを当てた一冊。

最初の方はどのように整頓するかがメインで、だんだんいつやるかがメインになっていくという内容です。

個人的には今後出る予定の二冊の内容次第で評価が決まるような本じゃないかなという印象でした。まぁ、わかりやすく説明されていて良かったんだけど、正直この量(120ページぐらい)の本でこの値段はちょっと...という所もあり、正直ちょっと戸惑いがあります。いや、良かったは良かったんだけどね。

次はPDFで昨日購入していた「GitLabに学ぶ 世界最先端のリモート組織のつくりかた」をiPadでひたすら読みました。

www.seshop.com

GitLab Handbookは前々から弊社としても存在は知っていて、弊社でもまねしようとしていたんだけど頓挫していたので読んだという感じです。

handbook.gitlab.com

GitLab Handbookという公に出ているコンテンツをベースにリモート組織をどうつくっていくかという視点からGitLabの実例を元に解説しまくるという本で、正直英語を読むのがきついと思っていた俺にはだいぶ良かった。

最近、失敗していた仕事の話とかにもわりと直結する話が出ていたり、会社としてどうリモートっていうものに対応していくかっていう良い指針になる本でした。

ただ、PDF版なので注釈が最後のページに固まってるのがちょっと辛い所はあった...

ちなみに、GitLabに学ぶシリーズの次の本、「GitLabに学ぶ パフォーマンスを最大化させるドキュメンテーション技術」の方が本来読みたかった本で、ちょっと寄り道という感じです。

www.seshop.com

というわけで明日から読んでいきます。

2024/12/19の日記 maplibre-react-nativeで作るトイレマップ

これはMapLibre Advent Calendar 2024の19日目の投稿です。

qiita.com

昔僕が書いたReact Nativeの本ではMapbox SDKを使ってトイレマップを実現していました。

github.com

当時(2018年)はまだMapLibreが存在していなかった時代です。

というわけで、今回はmaplibre-react-nativeを使って新しいトイレマップを作ってみました。

github.com

動かすだけなら以下の手順でいけると思います。

git clone https://github.com/smellman/ToiletMap-maplibre.git
cd ToiletMap-maplibre
npm install
bundle install
cd ios
bundle exec pod install
cd ..
npm run start

あとは "ios/ToiletMap.xcworkspace" を開いてxcodeでシミュレーターを起動すればいけます。

https://i.gyazo.com/fcbd3105aa3da7fb5e7d1d90b49e3b11.jpg

起動したあとにトイレを検索ボタンを押すとOverpass API経由でトイレを検索します。

https://i.gyazo.com/578ae6a0692c8a96244bc79c432a0138.jpg

トイレアイコンをタップをすると詳細が表示されるというものです。

https://i.gyazo.com/dcc62d12f7bb19000bc90c60d709eeaa.jpg

作り方は、普通にreact nativeのcliで新しいプロジェクトを作ってから、maplibre-react-nativeをインストールします。

npx @react-native-community/cli init ToiletMap
cd ToiletMap
npm install @maplibre/maplibre-react-native --save

maplibre-react-nativeはちょっと古いバージョン(alpha)が入ってしまうので、"^10.0.0-beta.11"に書き換えてもう一度npm installをします。

次にpod installとnpm run startをします。

cd ios
bundle exec pod install
cd ..
npm run start

あとはxcodeで"ios/ToiletMap.xcworkspace"を開いてシミュレーターでビルドしながらApp.tsxを書き換えていきます。

github.com

まぁ、コード読めばだいたいわかると思います!

ちなみにiPhoneの実機ではビルド失敗するのでそれは解決したら報告します!

ではでは。

2024/12/08の日記 - OpenStreetMapでくそでかSVGを作るツールを作った

OpenStreetMapで高品質な印刷をするためにはOpenStreetMap.org公式でサポートされているSVG出力機能を使うことが多いです。

ただし、例えばくそでかいSVG(10000x10000とか)を出力するときなどはサーバに負荷をかけてしまい、出力できないことがあります。

wiki.openstreetmap.org

そもそも、くそでかい範囲をGUIで選択するのも厳しいです。

というわけで、OpenStreetMapのhashとサイズ指定をして任意をSVG画像を出力するツールを作りました。

github.com

使い方はREADMEを見てください。

例えば、10000x10000のSVGを出力してChromeで見て250%拡大した例を以下に張ります。

SVGファイルの例

こんな感じでくそでかいSVGファイルを作る事ができます。

また、ソースコードはmapnikを使う良い例になっていると思いますので、ぜひともソースコードも覗いてみてください。

ではでは。

P.S.

PDF出力にも対応しました。

2024/12/01の日記 - State of the Map 2024発表者募集のお知らせとFOSS4G 2024 Japan コアデイ動画公開のお知らせ

今日はFocus To-Doを使ってPomodoroしていていろいろはかどりました。

というわけで今日の成果その1です。

State of the Map 2024の発表者募集を開始しました。

stateofthemap.jp

来年の2月15日(土)に札幌にてFOSS4G Hokkaido 2024と合同開催です。

foss4g.hokkaido.jp

発表はオンラインでも受け付けているので是非。あと、2月14日(金)にもFOSS4G Hokkaido 2024 ハンズオンおよびOpenStreetMap Japanもくもく会があります。

合わせて北光社さんのブログもチェックしてください。

qiita.com

以下は今日の成果その2です。

先日開催したFOSS4G 2024 Japanの動画編集を昨日行い、今日全てYoutubeにアップロードしました。

FOSS4G 2024 Japan - YouTube

www.osgeo.jp

サイトに全部貼り付けるのとても疲れました(わら

僕はA会場に張り付いていたので、B会場及びC会場の様子もあとで見ようと思います。

とりあえず、チェックよろです!