PictRubyでインスタグラム風レイアウトを実現する

先日リリースしたPictRubyを使ってInstagram風の横並べグリッド画像を作ってみます。

The Week on Instagram | 208 https://t.co/S5Bf5ok5wv pic.twitter.com/xwFLrYvLsj

— Instagram (@instagram) 2015, 11月 8

インストールはこちらからどうぞ。

インストール

gist034fb1fd4fb737127ab5

1. このソースコードをクリップボードにコピーします(view rawが便利です)
2. PictRubyを起動します
3. '+'ボタンを押して新しいファイルを作ります
4. ソースコードを貼り付けて'Run'ボタンを押します
5. アルバムから好きな写真を9枚指定します

実行結果

このような9枚の写真が・・

こんな感じにレイアウトされます。(元画像はサイズバラバラでも自動で正方形に切り出して綺麗にレイアウトしてくれます)

ソースコード解説

# Please return the Image object in the

def convert
  # アルバムから写真を9枚取得
  imgs = Image.pick_from_library(9)   
  
  ImageUtil.horizontal([
      # 最初の画像を正方形                               
      imgs[0].square,                     
      # 2〜5枚目を全て正方形にして、2x2のグリッド画像に       
      ImageUtil.grid(imgs[1..4].map { |e| e.square }),  
      # 6〜9枚目を全て正方形にして、2x2のグリッド画像に       
      ImageUtil.grid(imgs[5..8].map { |e| e.square })
  ])  # 作った画像を横に並べる
end

結果として

 -----------------
 | 1 | 2x2 | 2x2 |
 -----------------

な横長画像が完成します。応用で

 -----------------
 | 2x2 | 1 | 2x2 |
 -----------------

など色々なレイアウトが作れます。