記事カードを作れる「Blog Card Maker」を作りました

こんにちは、お読みいただきありがとうございます。
Ken(@gootablog)です。

記事カードを作れる「Blog Card Maker」というものを作成しました。

最近良く耳にするPHPのフレームワーク「Laravel」、JavaScriptフレームワーク「Vue.js」を初めて使ってみました。
いつも新しいツールを使うときはToDoアプリなどを作って公開せずに終わってました。これからは習作としていこうかなと。

使い方や使用したツールの説明など書いていくので参考になればと思います。

※ この「Blog Card Maker」はmanablogを運営しているマナブさんが作成した「ShareHtmlを、もっと綺麗にしたメーカー」を参考にして習作しました。

BLOG CARD MAKERの使い方

使い方は簡単です。

入力フォームにURLを入力し、Enterを押すと該当ページのタイトル・アイキャッチ・ディスクリプションを取得し、HTMLとCSSを出力します。使用するサイトでCSSを書いておけばHTMLを記入するだけでカードとして表示されます。

デフォルトで出力しているCSSはレスポンシブにも対応しています。自分でCSSを書くのが面倒な人はコピペして使ってください。

使用したツール

Sketch
言わずとしれたデザインツール。最近使い始めましたが直感的に操作できて使いやすいです。

以下も参考にどうぞ

エンジニアがデザインツールのSketchを買ってみた

普段はエンジニアとして働いている僕が趣味でデザインをやってみようとデザインツールのSketchを買いました。始めようと思った理由、勉強の方法を書きました。

UdemyでSketchを勉強するには動画をサクッと見て実践するのがいい

エンジニアがデザインツールSketchを使ってみました。どう勉強しようか迷いましたがUdemyの動画コンテンツを使用してインプットしました。Sketchの動画コンテンツでどう使っていったかを書いています。

Docker
ローカル開発環境、本番環境ともにDockerを使用しました。イメージを作成しておけば同じ環境として使えるし、起動までが早いのでめっちゃ使いやすい。

PHP(Laravel 5.5)
PHPはプログラミングを始めたときからずっと使っています。人気のフレームワークを使ってみようと思ってLaravelを使用。今回作ったサイトはフレームワークなんて使わなくても作れますが、空気感を知るためにのみで採用してみました。いろんなモジュールが入っていて使いやすさ半端なさそうです。

JavaScript(Vue.js)
JavaScriptはこれまで少し苦手意識を持っていました。フロントエンドでは欠かせない言語になっているのでちょっとずつ使っていこうと思いました。JavaScriptフレームワークを初めて使ってみましたが、シングルページアプリケーションってストレスなく遷移なり処理されるのでいいですね。

Atom
Github社のエディタです。プラグインも豊富で使いやすい。

Deployer
PHP製のデプロイツール。個人開発のアプリでは特に不満なく使えてます。

デプロイツール「Deployer」をつかってみた。PHPerなら簡単に使えます

PHPで書かれているデプロイツール「Deployer」を初めて使ってみました。インストールから設定、デプロイまで一通りやってみたのでその方法を書いています。

さくらVPS
メジャーなので使ってみました。最低限のサーバー構築はできたほうがいいですね。

Let’s Encrypt
無料でSSL証明を発行できます。今回はDockerのイメージを使用して簡単に証明書を発行できるようにしました。

使ったツールの詳細な記事も今後追加していく予定です。

作ってみて

1ページなのでコーディング自体はサクッとできました。
ただ、VPSにDockerをインストールして使うのは初めてでローカルと少し設定が違ったりと時間を取られることが多かったです。やっぱりサーバーの環境構築・デプロイなどはたまにしか行わないので手こずりますね。ここをサクッとできると作って公開していくが楽になるので慣れていきたいです。

今回はじめて自分で作ったものを公開しようと思い作りましたが、ゴールを公開にするとモチベーションも続くのでやりやすかったです。
公開しておけば自分のポートフォリオにもなるしいいですしね。今後も勉強がてらだったり自分が使いたいツールを作って公開できたらと思います。