Twitter のヘッダを作成。プロ生ちゃんイラストも利用できる「ProfHeaderMaker」
みなさんこんにちは。"わびさび“です。趣味でフリーソフトの作者などやっております。 今回は、Twitterのプロフィールヘッダを作成できる Web アプリ「ProfHeaderMaker」を紹介したいと思います。
ProfHeaderMaker
「ProfHeaderMaker」は、図形、画像、文字、イラストを配置するだけで、簡単に Twitter のプロフィールヘッダを作成できる Web アプリケーションです。 完成したプロフィールヘッダ画像は、Twitter にそのまま登録したり、JSON 形式で保存しておいて、また読み込んで編集できます。
使い方
赤色の枠で囲まれた場所にあるボタンを押下すると、オブジェクトの追加や削除ができます。追加したオブジェクトを画面上で選択すると、緑色で囲まれた領域でオブジェクトの詳細な情報を入力できます。
オブジェクトの選択
オブジェクト表示順序の変更
多角形オブジェクトの追加
星形オブジェクトの追加
四角形オブジェクトの追加
円形オブジェクトの追加
画像オブジェクトの追加
テキストオブジェクトの追加
オブジェクトの削除
ヘッダ画像描画領域の上下の若干暗い部分は、Twitter を PC ブラウザーで開いた際に隠れて見えなくなる領域を示しています。ヘッダ画像を作成する際の参考にしてください。
プロ生ちゃんイラストを追加する
ボタンを押下します。 緑色で囲まれた領域の、「画像を選択する」ボタンを押下します。「プロ生ちゃん」ボタンがあるので「プロ生ちゃん」ボタンを押下すると、 プロ生ちゃんイラストが選択できます。
作成中のデータを JSON で保存する
ボタンを押下すると、現在作成中のヘッダ画像のデータが JSON 形式でダウンロードできます。データを保存しておけば、後日に途中からヘッダ画像の作成を継続することができます。
ダウンロードした JSON ファイルは、
ボタンを押下することで読み込めます。
Twitter へ登録
ボタンを押下すると、ProfHeaderMaker アプリの認証ページが表示されるので、「連携アプリを認証」ボタンを押下すると、現在中のヘッダ画像が Twitter に登録されます。
みなさん使ってみてね
ProfHeaderMaker は、お絵かきソフトなど無くても Web アプリだけで、Twitter のプロフィールヘッダを簡単に作成できるので、ぜひともお試しください。
利用した技術
- HTML5 + CSS3
- JavaScript/JSON