Twitter のヘッダを作成。プロ生ちゃんイラストも利用できる「ProfHeaderMaker」

わびさび

みなさんこんにちは。”わびさび“です。趣味でフリーソフトの作者などやっております。 今回は、Twitterのプロフィールヘッダを作成できる Web アプリ「ProfHeaderMaker」を紹介したいと思います。

ProfHeaderMaker

ProfHeaderMaker

ProfHeaderMaker

「ProfHeaderMaker」は、図形、画像、文字、イラストを配置するだけで、簡単に Twitter のプロフィールヘッダを作成できる Web アプリケーションです。 完成したプロフィールヘッダ画像は、Twitter にそのまま登録したり、JSON 形式で保存しておいて、また読み込んで編集できます。

使い方

使い方

使い方

赤色の枠で囲まれた場所にあるボタンを押下すると、オブジェクトの追加や削除ができます。追加したオブジェクトを画面上で選択すると、緑色で囲まれた領域でオブジェクトの詳細な情報を入力できます。

  • btn_select オブジェクトの選択
  • btn_fb オブジェクト表示順序の変更
  • btn_poly 多角形オブジェクトの追加
  • btn_star 星形オブジェクトの追加
  • btn_rect 四角形オブジェクトの追加
  • btn_circle円形オブジェクトの追加
  • btn_add_image 画像オブジェクトの追加
  • btn_text テキストオブジェクトの追加
  • btn_del オブジェクトの削除

ヘッダ画像描画領域の上下の若干暗い部分は、Twitter を PC ブラウザーで開いた際に隠れて見えなくなる領域を示しています。ヘッダ画像を作成する際の参考にしてください。

プロ生ちゃんイラストを追加する

プロ生ちゃんイラストを追加する

プロ生ちゃんイラストを追加する

btn_add_image ボタンを押下します。 緑色で囲まれた領域の、「画像を選択する」ボタンを押下します。「プロ生ちゃん」ボタンがあるので「プロ生ちゃん」ボタンを押下すると、 プロ生ちゃんイラストが選択できます。

作成中のデータを JSON で保存する

btn_save_json ボタンを押下すると、現在作成中のヘッダ画像のデータが JSON 形式でダウンロードできます。データを保存しておけば、後日に途中からヘッダ画像の作成を継続することができます。

ダウンロードした JSON ファイルは、btn_load_json ボタンを押下することで読み込めます。

Twitter へ登録

Twitter 認証

Twitter 認証

btn_set_twitter ボタンを押下すると、ProfHeaderMaker アプリの認証ページが表示されるので、「連携アプリを認証」ボタンを押下すると、現在中のヘッダ画像が Twitter に登録されます。

みなさん使ってみてね

ProfHeaderMaker は、お絵かきソフトなど無くても Web アプリだけで、Twitter のプロフィールヘッダを簡単に作成できるので、ぜひともお試しください。

利用した技術

  • HTML5 + CSS3
  • JavaScript/JSON

リンク