Written by Manabu Bannai

【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】

PORTFOLIO

『ShareHtmlを、もっと綺麗にしたメーカー』という何ともやる気のない名前のサービス(?)を作りました。アイキャッチ画像付きのサイトリンク生成ツールです。

【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】
» ShareHtmlを、もっと綺麗にしたメーカー

開発に使ったツールまとめ

開発環境をまとめてみます。僕は1人で開発することが大半なので、寂しいプログラマにとっては便利な開発環境かもしれません。

ローカル開発環境

MAMP PRO:ちょっと古いかもだけど、僕としては十分満足してます

デザイン

Sketch:直感的にデザインできて最高

コーディング

Sublime Text3:定番ですね
CodeKit:CSSとデプロイの効率化。CSSとJSのminify自動化用

サーバー関連

Transmit:本番アップロード用
DigitalOcean:イケてるVPSサーバー。安いし使いやすい。
Let’s Encrypt:無料SSL

音楽

Spotify:開発時のテンションを上げる為
TunnelBear(VPNでIPアドレスを偽装。日本でもSpotify使えます)

コード公開&解説

画像/タイトル/ディスクリプション取得にはEmbedというPHPライブラリを使っています。
» oscarotero/Embed
» ShareHtmlのコードDLはこちら(github)

Embedの使い方

Embedがわりと便利だったので、使い方をざっくり解説しておきます。

まずはCurl Liblaryをインストール

# curlをインストール
$ sudo apt-get install php5-curl

# インストール完了したら、apacheを再起動します
$ sudo apache2ctl restart

その後、ComposerでEmbedをインストール

$ composer require embed/embed

その後、下記の感じで記事から情報取得できます。

<?php
require_once( 'vendor/autoload.php' );
use Embed\Embed;

// URLを読み込む
$info = Embed::create("https://manablog.org/");

$title = $info->title; // タイトルを取得
$description = $info->description; // ディスクリプションを取得
$thumb = $info->images[0]['value']; // 画像を取得

» ShareHtmlのコードDLはこちら(github)

ざっくりですが以上となります。

プログラミングおもしろそうって思ったら下記をどうぞ。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

マーケティング興味ある方は下記をどうぞ。

プログラミングもおもしろいですが、マーケティングもかなり面白いです。
» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。

人気記事:映画を使って楽しく英語学習しましょう。

» 英語学習におすすめの映画10選|勉強法もあわせて解説