技術ブログの記事をWebから投稿する

これは旧eviry tech blogから移行した記事です。

どうも、YouTuberです。 みなさまごきげんよう、エンジニアのharutaです。

平成最後の夏なので記事を書こうと思います。

・・・何が平成最後だよ、人生で最後かもしれないだろ！！

---

記事投稿をWebから

本題です。前回ご紹介した通り、本ブログはhugoを使って静的なhtmlを生成しています。更にそのhtml生成処理はgitへのプッシュをトリガーにしています。つまりgitへのプッシュがWebからできれば投稿するエンジニア諸氏はわざわざブログの環境をローカルに置く必要はないということです。

作ったもの

論より証拠、百聞は一見にしかずということで作ったものをスクリーンショットでご紹介します。

今こそ発進だ！ 超合金！ハイパー投稿システム！！

・・・

・・・・・・

（かっこいい・・・）

仕組み

記事編集はご覧の通りなわけで、投稿方法に関しては右上の投稿ボタンが投稿用のAPIを呼び出す形になっています。APIはAWSのAPI GatewayとLambdaで実装されています。

編集画面

スクショのまま。上の方の

• タイトル
• スラッグ
• カテゴリ
• タグ
• 著者

がメタ情報で下のでっかいテキスト入力エリアが記事本文になります。ちなみに記事はマークダウンで記述して、プレビューは右側にリアルタイムで表示されます。Qiitaみたいなやつですね。

あとはメタ情報入力の下のイカしたボタンは画像アップロードボタンです。画像をアップロードするとS3に置かれて、URLと[クリップボードにコピー]ボタンが吐き出されます、便利。ちなみに画像はhugoで処理する時にショートコード使わないとサイズ指定できないです。ただショートコードで書いてるとプレビューができないので、webのマークダウン解釈にhugoの画像貼付ショートコードを埋め込みました、魔改造万歳。

投稿API

投稿のAPIはCodePiplineを走らせたいのでgitのmasterブランチに新規のpostファイルを直で置きます、あまりいい方法じゃないです。

var aws = require('aws-sdk');
var cc = new aws.CodeCommit({ apiVersion: '2015-04-13' });

// --------------- Main handler -----------------------

exports.handler = (event, context, callback) => {
    var dt = new Date();
    var year  = dt.getFullYear();
    var month = ('0' + (dt.getMonth()+1)).slice(-2);
    var day   = ('0' + (dt.getDate())).slice(-2);
    var hour  = ('0' + (dt.getHours())).slice(-2);
    var min   = ('0' + (dt.getMinutes())).slice(-2);
    var sec   = ('0' + (dt.getSeconds())).slice(-2);
    var body = decodeURIComponent(event.body.replace(/\+/g, " "));
    var key = "" + year + month + day + hour + min + sec + "_" + event.author + ".md";
    let branchParam = {
        branchName: 'BRANCHNAME',
        repositoryName: 'REPOSITORYNAME'
    };
    cc.getBranch(branchParam, function(err, data){
        if(err){
            console.log(err);
        }
        var pushParams = {
            branchName: 'BRANCHNAME',
            fileContent: body,
            filePath:'REPOSITORYROOT/CONTENTPATH/POSTPATH/' + key,
            repositoryName: 'REPOSITORYNAME',
            commitMessage: 'add:' + key,
            name: event.author,
            parentCommitId: data.branch.commitId
        };
        cc.putFile(pushParams, function(err, data) {
            if(err){
                console.log(err);
            }
            let ret = {
                status:true
            }
            callback(null, ret)
            context.done();
        });
    });
};

AWSのCodeCommit APIを使用しています。これでCodePipelineが動き出すってことはputFileはプッシュ扱いになるんですね〜。

改善点

• 実はWebプレビュー用のマークダウン解釈とhugoのマークダウン解釈が違う上にWeb ⊃ hugoな状態なのでデプロイすると思った通りになっていないなんてことがしばしば。Webでリアルタイムでなくともhugo版のプレビューができれば便利な気がする
• 記事の新規投稿はできるけど編集はできない、微修正とかするとなるとgitから落としてきて修正しないといけない。非常にめんどくさいしこのせいでエンジニア諸氏は結局ローカルにブログのgitがある。記事ごとにブランチ作って投稿＝プルリクにすればとも考えたけど作業量多いので挫折しちゃった (๑⌒ー⌒๑)ﾃﾍ♡