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

ruby mruby picture rubypico 写真

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

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

インストール

gist034fb1fd4fb737127ab5

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

実行結果

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

f:id:tuto0621:20151109235123j:plain:w200

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

f:id:tuto0621:20151109235136j:plain

ソースコード解説

# 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 |
 -----------------

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