@page { size: 280mm 5000mm; margin: 15mm; } html, body { margin: 0; padding: 0; font-size: 14px; line-height: 1.6; } * { page-break-inside: avoid !important; page-break-before: avoid !important; page-break-after: avoid !important; break-inside: avoid !important; break-before: avoid !important; break-after: avoid !important; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em;
はじめに 優れたOSSのオンラインドキュメントは、大抵内容も素晴らしいのですがUXも素晴らしいと感じることが多いです。 あの洗練されたUIをもつWebサイトはほとんどの場合、技術文書作成向けの静的サイトジェネレータが使用されています。 この記事では独断と偏見でおすすめの技術文書の作成に利用可能な静的サイトジェネレータを5つ紹介します。 1. Docusaurus 公式ドキュメント: https://docusaurus.io/ DocusaurusはMeta社のチームが開発しているReactベースの静的サイトジェネレータです。 Docusaurusのメリット 豊富な機能 高いカスタマイズ製 スタイルの変更などが比較的容易 Docusaurusのデメリット 高機能すぎるゆえにVitePressやVuePressよりかは若干パフォーマンスが悪い あくまでVitePressなどと比較しての話で気
はてなブログは基本的に記事ごとにアイキャッチ画像を設定でき、好きな画像をアイキャッチとして設定できるのだが、記事のタイトルなどから自動生成してくれる「自動生成アイキャッチ」機能がある。 これまではいかにも自動生成ではてなブログ～って感じのデザインだったのだが、このたび有料プラン利用者向けにHTMLを使って自由にカスタマイズできる機能を提供された。 staff.hatenablog.com つい先日このブログもはてなブログPROに切り替えたので、ちょっとHTMLをいじってみた。 はてなブログに投稿しました はじめてのミュージカルなに観る？劇団四季のかんたん作品紹介 - 虹はね、 https://t.co/CF1eWBXdSP#はてなブログ— すぴ🐭🎀 (@spica_mic) 2024年3月16日 過去のツイート含めて切り替わっている！ どうやってカスタマイズしたか残しておくので、ぜひ参
CSSにまだ詳しくなかったり、ページデザインよりも本文の執筆に注力したい人のために、Vivliostyleでは簡単にデザインを適用できる「Vivliostyle Theme」が用意されています。第3回では、Vivliostyle Themeの使い方や、Vivliostyle Themeを実現するためのCSSの機能、自分でVivliostyle Themeを作って公開する方法について紹介します。 Vivliostyle Themeについて Vivliostyle Themeは、Vivliostyleワークフロー上で簡単にページデザインを適用するための仕組みです。CSS組版を実現するVivliostyleは、ページデザインをCSSで実現できることが最大のメリットですが、逆説的に言うとCSSを知らないとデザインの変更ができないとも言えます。CSS自体は広く普及しており、CSSを学ぶ環境も十分に整
Vivliostyle は、CSS 組版で本を作るためのツールとして、少しずつ知られるようになってきたかと思います。そして、最近の更新では、目次ナビゲーション機能、Web Publications 対応など、Web／電子出版ビューアとしても、使い勝手のよいものを目指しています。この「Vivliostyle Viewer で CSS 組版ちょっと入門」では、Vivliostyle Viewer でできることを中心にした CSS 組版のちょっとだけ入門を書いてみます。 Vivliostyle Viewer の紹介 Vivliostyle Viewerhttps://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html は、ブラウザ上で動作する CSS 組版エンジン vivliostyle.js とビューア UI
Re:VIEWではじめる(e)Book制作 Re:VIEWは電子書籍と紙書籍のための、簡潔かつ強力なデジタル出版ツールです。コンピュータ書等の技術書籍（紙・電子）の商業出版や同人出版に利用されています。 使い方 $ gem install review $ review-init my-awesome-book $ cd my-awesome-book $ (... ファイルの修正 ...) $ rake epub ## EPUBを生成 $ rake pdf ## PDFを生成(LaTeX利用) サポートしているフォーマット Re:VIEWは執筆用記法（入力フォーマット）としては独自のフォーマット（「Re:VIEWフォーマット」）を使用しています。 閲覧用フォーマット（出力フォーマット）としては以下のようなフォーマットを利用できます。 EPUB PDF (LaTeX) InDesign (
こんにちは、以前 FlightBooksというサービスを立ち上げていたのですが、2年ほどメンテしていなかったため、ローカル動作するOSS版として公開することにしました。 OSS版を作るにあたり、エディタ部分はVSCodeなりお好きなエディタを使ってもらうとして、 MarkdownからHTMLを生成する部分 HTMLからPDFを生成する部分 を切り出して公開しました。 ほかのサービスや技術と何が違うの？ 技術書をマークアップテキストで書くプラットフォームとしては、Re:VIEW、Vivliostyleなどがありますが、FlightBooksは「出版やDTPに関する知識がなくても印刷所にだしたい」というエンジニア諸氏のために開発されました。 「商業印刷」にどこまで向き合うか ご家庭のプリンタに印刷を指示すると、ファイルの情報がプリンタドライバに送信され、そこでインクの出し方を制御するためのデー
開発者向けのツールを展開する企業「JetBrains」がドキュメント作成のためのツール「Writerside」を早期アクセスで公開しました。早期アクセスの期間中はWritersideを無料で利用できるとのことなので、実際に使って試してみました。 Writerside - JetBrains が提供する新しい技術文書作成環境。 https://www.jetbrains.com/ja-jp/writerside/ Writersideの公式ページを開き、「ダウンロード」をクリックします。 今回はスタンドアロンツールとして利用するので、「ダウンロード」をクリックします。JetBrains IDEを利用している人はプラグイン形式で導入することも可能とのこと。 インストーラーがダウンロードされるのでダブルクリックして起動します。 「Next」をクリック。 インストールには空き容量が1.0GB必要で
海外ストリーマーの間では少し前から流行っていたらしいのですが、 日本ではまだあまり情報が無いようなので、記事にまとめさせて頂きました。 目次 TL;DR(要約)完成イメージ必要なものハードウェアの準備セットアップソフトの起動フロント側の動作テスト配信ソフトに追加するおしまいTL;DR(要約) ANT+対応ガジェットを使い心拍数をNode.jsに送信。 Node.jsからHTMLで作ったフロントへSocket.ioで送信。 OBSでHTMLを読み込んで画面に映す。 完成イメージ イメージはあくまでも例で、ここで紹介する方法は、 心拍数を(アプリのキャプチャ等ではなく)数字として取得し、JavaScriptに渡す事が目的となります。 必要なもの ANT+に対応した心拍計(約8000円) ANT+に対応したドングル(約3000円) Windows PC(Macでも動くらしいが未検証) Node.
はじめに 大学の講義ノートをいくつかGitHubで公開しています。 講義ノートをMarkdownで書いてGitHubで公開、というのをしばらく続けて、いろいろノウハウが溜まったので共有してみようと思います。 大学の講義ノートをどうするか問題 昔から大学の講義ノートを公開する人は結構多いです。最初期は、LaTeXで書いてPDFで公開することが多かったように思います。これはこれで良いのですが、基本的にはダウンロードして印刷して読む前提であり、ウェブで気軽に読める形ではありませんでした。その後、LaTeX2HTMLを使って、LaTeXファイルをHTMLに変換して公開するケースが増えました。これによりウェブで講義ノートが気軽に閲覧できるようになったのですが、いかにも「LaTeX2HTMLを使って変換しました」という外観になるのと、(少なくともデフォルトでは)レスポンシブではなく、スマホ非対応になる
Docusaurus is a project for building, deploying, and maintaining open source project websites easily. Short on time? Check out our 5-minute tutorial ⏱️! Tip: use docusaurus.new to test Docusaurus immediately in a playground. Simple to Start Docusaurus is built in a way so that it can get running in as little time as possible. We've built Docusaurus to handle the website build process so you can fo
Build optimized websites quickly, focus on your content Powered by MDXSave time and focus on text documents. Simply write docs and blog posts with MDX, and Docusaurus builds them into static HTML files ready to be served. You can even embed React components in your Markdown thanks to MDX. Built Using ReactExtend and customize your project's layout by writing React components. Leverage the pluggabl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
