ムードボードっぽいものを簡単に作れる感じのWebサービス「Mood Board Creator」

全体的に大分眠たいデザインになってますが、ある程度形が固まったと言っても過言ではない為公開します。ユーザー認証は設けてませんが、作成したムードボードの保存やPDF出力などが可能です。IEには対応していません。

Mood Board Creator

【ムードボードってなに?】
別名としてはイメージボードとか言うらしいのですが、何かをデザインする際に言語化しにくいイメージ(超クールでキラキラしててすげえかっこいいみたいな)を共同するメンバーなどに伝えるために作成するスクラップ集のようなものです。
これまでそんなものは全く作った事が無かったので存在自体知りませんでしたが、最近になってようやく実物に近いものをクライアントから頂いた資料で見る事が出来ました。やはり使う人は使うらしい。

【なにができるの?】
以下のような単純なムードボードっぽいものが作れます。(画像をクリックするとデモ画面に移動)

【制作の経緯】
10月末頃に某マッシュアップアワード用に何か作りたいなと思ってたところ、半年くらい前に某氏より聞いたムードボードを思い出し、3日くらいあれば作れるだろうと思ってたら全然終わらず、そのままズルズルと制作を継続してようやくなんとなく形になったという次第です。

本当は自動保存機能や透過pngでの出力、テキストボックの追加機能なども付けようと思ってましたが、やる気がなくなったので一旦これで区切る事にして、気が向いたら機能を拡充しようと思います。

bot止まってます

twitterがxmlのサポートを10日で打ち切ってしまったらしく、気付いたら止まってました。

利用しているフレームワークも大分古くなっているため、新しいライブラリを導入する等して一からコードを書かないといけない感じなので、ちょっと時間がかかります。
多分、10月中には再開出来ると思いますが、遅くなったらごめんなさい。

追記(2012/11/16)
書くの忘れてましたが復活しました。

【さくらのVPS】php-mbstringのインストール

WordPressの「WP Multibyte Patch」プラグインを動作しようとしたところ、「お使いの WP Multibyte Patch を有効にするには、PHP の mbstring 関数が必要です。」というエラーメッセージが表示されたため、以下のコマンドで「php-mbstring」をインストール…

sudo yum install php-mbstring

しようとしたら出来なかった。

検索したところ、remiリポジトリを有効にすればインストール出来るらしいと判明。
そういえばCentOS6.2の標準リポジトリにphp5.3.xが含まれてなかったのでremiからインストールしてた。

参考:Install PEAR Mail/Mime Dependency issues in pure EPEL installation

以下のコマンドで再実行。

sudo yum --enablerepo=remi install php-mbstring
...

Warning: RPMDB altered outside of yum.
  Installing : php-mbstring-5.3.12-1.el6.remi.x86_64                                                           1/1 

Installed:
  php-mbstring.x86_64 0:5.3.12-1.el6.remi                                                                          

Complete!

なんかWarning!が出てるがインストール出来たらしい。
以下のコマンドでApacheを再起動し、Webサーバを最新の状態に更新する。

sudo /etc/rc.d/init.d/httpd restart

再度プラグインを確認したところ、今度は正常に有効化できた。

Google Analyticator が復活!しかし設定画面が表示されないバグ(?)が発生

※Google Analyticator v6.3.3のバージョンアップにより、この記事は陳腐化しています。(2012.09.18)


以前のエントリーで少しだけ触れましたが「Google Analyticator」という管理画面のダッシュボードにGoogle Analyticsの簡易的なアクセス解析結果を表示出来るプラグインがあるのですが、GoogleのAPI更新に伴って、簡易的なアクセス解析が表示されないという問題が発生していました。

作者のRonaldさんは既に開発終了宣言を出していたため、個々人でなんとかするか、引き継いでくれる人にまかせるかといった状態でしたが、、、この度、なんとアップデートしてくたようです!素晴らしい!

が、私の環境(WordPress v3.4.2)では若干問題が発生。

なんらかのプラグインと競合しているのか、あるいはバグ(?)なのか、最新版にアップデート後、一旦、Googleの認証をリセットしないといけないようなのですが、どうやらパスの指定?がおかしいらしく「WordPressのアドレス」ではなく「サイトのアドレス」になっているため、プラグインのresetメニューからでは正常なページに飛びませんでした。(404が帰ってきます)

私の環境限定かもしれませんし、バグだとすれば恐らアップデートがかかるとのではないかと思うのでそれを待った方が良いと思います。

追記(2012/09/16):
問題を把握してくれているようなので素直に待った方が良いでしょう。
Broken if WordPress is installed in a sub-directory

ただ、まったく推奨しませんが、仮に症状が同じで待ってられないという方は以下の方法を試せば何とかなるかもしれません。

※FirefoxであればFirebug、Chromeであればデベロッパーツールなど、リアルタイムでコード編集が可能なツールが必要です。(別の方法もありますが) (続きを読む…)

【防備録】node.jsでnode-http-proxyを使ってApacheとの共存環境を作ったのでメモ

 

※あまりテキトーな事書くのもどうかと思いますが動いたのでメモしておきます。

 

 

【概要】

WebSocketを使ったサービスが作りたくなり、どうせなら前から気になってたnode.jsを使おうと思い立ったわけですが、既存のホスティング環境(さくらのVPS)にはApacheが走っているため、そのまま使おうとすると「http://example.com:8124」とかポート番号直打ちになるため、ちょっとカッコ悪いという問題が発生。(80番ではApacheが走ってるのでnodeが動かせない。)

 

そのため、なんか方法は無いものかと調べたら以下の素敵なスライドを発見。

 

Node.js勉強会@関西 第0回 Node.jsでつくるリバースプロキシ

 

node製の「node-http-proxy」というこれまた素敵なものがあるらしく、これを使えばリバースプロキシが簡単に作れるらしい。

 

ただ既存の環境ではApacheにバーチャルホストを設定してるので、そのままやっちゃっていいものなのか、いまいち良く分からない。

 

そのため、さらに検索したところ、なにやら凄く分かり易いサンプルを発見。

 

Reverse HTTP Proxy (Apache + nodejs)

 

正にこれだ!ということで早速、実装に取りかかる事に。

 

 

【目的】

現在、ポート80番で動いているApacheを「8080番」で動作するように変更し、node-http-proxyを使ったリバースプロキシを「80番」動作させて、各ドメインごとにApacheで処理するか、nodeで処理するかを自動的に振り分けるようにします。

 

 

【やった事メモ】

※以下、既にnode.jsはインストール済みという前提で進めます。環境はCentOS6.2です。

 

  1. 何はともあれnode-http-proxyのインストールを行います。

    npm install -g http-proxy
    npm link http-proxy
    
  2. サーバの適当な場所に上記の参考先を元にしてリバースプロキシのjsファイルを作成。

    [proxy.js]

    var httpProxy = require('/path/to/node_modules/http-proxy');
    //※本当はフルパスで読み込まなくてもいいはずです
    
    var options = {
      hostnameOnly: true,
      router: {
        'example1.com': '127.0.0.1:8080',
        'example2.com':'127.0.0.1:8080'
      }
    };
    var proxyServer = httpProxy.createServer(options);
    proxyServer.listen(80);
    console.log('It Works!');
    

    ※http-proxyの呼び出しがフルパスなのは -g を付けてインストールしたにも関わらず、私の環境ではNODE_PATHが通ってないらしく、良く分からなかったのでフルパスで書きました。通常はフルパスの必要はありません。

  3. Apacheのポートをこれまでの「80番」から「8080番」に変更。当然、そのままではサイトに繋がらなくなるので、既にApacheで何か動かしてる人は注意して下さい。
    以下、設定例。

    [/etc/httpd/conf/httpd.conf]

    Listen 8080
    
    NameVirtualHost *:8080
    
    <VirtualHost *:8080> 
      DocumentRoot /path/
      ServerName www.example1.com
      ServerAlias example1.com *.example1.com
    </VirtualHost>
    
    <VirtualHost *:8080>
      DocumentRoot /path/
      ServerName www.example2.com
      ServerAlias example2.com *.example2.com
    </VirtualHost> 
    

    コンフィグの修正が完了したら構文確認後、Apacheを再起動、またはコンフィグをリロードします。

    /usr/sbin/apachectl -t
    /etc/init.d/httpd restart
    

    この時点で一旦、80番で繋がらなくなります。

  4. 先ほど作ったリバースプロキシ(proxy.js)を動かします。
    node proxy.js
    

    動いた!・・・と思いきやエラーが発生。

    Error: listen EACCES
    

    どうやら80番で動かすにはsudoでやらないといけないらしい。再度実行すると今度は無事に動いた。

    sudo node proxy.js
    

    上手くいっていれば、この状態でバーチャルホストに設定されたドメインにアクセスするとこれまで通りちゃんとレスポンスが帰ってきます。上手くいかない場合はリバースプロキシの設定とApacheの設定をもう一度見直して下さい。

  5. さて、動いたのは良いのですが、このままの状態だとコンソールに「It Works!」と表示されたままで他の作業が出来なくなります。Macのターミナルなら標準でタブが付いてるので大した問題でもないのかもしれませんが、素人に毛が生えた程度の私くらいのレベルだともはやこの世の終わりに近い状態です。

    というかnode.jsには「forever」というnode.jsで作成したプログラムを永続化し、デーモンとして管理できるパッケージがあるのでそれを使えば話は早いのですが、今回のリバースプロキシは「80番」という特権ポートで動かしているためか、どうやらforeverでデーモンにする事ができないらしい???

    じゃあどうするのかというとコマンドの最後に「&」を付けてコントロールを奪われないようにします。

    sudo node proxy.js &
    

    こうするとバックグラウンドでプロセスが動き続けるので、リバースプロキシを動作させた後もコンソールのコントロールを奪われる事無く、色々と作業を継続出来ます。ただ、この方法は色々と突っ込みどころが多そうなので、詳しい人はデーモンにする詳しい方法とか教えてもらえると助かります。

    参考リンク:

    nodeのアプリをport80で動かす ログアウトした後もコマンドを実行し続ける方法

  6. これで一通りの目的は達成出来たため、後はnode.jsでガリガリとアプリを開発して適当なポートで動作させ、proxy.jsに動作しているnode製アプリの記述を加えてやれば、特定のドメインでアクセスした時にnodeのアプリが動くようになります。
    ただ、proxy.jsは最低限の記述となっているので以下のコードを参考にもう少しまともなリバースプロキシにした方が良さそうです。今だとhttpsとかで接続しても繋がらないんじゃないかと思います。
    参考: node-http-proxyを使ったいわゆるバーチャルホスト対応Webサーバー

    以上。

今さら気付いた事

いつの間にかGoogleのキャッシュ表示にMacのコマンドキーの説明が追加されていた。

後、WordPressの「Google Analyticator」というダッシュボードにGoogle Analyticsの簡易的なアクセス解析結果を表示出来るプラグインがあるんですが、APIの仕様変更に伴って動かなくなってます。

 

フォーラムを見ると作者の方は大分前に開発終了宣言を出してて、誰か何とかしてくれ状態。

Dashboard widget no longer authenticates

 

最後の投稿に「MailChimp’s Analytics360」というプラグインを試してみろと載ってる。

 

過去に何件かお客さんに納品済みのものがあるんだけど、どうしたものかな。

 

リンク集的なものが作れるやつを作成

あまりにも中途半端だけど一応動く。

colinkr(http://alpha-version.com/colinkr)

Google ChromeやSafariの初期画面っぽい感じでサイトのサムネイル画像が一覧で見れるやつのWeb版。

画像の生成はWordPress.comのAPIに丸投げしてキャッシュを全く生成していない。おまけにタイトルタグはfile_get_contents関数で引っ張ってきてるので1つのリンク集にURLを10個くらい登録すると非常に重い。相手方のサーバーに負荷をかけるクソ仕様。

前に、フランス人かスウェーデン人あたりが簡単にWebサイトのブックマークリストとか1ページだけのWebサイトとかを作れるサービスを公開してた気がするんですけど、サービスの名前を忘れてしまったので仕方ないので作りました。

ベースにはFluid Squares V2というレスポンシブレイアウトのフレームワークを使用。(ライセンスが書いてない事に今さら気付いた・・・)
WordPressで作ってるので、tanzakuテーマとかを使わせてもらった方が良かったかもしれない。

【あなたは○世代】コラボりました!

自分と同年齢の漫画やアニメのキャラクター達を調べる事が出来るWebサービス「ジェネレーションサーチ」さんとコラボレーションしました。

コラボなんて初めての事でしたがサービスの公開翌日にお声がけ頂いて(Gigazine効果恐るべし!)翌々日には対応が完了するという非常にスピード感のある体験が出来て良かったです。

(とは言うもののデータベースの充実度が段違いなのでほとんど胸を借りるような形になってますが・・・)

丁度、土日を挟むことになりましたが、休日にも関わらずジェネレーションサーチさんには対応頂いて非常に感謝してます。ありがとうございました。

以下の画像の様にあなたは○世代の結果表示画面にジェネレーションサーチさんのリンクが表示されるようになってます。

リンクをクリックするとジェネレーションサーチさんに飛んで、入力した生年月日と同世代のキャラクターをすぐに調べる事が出来ます。是非、試して遊んでみて下さい!アナゴさんはどう考えても年齢詐称だろ!

4月1日

休日出勤なんてありません。

shiba_inu_bot

calico_cat_bot

世代を調べることが出来るWebサービス「あなたは○世代」

一応ベースの部分が出来たので公開します。

http://alpha-version.com/generation/index.php

あなたは○世代」は生年月日をベースにあなたがどんな世代に属しているか調べることができるサービスです。

大分偏った世代分類になってますが、人によってはノスタルジーを感じられるかもしれません。
「学年」ではなく「生年月日」をベースに世代を区切っている関係で、早生まれの人などは該当しなかったりするかもしれません。

世代判定はこのサービスの核となる部分なのでしっかり判定しようと考えてましたが、結果的に非常にあいまいなものになってます。

これは作ってる途中で人を世代という良く分からないもので分類するってのは非常に無理があると改めて痛感したのと、当初の予想以上に検証が大変で、非常に面倒くさいからというのが主な理由です。
現在は50種類くらいの世代しか登録されていないので、これをベースに徐々に改善していけたらと思っています。

以下余談ですが、タイトルフォントなどにはやさしさゴシックを利用しました。ポップで使い易いフォントです。また背景画像にはshutterstockで売ってた「cute pixel people version 2」というのを使ってます。
この画像、最初フリーだと思ってたんですが、どうやら複数のサイトに勝手にアップロードされてる模様。そのため、一旦、利用を取りやめたんですがいろいろと汎用性が高そうなので買っときました。(買った後に気付きましたがBigstockの方が安く買えたみたいです。)

Pages: 1 2 3 4 5 6 7 8 9 Next