ロロロロの仕組み

今日は、弊社のサービス「ロロロロ」の仕組みを説明したいと思います。
 
*ロロロロとは*
絵が描けなくても大丈夫!
スマーフォンやパソコンで簡単に4コ漫画が作れるWebサービスです。
4コマ漫画でゆる〜いコミュニケーションをお楽しみいただけます。
 
画像や文字を組み合わせてグリグリ4コマを作る中身は、javascriptとCanvasでできています。

仕組み自体は単純で素材(画像、文字)を順番にjavascriptでCanvasに描写する・・・以上です。

 

・・・もう少しだけ細かく説明すると
スクリーンショット 2017-05-10 18.15.49
1つ1つの素材にそれぞれ上記のように、座標やサイズに回転率など描写に必要な情報を持たせて配列等に保存し

スクリーンショット 2017-05-10 18.15.56
それぞれを順番通りに描写することで4コマの1コマを表示しています。

あとは素材ごとに移動や回転、拡大縮小、色変更などjavascriptで色々な編集機能を持たせ操作できるようにして

スクリーンショット 2017-05-10 18.16.14
最後に出来上がったCanvasに書かれた情報を元にCanvasにあるtoDataURL()の関数で取得したbase64の画像データをサーバー上で画像に出力して4コマを作成することでロロロロのサービスはできています。
 
基本的にCanvasには描写するという機能しかないですが、描写以外の部分をjavascriptで実装すればこんな感じの4コマ作成ツールからグラフやアニメーションにゲームまで色々作れるのでおすすめです!


WordPress開発快適化計画 ~ VCCW on WP-CLIを使ってみた ~

日に日に暑さが増しておりますが、いつまで経っても見習いプログラマーのノリフミです。

 

Wordpressを使った開発や改修が増えてきている昨今

一人で開発の場合はあまり問題ないのですが、複数人で開発するとなるとどうしても、データの共有面で壁に当たってしまいます。

そこでどうにかならないものかと調べてみると、Wordmoveなるものが良さそうだったのでVCCW on WP-CLIで使ってみました。

 

※ 当記事では、サーバーでWordpressを公開しており、そのサーバーへssh接続できるものとして話を進めます。

 

目次

  1. Wordmoveとは
  2. VCCWとは
  3. WP-CLIとは
  4. 今回の妄想
  5. WP-CLI導入
  6. VCCW on WP-CLI導入
  7. WordPress on Vagrant構築
  8. Wordmoveを使ってみる

お急ぎの方は飛ばし読みを:D

Wordmoveとは

Wordmoveは、ローカルのWordpressインストールとDBデータをローカルの開発マシンからリモートのステージングサーバーに自動的にミラーリングできるようにするgemです。

SSH接続は完全にサポートされていますが、新しい機能が導入されるとFTPサポートは中止される予定です。

プッシュ/プル機能を備えたWordpress用のCapistranoのようなものと考えてください。

Source of github.com/welaika/wordmove

※ 翻訳を使用しております、不自由な日本語にご注意ください

要約すると、

「Wordpressをローカル・サーバー間で簡単に同期出来るんだよ」

ということみたいです。

VCCWとは

これは、WordPressプラグイン、テーマ、またはWebサイトの開発用に設計されたVagrantの設定です。 VCCWには、WordPressのバージョン(またはベータ版)、言語、ホスト名、サブディレクトリ、管理者の資格情報、デフォルトのプラグイン、デフォルトのテーマ、マルチサイト、SSLなどのオプションを設定するためのカスタマイズ可能な変数が含まれています。これらの変数は、特定のニーズに合わせて開発環境を調整する際の柔軟性を提供します。

Source of vccw.cc

※ 翻訳を使用しております、不自由な日本語にご注意ください

要約すると、

「Vagrantを使ってWordpress開発を快適にし、かつ色々と設定出来るんだよ」

ということみたいです。

WP-CLIとは

こちらは、読んで字のごとくなんですが

WP-CLIは、WordPressのインストールを管理するための一連のコマンドラインツールです。 Webブラウザを使用しなくても、プラグインを更新したり、マルチサイトのインストールを構成したりできます。

Source of wp-cli.org

※ 翻訳を使用しております、不自由な日本語にご注意ください

要約すると、

「CLIのみでWordpressを構成、更新が出来るんだよ」

ということみたいです。

 

今回の妄想

一通り説明し終えたところで、今回の妄想のお話

現状はこのような構成で開発しています。

Wordpress開発がgit管理のみなのでデータ同期とれない様子

複数人のWordpress開発でgit管理のみなので、データ同期がとれない。

 

そこでWordmoveを導入してみると

Wordpress開発にWordmoveを導入して快適になった様子

複数人のWordpress開発でWordmoveを導入して、データ同期が簡単にとれるようになる。

 

つまりデータ同期を気にしなくても良くなる!なにこれ素敵!という妄想

 

WP-CLI導入

とりあえず、公式の説明に沿って初期設定をしていきます。

 

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

php wp-cli.phar --info

PHP binary: /usr/local/Cellar/php70/7.0.18_10/bin/php
PHP version: 7.0.18
php.ini used: /usr/local/etc/php/7.0/php.ini
WP-CLI root dir: phar://wp-cli.phar
WP-CLI packages dir: /Users/norifumi/.wp-cli/packages/
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 1.1.0

chmod +x wp-cli.phar

sudo mv wp-cli.phar /usr/local/bin/wp

wp --version

WP-CLI 1.1.0

あっさりインストール成功!

 

VCCW on WP-CLI導入

こちらも、公式の説明に沿って初期設定をしていきます。

 

wp package install vccw/scaffold-vccw:@stable

Installing package vccw/scaffold-vccw (@stable)
Updating /Users/norifumi/.wp-cli/packages/composer.json to require the package…
Using Composer to install the package…

Loading composer repositories with package information
Updating dependencies
PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) in phar:///usr/local/bin/wp/vendor/composer/composer/src/Composer/Json/JsonFile.php on line 266

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) in phar:///usr/local/bin/wp/vendor/composer/composer/src/Composer/Json/JsonFile.php on line 266

メモリが足りないって怒られてしまった…

 

phpのメモリ確認

php -i | grep memory_limit

memory_limit => 128M => 128M

あー少ない…増やそう…

 

編集面倒なので、ワンライナー置換にしておきました。

gsed -i 's/memory_limit = 128M/memory_limit = 512M/g'  "$(php -i | grep 'Loaded Configuration File' | cut -f 5 -d ' ')"

php -i | grep memory_limit

memory_limit => 512M => 512M

成功!

 

再度チャレンジ

wp package install vccw/scaffold-vccw:@stable



Success: Package installed.

成功!

 

WordPress on Vagrant構築

VCCW on WP-CLIを使ってVagrantで動くWordpress構築する。

この時、直下ディレクトリに作成されるので、適当な作業ディレクトリに移動しておくことをオススメします。

※ exampleとなっているコードは適宜置き換えてください

cd example-dir

wp scaffold vccw example-project --host=example.com --ip=192.169.33.123 --lang=ja

Success: Generated. Run `vagrant up`.

cd example-project

vagrant up

==> example.com: [vagrant-hostsupdater] Writing the following entries to (/etc/hosts)
==> example.com: [vagrant-hostsupdater] 192.168.33.123 example.com # VAGRANT: 153b0b8eb7a8772721e73e0acb9f2c0f (example.com) / 08253bf2-edb0-4036-9c6f-9ef33822a578
==> example.com: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
Password:

/etc/hostsに書き込みのためパスワードを求められるので入力

 

ここからは

TASK [hogehoge]

をしばし眺めます。

TASK [hogehoge]

TASK [hogehoge]

TASK [hogehoge]

最終的に

PLAY RECAP *********************************************************************
example.com : ok=62 changed=55 unreachable=0 failed=0

と表示されれば完了!

 

hosts確認してみれば、きっちり追記されています。

cat /etc/hosts | grep example.com

192.168.33.123 example.com # VAGRANT: 153b0b8eb7a8772721e73e0acb9f2c0f (example.com) / 08253bf2-edb0-4036-9c6f-9ef33822a578

 

Wordmoveを使ってみる

さきほど立ち上げたVagrant内で作業していきます。

 

vagrant ssh

Welcome to Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-38-generic x86_64)

vi /vagrant/Movefile

local部分の

  • vhost
  • wordpress_path
  • database
    • name
    • user
    • password
    • host
    • charset

production部分の

  • vhost
  • wordpress_path
  • database
  • ssh
    • host
    • user
    • port
    • rsync_options

項目を適宜設定してください。

 

サーバーのデータをローカルに反映してみる。

wordmove pull --all

▬▬ ✓ Using Movefile: ./Movefile ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling wordpress core ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Uploads ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Themes ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Plugins ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Mu Plugins ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Languages ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Database ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

成功!

 

確認してみる

mysql -u root -p

mysql> use wordpress

mysql> show tables;

Tables_in_wordpress
——-
server_wp_commentmeta
server_wp_comments

wp_commentmeta
wp_comments

しっかりDBのデータも取得できていました!

 

懸念点

  • 複数人でデータ同期することによって、データが消えてしまう可能性がありそう
  • Wordmoveばかり使いすぎてgitの更新を疎かにしそう
  • そしてgitで修正できないほどの衝突が起こってしまいそう

まとめ

WordPressで複数人開発するなら、Wordmove使った方がデータ同期できて、開発が捗る!

 

でも、簡単にpush -allなどをしてしまうとデータが消えてしまう可能性があるので、こまめにpullしておいたほうが良さそうですね。

 

以上、ありがとうございました。


Adobe Lightroom mobileを使って写真を撮って編集してみた!

デザイナーのKです。
気温も暖かくなってきて、過ごしやすい季節になりましたね。
ぼくは写真を撮るのが趣味なので、外出時にはよく写真撮影をしています。
そこで今回は、Adobeから出ている写真編集アプリ「Adobe Lightroom mobile」をご紹介しようと思います。
ちなみに機種はiPhone7を利用しています。

■ Adobe Lightroom mobileとは

Adobeが提供している写真編集アプリです。

写真編集ソフトとして有名なPhotoshopのテクノロジーを利用して、スマートフォンで気軽に高機能な写真編集ができます。

Lightroom mobile(以下Lightroom)を利用して写真を撮影するだけで、iPhoneにデフォルトで入っているカメラアプリよりも高画質な写真を撮影することが可能になります。

またRAW画像なども扱うことができるので、より詳細な画像補正ができ、プロ並みの写真編集をすることができるのが特徴です。
ぼくが最近iPhoneで写真撮影する際は、もっぱらLightroomを使用しています!

■ まずはLightroomをインストール

App Storeから通常の手順で「Lightroom」と検索して、アプリをインストールします。

■ さっそく撮影してみる

記事公開のタイミング的に少しずれましたが、今回は会社で開催された花見に行った際に、桜の花を撮影してみました。
花見シーズン真っ只中だったので、満開の桜を撮影することができました。日本の桜最高!
それでは撮影方法です。
操作はいたって簡単。通常のカメラアプリとほとんど変わりありません。

まず、Lightroomを起動します。

01

起動した最初の画面はこんな感じです。まだ写真を撮ってないので何も表示されていません。右下のカメラアイコンをタップしてカメラモードに切り替えます。

撮影モードの画面がこちら↓

02

 カメラモードでのポイントは、左下にある撮影モードを「HDR」に変更しておくことです。

HDRとは…

「ハイダイナミックレンジ合成(ハイダイナミックレンジごうせい、英語:high dynamic range imaging、略称:HDRI、HDR)、とは、通常の写真技法に比べてより幅広いダイナミックレンジを表現するための写真技法の一種。」(Wikipediaより引用)

ちょっと横文字ばかりでわかりにくいですよね…

 

ものすごく簡単に言えば、
「明るさや暗さなどのバランスをいい感じにしたものを、カメラ内部で自動で作ってくれる便利な機能」
のことです(ざっくり過ぎて怒られそう)。

 

撮影の手順ですが、撮影したい対象を通常のカメラ操作と同じように撮影するだけです。

今回はその他の設定などは特に触らずに進めていきたいと思います。

■ 撮影した写真を編集(加工)する

「HDRで撮影したならそれだけで綺麗な写真になったんじゃないの?」
と思われるかもしれませんが、それだけで終わらないのがLightroomのすごいところです。

HDR撮影自体は、iPhoneのデフォルトのカメラアプリにも機能としては付いているのですが、LightroomではHDRで撮影して、さらに細かい画像編集(加工)をすることができます。

 

また今回の記事ではLightroomの全ての機能は説明しません(機能が多いので…)。
細かい機能説明など興味を持たれた方はググってみることをおすすめします。

 

それでは、撮影した桜の写真を編集してみましょう。
ざっくり自己流ではありますが、撮影した画像をさらにきれいにする編集をしていきたいと思います。

 

1 画像一覧から撮影した画像を選択する

03

この画面にLightroomで撮影した写真がアップされていきます。
写真の編集や削除もこの画面から行います。

 

2 編集ツールを使用して、画像を加工していく

写真をタップすると、編集画面に移動します。

04

画面下部ズラッと並んでいるのが編集ツールになります。
このツールを使用して写真を編集していきます。

 

2-1 「プリセット」を利用して全体の明るさやノイズなどを調整する

編集メニューの「プリセット」をタップすると、写真全体のトーンなどを一括である程度修正できます。

05

今回は撮影した写真は若干ノイズが入っていた印象があったので、
プリセット」→「ディテール」→「ノイズ軽減(高)」を選択して調整しました。
これで写真全体のノイズを自動で調節され、写真が少し柔らかな印象になりました。
ちなみにこのプリセットは他にも沢山の種類があるので、色々試してみるのも面白いです。

 

2-2 「ライト」で明るさを調整する

次に、編集メニューの「ライト」で写真の明るさなどを調整していきます。

06

写真全体が暗かったので、「露光量」や「白レベル」「黒レベル」などのバーを操作して、メリハリのある印象に調整します。
この写真の調整ポイントは、
『白いところは白く、黒いところは黒く』です!
桜の花が主役なので、白部分は「白レベル」高め、
黒部分(木の幹の部分)は「黒レベル」高めにしてメリハリを出しています。

 

2-3 「カラー」で色調を調整

次に、編集メニューの「カラー」で写真の色調を調整していきます。

07

写真の色調は、その写真の印象を決める部分でもっとも重要な部分の一つなので、
自分の好みの色合いになるまで粘り強く調整してみたほうがいいと思います。

色温度」を操作すると、写真全体の色調の印象がガラッと変化するので色々試してみると面白いです。
今回は桜ということで、「ピンク」のイメージが強かったので上記の画像の数値で調整して、全体的にピンク色メインの色調にしてみました。

08

こちらが比較画像ですが、一目瞭然で調整後の方が桜の雰囲気が増したと思いませんか?
このようにLightroomでは、簡単に写真の編集ができてしまうのです。

 

2-4 「効果」で細かい調整をする

次に、編集メニューの「効果」で写真の細かいディテールを調整していきます。09

・「明瞭度」→ 写真をくっきりさせる
・「かすみの除去」→ 霧がかった写真などのかすみを取る(逆にボワッとした印象にしたいときに使うこともできる)
・「周辺光量補正」→ 写真周辺の光の量を調整する(マイナスにするとトイカメラ風に!)

 

2-5 「レンズ」でゆがみを補正する

レンズ」の項目で「レンズ補正を使用」をオンにしておいてもよいかもしれません。
iPhoneのレンズはズーム無しで撮影すると少し歪曲する傾向があるので、それを補完するための機能になります。

10

 

3 写真をカメラロール保存する

これで編集は完了したので、iPhoneのカメラロールに写真を保存します。

方法は簡単で、画面右上の上矢印(画像の赤丸部分)をタップすると、「カメラロールに保存」という項目が出てきます。
そちらをタップして、「小サイズ」または「使用可能な最大サイズ」を選択するとカメラロールに保存されます。

11

これでLightroomによる写真編集は終わりです!

 

最終的に出来上がった写真はこちらになります。

12

編集前との比較画像はこちら。

13

編集前と比べると印象がかなり変わったのがお分かりいただけるでしょうか。
ぼく自身、まだまだ編集やレタッチなどの技術が未熟なのですが、スマホだけでもここまでの編集ができるようになった今の時代に感謝です。

さすがに一眼レフなどの画質などには到底及びませんが、
気軽にスマホできれいな写真を撮影したいときなどにLightroomはうってつけのアプリなので、機会があれば試してみるのはいかがでしょうか。

 

と、完全にLightroomの紹介記事のようになってしまいましたが、弊社では…

\\写真撮影や編集が好きな(もちろんデザインも)デザイナーさんを大募集中です!//
会社見学なども随時受け付けているので、お気軽にお問い合わせください^^


5月病なんて怖くないと思いたい

鼻炎と風邪で完全に鼻と喉がやられています。
こんにちわ。リエです。
 
最近暖かくなったのをいいことに、薄着で寝てしまいうっかり風邪をひいてしまいました。
お休み中にしっかり治したと思います。
 
YMD93_mugiwaraboutoumi_TP_V
ということで世間はもうすぐゴールデンウィーク(以下GW)です。
新生活が始まって初めての大型連休ということで、新社会人の方は待ち遠しいのではないでしょうか。
わたしは新社会人ではないですが、GWはとっても楽しみです。
予定を入れすぎて逆に疲れないようにしなきゃですね。
 
GWが終わったらよくニュースなどで取り上げられるのが、「5月病」
やる気に満ち溢れていた4月から一転。
なんか身体がだる〜い、集中できない、眠れないなどの不調を出てくる病気です。
 
特に4月から新しい環境になった方などは、生活の変化からストレスで5月病になりやすいと言われています。
新しい環境で気を張って頑張っていたところで、GWのような大型連休がくるのでそこで気持ちがぷつんと切れてしまうんですね。
 
せっかく作った生活リズムもお休みだと崩れちゃいますしね。
 
5月病の対策としては、「ストレスを溜めない」
でも現代社会ではストレスはつきもの。ストレスを溜めないなんて無理な話です。
じゃあどうしたらいいんだということになりますが、実践できそうなこととしては、「食事」「睡眠」「リラックス」「コミュニケーション」の4つがあります。
 
美味しいものを食べて、よく寝て、癒され、気心知れた人と楽しく過ごしたらいいということですね\(^o^)/
対策をしっかりととって5月病に打ち勝ちましょう!
 
さっそく美味しいものを食べてきたいと思いますε≡≡ヘ( ´Д`)ノ


体力のある社会人になりたい

はじめまして。新卒のはなです。

4月からスプラウトの正社員になりました。

 

去年の秋頃からアルバイトで来ていたので、職場にはもう結構慣れてきました。

会社の皆さんはとても優しくありがたいです。

ただ生活リズムがまだ大学の時のままなので、朝は眠いです。早く慣れたい。

 

大学生活の後半は特にゆるゆるした生活を送りすぎて、気づかないうちに体力が落ちていたみたいで今になってそのツケを払わされています。

毎日早起きをしている分週末は昼過ぎまで寝てしまい、特に何もできずに土日が終わってしまうのです…

 

このままではいけないと思い、先週ぐらいから体力づくりのためちょっとだけウォーキングをはじめました。

万年運動不足の私はそのウォーキングで疲れが増すので、家に帰ったらほぼ即寝してしまいますが、継続すればそのうち体力の上限値がアップし、以前より強靭な私になれると考えています。

 

新人の私には勉強しなければならないことが山ほどあります。

デザインもwebコーディングも、まだまだヒヨコどころか卵レベルです。

勉強と趣味を休日に並行して遂行できる社会人になるには、やっぱり体力が必要になってくるのです。

 

今はまだ半人前にすらなれていないので、これから研鑽を積んで(あと体力もつけて)一人前の強靭なデザイナーに成長していきたいです。

 

kyoujin2

 

0.2人前(ぐらい)の私を暖かく受け止めてくれて優しくしてくださる会社の皆さんには感謝です。

これからも頑張っていきますので、よろしくおねがいいたします。