Instagram.cssを使ってインスタ風なページを作る-その1

 

こんばんは爆  笑

気が付けば3月ですね目

この間、正月が終わったかと思ったらIBM Thinkまで1ヵ月を切ってしまいましたびっくり

筆者は今年初めて「花粉症」と言われる症状になり、鼻水と咳が止まりません・・・

こんなにつらいんですねえーん

 

 

さて前回の続きです。

作成方法を書いていきたいと思いますニコニコ

 

1)フォームの作成

リッチテキストを配置したフォームを作成します。

出来上がったフォームを使用して写真を1つ添付し保存しておきます。

 

2)ビューの作成

最終更新日順(降順)にしたビューを作成し、

2列目に添付されているimgファイルのURLが取得できるように列式を記載しています。

 

 

3)カスタムコントロールの作成

カスタムコントロールを新規作成します。

筆者は「ccImage」としました。

 

パネルコントロールを配置します。

 

パネルの中にイメージコントロールを配置します。

もしDBに何かイメージが登録されていたら、

イメージコントロール>イメージ>オプションのイメージリソースはブランクにしておいてください。

 

 

プロパティ定義を設定します。

筆者は、「filterClass」と「imgSrc」プロパティを作成しました。

filterClassプロパティは、instagram.cssで生成されるフィルタを呼び出すためのクラス値指定、

 

imgSrcプロパティは、フィルタをかける元の写真のURLを指定するためように準備しています。

 

今回パネルコントロールとイメージコントロールの間にdivタグを追加しました。

 

    <xp:panel style="width:300.0px;height:auto">
        <div class="#{javascript:compositeData.filterClass}">
            <xp:image url="#{javascript:compositeData.imgSrc}"
                id="image1" style="width:300.0px">
            </xp:image>
        </div>
    </xp:panel>

 

 

4)Instagram.cssをインポートします。

https://github.com/picturepan2/instagram.css


上記からスタイルシートを入手し、DBにインポートします。

 

5)XPageを作成します。

データバインディングは2)で作成したビューを指定します。

そして、パネルコントロールを配置します。

 

 

繰り返しコントロールをパネルコントロールの中に配置します。

 

繰り返しコントロールの設定を行います。

特に何か特殊な設定とかしていません。。。

 

繰り返しコントロール内に3)で作成したカスタムコントロールを配置します。

 

 

 

配置したカスタムコントロールを選択し、プロパティの設定をします。

filterClass:filter-clarendon

(値はお好みのものを指定してください)

値はコチラに書いてあります

imgSrc:viewEntry.getColumnValues().get(1)

(2)で作成したビューの2列目の値を取得するように)

 

 

忘れずに4)でインポートしたCSSを適用させます。

 

あとはパネルコントロールのサイズ調整等を行い、保存します。

 

ブラウザプリビューをすると・・・

 

オリジナルの写真に青いフィルタがかかるわけですおねがい

スゲーよ!Instagram.css

 

応用すれば・・・

ダイアログボックスから選択してフィルタ変更・・・

 

 

いちいちカスタムコントロールの値を変更しなくてもいいですねびっくり

 

 

XPagesで簡単に写真にフィルタをかけることが出来ましたニコニコ

興味があれば是非作成してみてくださいウインク

 

今日はこの辺で・・・

 

あでゅーバイバイ