ラベル LINE の投稿を表示しています。すべての投稿を表示

2017年8月8日火曜日

概要

iOS で LINE スタンプを購入してみました
備忘録として手順を残しておきます
ちなみに初めに記載しておきますが当然お金の発生する操作になるので購入自体の判断は自己責任でお願いします
また、iOS で購入した場合 In App Purchase として課金が発生するので請求されるのは Apple ID に紐付いているクレカになります

環境

iOS 10.3.3
iPhone5
LINE アプリ 7.7.0

購入方法

まずはスタンプを公開しているページに移動する必要があります
スタンプのページに移動するする方法は多々ありますが、例えば

トーク中に出てきたまだ所持していないスタンプをタップする
ページの URL に直接アクセスする
LINE ストアからスタンプ検索で対象のスタンプを検索する

などがあります
とりあえずどんな方法でも良いのでページに移動しましょう

移動したら「購入する」をタップします

するとコインが不足する旨が表示されるのでチャージします
「OK」を選択します

コインをどれくらい購入するかの画面になります
今回はとりあえず 1 つのスタンプだけ購入するので 50 コインの箇所をタップします
ちなみに執筆時時点では 50 コイン = 120 円で購入できました

In App Purchase で購入する場合 Apple ID での認証が求められます
パスワードを入力することで購入を完了できます

パスワードを入力するとコイン購入の完了画面が表示されます

先程のはコイン購入画面でそのコインを使って再度スタンプの「購入する」をタップします
すると確認画面が表示されるので「OK」を選択します

これで購入は完了です
基本的に購入したスタンプは LINE 内で期限なしで使えるようです

最後に

LINE でスタンプを購入してみました
iOS で購入する場合は In App Purchase の仕組みになるのですが他の端末や PC で購入する場合は In App Purchase の仕組みではありません
普通にクレカを登録したり LINE Pay を使ったりしてコインを購入します

しかも iOS の場合スタンプの購入はできるのですが、スタンプのプレゼントをすることはできないようです
なのでスタンプをプレゼントする場合は Android や Mac から行う必要がありそこで再度請求情報を登録する必要があるみたいです

まぁ仕方ないと言えば仕方ないですが登録が複数回発生する可能性があるのでそこは面倒かなと思いました

2017年6月13日火曜日

概要

個人的に動く LINE スタンプを作るときの方法を紹介します
一応全部無料でできます
各ツールの詳細な使い方は説明しないので、公式サイト等を見て勉強してください
今回は Windows 環境のスクリーンショットで説明しています

環境

macOS 10.12.5 or Windows 10
FireAlpaca 1.7.4
アニメ画像に変換する君 1.2.0
LINE シミュレータ

FireAlpaca で絵を書く

全てはここから、絵を書かないことにはスタンプはできません
FireAlpaca を開いたら

ファイル -> 新規作成 -> 幅320pixel, 高さ270pixel -> OK

でレイヤを 1 つ作成します
このレイヤに適当に絵を書きます
ペンを選択してマウスの左クリックを押しながら移動すれば線が書けます

そして 1 つのレイヤを書き終えたら更にレイヤを追加します

レイヤ -> 追加

追加したレイヤに次のアニメーションの絵を書きます
こんな感じで画像をたくさん作りコマ送りすることでアニメーションを実現しています

アニメーションスタンプのガイドラインを見ると「イラストは最低5 - 最大20フレーム」とあるのでレイヤも最低限 5 つ以上、最高で 20 個以下にしましょう

とりあえず 5 レイヤ分で作成しました

各レイヤに丸を横に並べていって最後に四角が登場する謎のアニメーションです

FireAlpaca で png を連番で書き出す

絵が書けたらこのレイヤたちを連番 png で書き出します

表示 -> オニオンスキンモード

にします
オニオンスキンモードはレイヤの前後が薄緑と薄ピンクで表示される機能です
この機能を使うと前後のアニメーションでどういう動きをするか確認できるのでアニメーションが作成しやすいです

調整できたら、連番で書き出します

ファイル -> レイヤーを連番出力 (オニオンスキンモード)

で連番ファイルを保存するディレクトリを選択するダイアログが表示されるので選択して保存します
その後動画を見るかどうか聞かれますが No で OK です

これで連番ファイルが png で出力されました
ちなみに出力される連番は 000.png から出力されます
レイヤ的には番号の大きい方から 000 になるので注意してください
(図で言うとレイヤ5 の四角が 000.png になり、レイヤ 1 の左の丸が 0005.png になります)

アニメ画像に変換する君で apng を作成する

作成された連番の png を apng という動く LINE スタンプのファイル形式にします
ダウンロードしたアニメ画像に変換する君を開きます

そして「ファイルを選択」もしくはドラッグアンドドロップで作成された連番ファイルを開きます
左メニューの「フレームレート」と「ループ回数」を調整します

今回だとフレームレートを「5」ループ回数を「2」にするといい感じになります
いい感じというのは再生時間の調整の部分でこれもガイドラインに書いているのですが再生時間は「1, 2, 3, 4」秒のどれかでないとダメみたいです
再生する機能もあるので再生しながらどんな感じのアニメーションになるか確認すると良いと思います

フレームレートとループ回数を調整したら「アニメ画像を保存する」を選択して apng ファイルを作成します
名前と保存先を決定して出力しましょう

できあがった apng ファイルは拡張子は .png で普通に開いてもただの静止画が表示されるだけだと思います

LINE シミュレータで動作確認する

ただの静止画をシミュレータ上で表示してみましょう

Firefox で https://creator.line.me/ja/simulator/ からマイページにログインし左メニューの「作ったスタンプをチェックしよう！」を選択します
「スタンプシミュレータを使ってみる」を選択すると別ウィンドウでシミュレータが起動します
ここに先程作成した apng ファイルをドラッグアンドドロップで配置してみましょう
すると動く LINE スタンプのようにアニメーションすると思います

写真はアニメーション後の状況です

最後に

個人的に動く LINE スタンプを作成する方法を紹介しました
メリットはすべて無料で使えるという点でしょうか
フォトショップなどが使えるのであればそれだけで apng まで作成できると思います
また、絵自体もクオリティの高いものができあがると思います

また、絵を書くのにマウスだと正直辛いので本格的に書きたいのであればペンタブを購入するのをおすすめします
自分はまだそこまで本格的にやっていないのでペンタブを購入していませんが、もし購入してスタンプを作成することになったそのときにレビューや FireAlpaca との連携方法なども紹介したいと思います

参考サイト

登録: 投稿 (Atom)

hawksnowlog