2019年3月31日日曜日

ブログ・ホームページでアプリ紹介するなら「アプリーチ」!!その使い方も(例:Blogger)!

皆さん、こんにちは。


ブログやホームページなどのサイトで、スマホアプリを紹介したいことってありますよね。

ただ、普通にアプリストアのリンクを貼ろうとすると、iPhone(iOS)用のApp Store、Android用のGoogle Playストアの2つのリンクを貼らなければなりません。

正直、面倒くさいですよね。


iPhoneのアプリだけ、もしくは、Androidのアプリだけを紹介したいというのであれば、別にこれでもいいのですが、ほとんどの場合は、2つ 同時に表示したいはずです。


そんなときに便利なのが、今回ご紹介する「アプリーチ」というものです。


これを使用することで、紹介したいアプリのiPhone版、Android版へのリンクを画像付きで、作成することができます。



アプリを紹介しているサイトのほとんどが、このアプリーチというものを使用しています。


また、これとアプリ用のASPを組み合わせることで、アプリがインストールされたら報酬が手に入る、なんてこともできますので、とてもおすすめです。


アプリーチはWeb上のサービスなので、ブラウザで簡単に使用できます。


今回は、基本的な使い方を説明します。
とはいっても、超簡単です。


アプリーチの使い方



まずは、アプリーチのサイトにアクセスしましょう。

アプリーチ

では、まずは、CSSの設置からですね。


アプリーチでアプリの紹介HTMLタグを生成すると、「新コード」と「旧コード」の2種類のソースができます。

このどちらかを、サイトのHTML編集のところに貼り付ければいいわけですが、この2つには違いがあります。

旧コードは、紹介タグのデザインCSSも含んでいるので、これを単体で貼り付けるだけで、使用 することができます。
が、その分コードが読みにくくなります。


一方、新コードは、HTMLタグとCSSが分離してあります。
そのため、このコードとは別に、CSSを設定しておく必要がありますが、コードはその分、読みやすいです。


ですので、今回は、新コードを使用していこうと思います。

1.CSSをブログの設定に貼り付ける


こちらのCSSというところをクリックして、でてきたCSSコードをコピーしてください。


そうしましたら、ブログサービスのカスタムCSSなどに貼り付けて、保存してください。

Bloggerならば以下の画像のところになります。



以上で、下準備が終わりました。


2.アプリ検索


紹介したいアプリ名を検索します。


そうしましたら、その下に、iPhoneとAndroid版のアプリが正しく表示されていることを確認してください。


もし、違っていたら、「複数検索」というところをクリックして、アプリを指定し直すことができます。


3.設定


ここでプレビューを見ながら、好みに設定してください。


4.ソースの貼り付け


新コードを、ブログのHTML編集に貼り付けてください。

これで完成です。


実際、このように表示されます。


LINE

LINE

LINE Corporation無料posted withアプリーチ


以上です。
今回は触れませんでしたが、アフィリエイトにつなげることも簡単ですので、興味がある方はぜひ、お試しください。


では、さようなら。
また、次回お会いしましょう。


2019年3月27日水曜日

あなたはいくつ読めるか!?一般常識漢字100選!!読めないと恥ずかしい?

はい、こんにちは。


突然ですが、皆さんは、漢字の読み書きに自信はありますでしょうか?

僕は、一切ないです。むしろ、苦手な方です。


ということで今回は、ちょっと読むのが難しい漢字100個を集めました。


比較的簡単なものから、超難問レベルのもの、普段よく使う漢字から、あまり使わないものまで、幅広くあると思います。


ひょっとしたら、読めないと恥ずかしいなんてことも?


気軽な気持ちで挑戦してみてください。

答えというところをクリックすると、答えが展開します。


では、どうぞ。

読みが難しい漢字100選

1. 幕間
2. 御用達
3. 河川敷
4. 古文書
5. 作物
6. 農作物
7. 頭寒足熱
8. お彼岸の中日
9. 入水自殺
10. 他人事
11. 門戸
12. 容体
13. 大地震
14. 伊達巻き
15. 異名
16. 悪寒
17. 間髪を入れず
18. 肌寒い
19. 御利益
20. 強面
21. 言語道断
22. 物見遊山
23. 一矢を報いる
24. 一日の長
25. 二言はない
26. 三位一体
27. 三種の神器
28. 未曾有
29. 千変万化
30. 傍若無人
31. 指宿
32. 男鹿半島
33. 蝶番
34. 炒飯
35. 逸品
36. 老舗
37. 外科病棟
38. 小児科
39. 団塊の世代
40. 相殺
41. 小豆
42. 素麺
43. 月極駐車場
44. お土産
45. 破綻
46. 更迭
47. 建立
48. 相模
49. 代替
50. 刺客
51. 八街市
52. 東雲
53. 茨城県
54. 石見銀山
55. 日暮里
56. 潮来
57. 八戸
58. 御徒町
59. 馬喰町
60. 近江
61. 虻
62. 蝗
63. 蝸牛
64. 蟷螂
65. 蛞蝓
66. 油蝉
67. 蚯蚓
68. 蟻
69. 螽斯
70. 蜘蛛
71. 海星
72. 鱈
73. 鮃
74. 海驢
75. 秋刀魚
76. 鯵
77. 鰻
78. 鮑
79. 鮪
80. 鰯
81. 紫陽花
82. 仙人掌
83. 躑躅
84. 蒲公英
85. 向日葵
86. 愛迪生
87. 耶蘇基督
88. 克利奥佩特剌
89. 閣龍
90. 那波列翁
91. 阿富汗斯坦
92. 亜米利加
93. 亜爾然丁
94. 以色列
95. 埃及
96. 濠太剌利
97. 土耳古
98. 新西蘭
99. 泥婆羅
100. 柬埔寨


以上です。

お疲れさまでした。



どれくらいわかりましたか?


僕は全然ダメでした。
後半が特に。


読めないと非常識となることもありますので、ある程度は理解しておいた方が無難でしょうね。

[楽天]

読めそうで読めない漢字2000 あいまい読み うっかり読み 実例集【電子書籍】[ 加納喜光 ]

[Amazon]

読めそうで読めない漢字2000 あいまい読み うっかり読み 実例集【電子書籍】[ 加納喜光 ]

では、さようなら。
また、お会いしましょう。


2019年3月22日金曜日

Blender(+Sculptris)で動くLINEスタンプを超簡単に作る方法!!~トゥーン+FreeStyle機能使用したアニメーションスタンプ作成~

こんにちは。

突然ですがみなさん、LINEスタンプ作ってますか?

僕は、下手くそなりに作ってます。


昔は、販売されているLINEスタンプ数が少なかったので、「一攫千金」なんてこと もありえ たそうですね。

今は、クリエイターの数が増え、LINEスタンプの数も大幅に増加してしまったので、「一攫千金」はかなり難しいらしいです。


まあ、確かに「LINE Creators Studio」とかいうスマホアプリが出たことなどでLINEスタンプ作成のハードルが一気に下がりましたから、当然の結果ともいえるかもしれません。



でも、諦めてはいけません。



売れる可能性は減ったというだけであって0になったというわけではありません。

上手く波に乗せられれば、それなりに稼げる人だっています。

それに、もし売れなかったとしても、友達・身内などだけで楽しむには十分でしょう。


では、一応ここに僕が作ったスタンプをまとめてあるページを貼っておきます。
よろしければご覧ください。

お そらくいつでも使えるLINEスタンプ集

最初の方は酷い手書きですね(笑)
あまりにも酷いので手書きはやめました。


アニメーションスタンプ(動くLINEスタンプ)について



LINEスタンプは、大きく分けて2種類あります。


1つは、一般的な静止画のスタンプです。
スマホアプリ「LINE Creators Studio」を使用して作成できるのも、こちらになります。


一セットにつき、最大40個のスタンプを販売できます。


ただの静止画であるため、ちょっとした落書き、写真などをスタンプにすることができ、とても手軽に作成できます。


しかし、手軽がゆえに、LINE Storeでは、大量に販売されており、自分のスタンプが見つけられることは難しいでしょう。



2つ目は、アニメーションスタンプ(動くLINEスタンプ)です。

こちらは、名前の通り、静止画ではなく、アニメーションするスタンプです。

原理はパラパラ漫画と一緒です。


動きのある連番pngからAPNGというファイルを作成し、販売します。

スマホアプリ「LINE Creators Studio」では作成できませんので、パソコンから「LINE Creators Market」にアクセスし、申請します。


こちらでは、LINEスタンプの他に、「着せ替え」や「絵文字」なども販売できます。



普通にこのアニメーションスタンプを作成しようとすると、一つのスタンプにつき最大20枚ほどのフレーム画像を作成し、それがうまく動くように連番イ ラストを 描かなければなりません。


アニメーターのようなことをしなければならず、ハードルが高いです。


しかし、ハードルが高いというのはねらい目でもあります。
まだ、ライバルのクリエイター・スタンプが少ないため、まだ売れる可能性はあります。


これからのLINE スタンプ市場は、動くLINEスタンプに移行するだろうと予言されるほどです。



けれども、先ほど書いた通り、動くLINEスタンプの作成は非常に難しいです。


ということで、今回は、「Blender(+Sculptris)を使用してアニメーションスタンプを超簡単に作成する方法」をご紹介しようと思いま す。


手書きで作るより断然楽(だと思います)。
(僕は手書きでアニメーションを作成したことがないのでよくわかりません。
なんたって、静止画ですら手書きだとあのクオリティーですからね。アニメーションさせたらどうなるものか考えたくもないです。)


Blnederのトゥーン及びFreeStyle機能を使いアニメーションスタンプを作成す る方法



では、具体的に手順をご説明していきたいと思います。


でも、その前に作成するアニメーションスタンプに必要な画像などを確認しておきましょう。


<必要な画像>


必要数 サイズ(px) ファイル形式
メイン画像 1個 幅240×高さ240 APNG
アニメーションスタンプ画像 8個/16個/24個 幅320×高さ270 APNG
トークルームタブ画像 1個 幅96×高さ74 PNG


APNGとかいう見慣れないファイルが出てきましたね。

でも、安心してください。


連番PNGからAPNGを生成するフリーソフトがありますので。
ちなみにこのソフトは、動くLINEスタンプを作るのには便利な機能が付いています。
詳しくは後程。


それから、他の注意点としては、

  • 画像サイズは幅320×高さ270px以内(幅、高さのどちらかが270px以上あれば、横長や縦長の画像の制作も可能)
  • 背景は透過
  • APNGファイルの最初のフレーム画像がLINE STOREまたはスタンプショップの販売時や静止時に表示される
  • 最大再生時間は4秒
  • 最大フレーム(コマ)数は5~20フレーム
  • 1〜4回ループ可能(再生時間4秒を超えない範囲内)
  • 1つのAPNGファイルあたり300KB以下


という感じですね。


ちょっと注意事項が多いですが、順を追ってやっていきましょう。


1.Sculptrisなどで3DCGを作成する

まずは、LINEスタンプに用いるキャラクターなどの3Dモデルを用意してください。

僕は、モデリングが超簡単なSculptrisで 作りました。

別にSculptrisである必要はありません。
最初からBlenderでモデリングしても大丈夫です。


制作過程です。


3DCGができました。

ここでは、3Dデータはobjファイルとして書きだしています。
テクスチャマップファイルなどもお忘れずに。

こ こでポイントですが、テクスチャはシンプルな方がいいです。

後でアニメ調にしてレンダリングするので、写真テクスチャなどを貼ってリアリティを追及してしまうと、手書き・アニメ風にはなりません。

なるべく単色にしましょう。


では、次に進みます。


2.Blenderに取り込み、ボーン付けなど

ここで、用意した3DCGモデルをBlenderに インポートしてください。
テクスチャなども貼っておいてください。

ちなみに「Cyclesレンダー」を使用します。
初期は「Blenderレンダー」になっていると思うので、右上のプルダウンから変更してください。


次にトゥーンに設定します。
これは、3DCGモデルをレンダリングした際、立体的にではなく、アニメ風になるようにするために使用します。


右側のマテリアルタブで設定できます。
Surfaceを「Toon BSDF」にしましょう。

SizeやSmoothはレンダリング結果を見ながら、自分の好みに設定してください。


ボーンを入れる前に、Blenderの設定をしておきましょう。

まずは、解像度を指定します。



X: 320px
Y: 270px

として、その下の値は100%にしてください。


次にフレーム数を設定しましょう。

1つのアニメーションスタンプに使用できる画像の最大枚数は20枚ですので、
フレーム数は次のようにしてください。



続きまして、背景を透明にする設定をします。
これにより、3Dモデルのない背景は透過されます。


レンダリングタブから、「Film」の「Transparent」にチェックを入れてくださ い。


次に、FreeStyleを設定します。
このFreeStyleとはレンダリングした際に、線で縁取りをしてくれる機能です。

これを使用することで、3DCGらしさをなくし、よりイラストっぽくできます。

レンダリングタブから、「FreeStyle」にチェックを入れてください。
線の太さなどは自分好みでお願いします。


では、最後に出力先・出力ファイルの設定です。


ファイル形式は「PNG」で、透過処理をしているので、「RGBA」を選んでください。

出力先は、どこでもいいですが、連番画像が書き出されるので、LINEスタンプ書き出し用のディレクトリを作成しておくとよいでしょう。


最終的には、「Animation」というところをクリックしてレンダリングをすることになります。
ですが、まだ、アニメーションの設定をしていないので、ボーンを入れるところから始めていきましょう。



こんな感じでボーンを入れてください。
今回、骨付けはメインの話ではないので、詳しい説明は省略させていただきます。


~親子関係を付けているところ~


では、アニメーションを作成していきましょう。

ポーズモードでボーンを動かしてはアニメーションを打ち込み(Iキー)、タイムラインを動かし て、ま た、ポーズを変え、キーフレームを打ち込み...

というのを繰り返して、20フレーム分アニメーションさせてください。

ここで気を付けてほしいことは2つです。

  • 余白をなるべく作らないこと
  • 1フレームは必ずそのそのスタンプの内容がわかるような画像にすること


まず、アニメーションでは、無駄な余白をトリミングして作成することというルールがあります。
トリミングの手間を省くためにも、余白は少なめにお願いします。

それから、アニメーションスタンプの1フレームというのは、LINEのスタンプ画面にも表示さ れる大事 な1枚となります。

くれぐれも、ただの白紙になったり、感情がわかりにくいようなものにはしないでください。


もし、そのような1フレーム目になってしまった場合、このような内容でリジェ クトされます。
(僕は実際にこれでリジェクトされました(-_-;))


これである程度完成したようなものですね。

では、次のステップに進んでください。


3.連番書き出し・APNGに変換・申請

アニメーションができましたので、レンダリングしてPNG連番を書き出しましょう。


こんな感じに20枚のPNGが生成されたでしょうか。


いよいよ、これらをAPNGに変換しましょう。

ア ニメ画像 に変換する君」というフリーソフトを使用します。
Mac OSとWindowsに対応しているようです。

上記のサイトから、ダウンロード・インストールしてください。


このソフトを開くと、こんな感じです。


画面がシンプルなので、初心者でも直観的に使用することができると思います。

先ほど作成したPNG連番を取り込むと、このようになります。


20FPS/20枚画像/4ループですので、ちょうど4秒のアニメーションですね。
アニメーションスタンプの規定である4秒以内に収まっています。


では、APNGで書き出してみましょう。

「アニメ画像を保存する」をクリックです。

こんなのが書き出されます。


APNGなのに、拡張子がPNGですね。
でも、これであってます。

これをダブルクリックしても何も再生されませんが、LINE上ではしっかり動きます。
あと、ChromeやFirefoxでも動いたはずです。


ただ、拡張子が一緒で区別しにくいので、連番画像とは別のところに書き出しましょう。


これで、動くLINEスタンプが1つできました。
これと同じ作業を繰り返して、8個/16個/24個のいずれかの数を作成してください。

それから、メイン画像は解像度を変えて書き出せばよいと思います。


頑張ってください。


以上が、「Blenderを使用したアニメーションスタンプの超簡単な制作方法」でした。
手書きで一枚一枚描かなくてよいので楽だと思います。

無言で何かを伝えようとする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。


今回制作したアニメーションスタンプです。


では、さようなら。
また、お会いしましょう。


2019年3月21日木曜日

Bloggerで画像がはみ出る・スマホだと幅8割程度のサイズにしかならないときの解決法

はい、こんにちは。

みなさん、Googleの無料ブログサービス「Blogger」は使っていますか?



無料なのに勝手な広告が入らなくて、SSL化(https)にすることもでき、画像容量が無限...
メリットが多く、素晴らしいブログサービスです。



そんなBloggerですが、画像サイズ(画像の幅など)で困ったことが少々あったので、その問題点、および、解決策をご紹介させていただきます。


僕と同じように困っていた方がいらっしゃいましたら、ぜひ参考にしてください。


では、具体的に何が問題なのかということについて話していきます。


画像の幅が合わない



通常、ブログやホームページに画像を貼り付けるとき、画像の幅を指定して、はみ出ないようにし ますよね。
まあ、Bloggerでも同じはずです。



画像を挿入する際、このような画面が出てきます。
ここで、小・中・大・特大からどれかを選べば、そのサイズの幅にしてくれそうです。


が、しかし。
しかしですよ。


ここでサイズ指定してしまうと、表示される画像の画質が劣化してしまうのです。


困りましたね。

じゃあ、どうするのか。


画像を挿入した後、その画像のimgタグの属性として、「width="640"」みたいに指定してやれば、画質の劣化を抑えつつ、画像サイズを設定 できま す。

(ちなみに、ここで指定した640というのは、bloggerの記事で表示できる画像の最大幅となります。
640px以上の画像ははみ出ます。)



しかし、これでもまだ問題があるのです。


その問題点は主に2つです。

まず、1つは、

いちいちwidthを入力するのが面倒くさい

まあ、しょうもない理由ですが一応書かせてもらいます。

画像が少ししかない場合はいいんですよ。

でも、貼り付ける画像の数が増えれば増えるほど、この作業が大変に感じるようになっていきます。


普段からタグ打ちでブログ書いている人からしたら、あきれるでしょうね。




そして、2つ目は、

スマホ表示だと、画像幅を最大にしても80%くらいしか表示されない

これがなかなか厄介です。
せっかく大きな画像を表示したくても、実際表示すると、小さくなってしまうのですから。


PC版表示ならあまり気にならないんですよ。


しかし、スマホだと、ただでさえ幅が狭いのに、8割が最大幅って...


かと言って、

画 像幅を「width="640"」以上に設定したり、元のサイズの画像を貼ったりすると、PC版表示では、はみ出ます。


スマホ表示では、640px以上の画像幅でも勝手に縮小され、良い感じのサイズに表示してくれるのですが。



こういった問題が、Bloggerの画像表示には潜んでいるのです。
でも、解決方法は簡単です。


今から紹介する設定をするだけで、「PC版で画像がはみ出ること」も「いちいちwidthを設定するのが面倒くさいという問題」も「スマホだと最大幅 に設定し ても8割くらいしか表示されないこと」も全部解決できます。

では、やっていきましょう。


解決策



まず、Bloggerの画面から、「テーマ」⇒「カスタマイズ」を選びます。



そこで、「上級者向け」というところを選び、下の方までスクロールしてください。

「CSSを追加」というのが出てくると思います。


ではそこの一番下の行に、以下のコードを貼り付け、「ブログに適用」を押してください。
これで完了です。


div.separator img {
max-width: 98%;
height:auto; }

どうでしょうか、簡単だったと思います。

このCSSは何をしているかと言いますと、どんな画像を貼っても、画面幅の98%より大きくな らないよ うにしています。
また、高さは自動的に調節されます。


つまり、もう画像幅をいちいち設定しなくても、画面からはみ出るなんてことは起こらなくなったわけです。

そして、画像幅を設定しないわけですから、スマホ表示でも98%までの大きさにしてくれます。
(ただし、それは貼った画像のサイズが640px以上だった場合です。
250pxとかの画像を貼っても、250pxのまま表示されます。
画面いっぱいに表示したい場合は640px以上の画像を貼ってください。)


ただ、あまりにも大きい画像を貼るのはやめましょう。
読み込みに時間がかかってしまいます。


ちなみに、98%という値は、好みの値にしてもかまいません。
100%だとゆとりが消えます。


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

さようなら。
またお会いしましょう。


2019年3月17日日曜日

GIMPで図形を書くとギザギザする際の対処法~パスを使用して直線や円を描く~


こんにちは。

皆さんは、パソコンでの画像編集ソフトに何を使用していますか。


有料で有名なソフトだと、AdobeのPhotoshopとかですかね。
Photoshopといっても、CCだとかElementsとかみたいに種類があって、それぞれで値段や機能が違いますね。


Photoshop ElementsはPhotoshopの廉価版で、安めになっている代わり、機能が制限されています。


後は、学割とかでも買えます。


と、まあ、Photoshopの話をしましたが、今回のメインはこれではありません。



皆さん、無料の画像編集ソフト「GIMP」をご存知ですか?


パソコンでそれなりの画像編集がしたいけれど、Photoshopが買えない人(僕もその一人)には超ありがたいフリーソフトです。


無料なのに、とても高機能で、Photoshopにもあまり負けていません。
(しっかり比較すれば、Photoshopの方が上でしょうけれども)



こちらのサイトからダウンロードできます。

https://www.gimp.org/downloads/

Windowsだけでなく、Mac OSやLinuxにも対応しています。
素晴らしいですね。


今回は、このGIMPについてのお話です。


GIMPで図形を描くと線がギザギザする


これ、いったいどういうことでしょうか。

実際にやってみましょう。


まずは、直線を引いてみます。


鉛筆ツールで作成した直線です。

横や縦に引いた線は問題ないですが、斜めに引いたものに関しては、少しギザギザしていますね。

これだと見栄えが悪いです。


では、どうすればよいのでしょうか。


パスを使用して描く

この問題を解決する方法に、「パスを使用する」というものがあります。


パスを使用して直線を引く

まずは、パスツールで直線を引きます。


こんな感じです。

そうしたら、「パスの境界線を描画」をクリック。


するとこのような画面が出てくるので、設定してください。


どうでしょう。
できたでしょうか。


先ほどより、きれいになったでしょうか。


パスを使用して円を描く

今度は円を作成してみましょう。
(すみません、円とか言ってますが、正直楕円ですね)


パスツールで描いてもいいのですが、少し面倒です。


楕円選択ツールで楕円を描いた後、それをパスに変換し、境界線を描画するという方法でいきましょう。



まず、楕円ツールで選択。


それをパスに変換します。


右側の「パス」というツリーから、変換されてできたパスを右クリックし、「パスの境界線を描画」をクリック。

後は、先ほど(直線の時)と同様に設定します。

すると、完成です。


綺麗に楕円が描けました。


以上です。

参考になれれば幸いです。


ではさようなら。
またお会いしましょう。


人気の記事