2018-12-21に更新

「おとしぶみ|縦書き画像メーカー」の紹介あるいはexpress-vueのススメ

だって、Nuxt.jsでやる必要なくない?

生きていると、縦書きのテキストを画像にしてSNSにシェアしたいときがありますよね。そんなとき使えるWebサービスがほしいと思ったのでつくりました。

おとしぶみ|縦書き画像メーカー

縦書きしたいテキストを画像化して、その画像を表示できるURLを発行してくれます。Nehan.jsで縦書き表示したテキストをSeleniumでスクショして、その画像をCloud Storageに投げているだけです。とても雑なつくりなので実用に耐えるかは謎です。察してください。

フレームワークとしてexpress-vueというやつを採用しました。

express-vue/express-vue: Vue rendering engine for Express.js. Use .Vue files as templates using streams

リポジトリ名のとおりのものです。単一ファイルコンポーネントをビューに使いたいけど、Nuxt.js(というかvue-router)でルーティングしなくてよいのではという気分のときに使うと便利です。const expressVueMiddleware = expressVue.init(); app.use(expressVueMiddleware);などとすると以下のような雰囲気のことができます。詳しい使い方はUsageを読みましょう。

const express = require("express");
const bodyParser = require("body-parser");

const router = express.Router();
router.use(bodyParser.json());
router.use(bodyParser.urlencoded({ extended: false }));

router.get("/", (req, res) => {
    req.session.csrf = req.csrfToken();
    res.status(200).renderVue("index.vue",
        {
            alert: "",
            sid: req.sessionID,
            csrf: req.session.csrf
        }, {
            head: {
                metas: [
                    { property: "og:type", content: "website" },
                    { property: "og:title", content: "おとしぶみ|縦書き画像メーカー" },
                    { property: "og:url", content: "https://otoshibumi.herokuapp.com/" },
                    { property: "og:image", content: "https://otoshibumi.herokuapp.com/public/image.jpg" },
                    { property: "og:site_name", content: "おとしぶみ" },
                    { property: "og:description", content: "テキストを画像化してシェア可能なURLを生成します。" },
                    { name: "twitter:card", content: "summary" }
                ]
            }
        }
    );
});

たとえばNuxt.jsだとページごとにstructuredDataを設定するといったSEO的なことをasyncData経由でやるのがわりと面倒ですが、express-vueだとhead内にぶち込めばできます。便利ですね。

ただし、Vue.use()が使えなかったりと微妙に不器用なところもあるのでNuxt.jsの完全な代替にはならないです。

使っているもの

  • express-vue(フレームワーク)
  • Heroku(Paas)
  • Firebase(Realtime Database, Cloud Storage)
  • Milligram(A minimalist CSS framework)
  • nehan.js(縦書き)
  • Selenium(スクショを撮って画像化してる)

ハマりどころ

HeadlessChromeでPDF出力したかった(できない)

できません。当初、Vivliostyle.jsを使いつつ印刷用のCSSを適用すれば縦書きがきれいに組まれた画像を生成できるのでは、などと壮大なことを考えたのですが、できませんでした。

2番めの記事で--kiosk-printingというオプションを指定して印刷ダイアログを開けばいけると書かれていますが、いけませんでした。--print-to-pdfは指定しているとそもそも動かなかったです。

TypeError: bundle.data is not a function

express-vueに渡す単一ファイルコンポーネントはexport default {}の中身が空だと動きません。

Cloud Storageに保存したファイルのダウンロードURLを発行する

使っているサービスアカウントに「サービスアカウントトークン作成者」の権限を付与するとbucket().file().getSigndURL()で認証済みURLを取得できるはずなのですが、なぜかうまくいかなかったです。詳しい人、教えてほしい。

ファイルアップロード時のオプションにpredifinedAcl: "publicRead"と設定してなんとかごまかしています。

Windowsのローカル環境でchromedriverのPATHを通したい

これを使うと楽です。

HerokuでSeleniumを動かす準備

Buildpackを使います。

このままだと日本語フォントがないために表示した日本語の文字列がすべて豆腐になるため、プロジェクトルートの.fontsディレクトリ以下に適当な日本語フォントを配置します。以下を参考にしましょう。

Originally published at qiita.com

paithiov909

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント