アプリ「着物クローゼット」に登録できる着物の数を増やしました!

前回告知したとおり、画質を落とすことで無料版「着物クローゼット」に登録できる着物の枚数を増やしました。50枚くらいの着物が登録できると思います。
私の着物は余裕で収まります(笑)

すでにダウンロードしてくださった方は、良かったらアップデートと、アイテムの登録しなおしをしてみてください。お手数おかけして申し訳ないです。

登録可能数無制限、かつ機種変更してもデータを移行できる有料版は鋭意作成中です。
完成したらお知らせしますね。

 

画像を縮小したら輪郭がぼやけて、下のアイテムがはみ出したり、それを治そうとしたら輪郭がギザギザになったり…。とりあえず最低限修正してみました。もう少しどうにかできそうな気はするけど、疲れたのでとりあえずこれで。また今度気が向いたら修正します。

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

アプリ「着物クローゼット」に登録できる着物数に制限がある件について。

アプリ、ホームページの方の記載も変えたのですが、
現在公開中のアプリ「着物クローゼット」は、アイテムを登録できる数に上限があります

あえて設定したわけではなく結果的にそうなったんですが…(遠い目)

原因

現在、データの保存先はアプリ内部なのですが、その保存先のメモリ容量が、
画像を保管するには足りなかったようです。
(多分、環境により差はあると思いますが多くて5MBくらいみたいです?)

アイテム画像の中では一番データとして重いはずの着物画像が1枚400KBとかなので
(柄とかによりますが)10枚くらいのデータを保存するといっぱいになって、
それ以上の登録ができなくなるかと思います。

対策1

アプリ内部の保存領域を増やすのは仕組み上無理なので、
データの保存先をライブラリーなどスマホ本体の方に変更するべく
プログラミング担当のもなかさんががんばってます。

まあでも難航してます。
実はデータの保存先は、最初本体側にしようとしたけど、
うまくいかなくてアプリ側にしたという経緯があるんです。

多分進捗状況は
スマホ側にデータ格納フォルダを作る→できた
スマホ側のフォルダに画像データを保存する→できた?
スマホ側のフォルダから画像データをひっぱってくる→できない
という感じだと思います。

そしてお知らせなのですが、もしデータの保存先がスマホ本体バージョンが完成したら
有料版ということにしようと思っています。
データの保存先が本体になれば、単にアイテムがたくさん登録できるようになるというだけではなく機種変しても、SDカードなどでデータを新しいスマホに移せるはずです。(多分。)
「これ、手持ちの着物全部登録したとして、機種変したらまた1からやり直しなのでは?」と思ってたのですが、たぶんそれが解決します。

ちなみに有料版が、そもそも完成しないという可能性も実はあります。
躍起になってやってるので、たぶんやり遂げると思うんですが…。

対策2

それとは別に今公開してる無料版も、アイテム登録可能数を増やそうと思ってます

このアプリでは、画像がキレイに見えるように、実際は大き目の画像を縮小して表示しています。
それを表示領域と画像の大きさをだいたい等寸とすることで、画像のデータサイズを小さくする予定です。
多分着物画像が1枚100kbくらいになるので、50枚くらいのデータが保存できるようになるはずです(理論上は…。)

縮小した画像はもう用意したんですが、たぶんこれを今の画像と差し替えるだけじゃなくてアイコンとして表示する際のピクセル指定とか??色々書き換えないといけないはずなので、もなかさんに教わってやってみようと思ってます。

以上、アプリ「着物クローゼット」の現状でした。
もなかさんに説明してもらってもイマイチ理解しきれてないので
上記の説明も間違ってる部分があるかもしれませんが、まあ概ねこんな感じです。

改良版無料版か有料版ができたらまた告知します!

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

レスポンシブデザインの簡単な作り方

開発者2人が欲しいと思うアプリを作った「着物クローゼット」
ですが!私ことイラスト担当ちどりはまだダウンロードできてません。
なぜなら、私はiphoneユーザーだからです!!

Macのパソコン買って、App Store年間登録料99ドル払えば使えるようになるけど。高いなあ。
広告収入がうまくいくといいなあ…道のりは遠いです。
androidスマホに買い替えるほうが早いかもしれないですね…

愚痴っぽくなってすみません。


さて、今日は1つのサイトをスマホでもパソコンでもうまく表示するには、という話です。

スマホとパソコンでは全然画面サイズが違うので、普通に作るとどちらかで見にくくなってしまいます。
スマホ用サイトとパソコン用サイトそれぞれを用意するという手もあるけど、それは大変そう。
そこで、レスポンシブデザイン
レスポンシブデザインとは、スマホ・パソコンどちらからでも見やすいように表示が切り替わるデザインのことです。

それでは以下、レスポンシブwebデザインの簡単な作り方です。

目標

パソコンで見ると
コンテンツ1 コンテンツ2 コンテンツ3
みたいにコンテツが横並びに表示されてて

スマホで見ると
コンテンツ1
コンテンツ2
コンテンツ3
みたいにコンテンツが縦並びに表示されるデザインにしたい。

方法

floatという方法とflexboxという方法でそういうデザインが作れそうです。
どっちの方法で作るか少し悩みました。
floatの方がややこしそうだけど、対応してるブラウザが多い。
flexboxの方が簡単そうだけど、古いブラウザ(IE10以前とか。)に対応してない。

悩みましたが、サイトを作る腕に自信がないのでflexboxにすることにしました。

下地づくり

パソコンかスマホかで表示が切り替わって欲しい部分を<div></div>とかで囲います。
そのdivにclass="container"とか名前をつけます。
それでcssの方に
.container {display: flex;}
と書きます。
html側は
<div class="container">コンテンツ1 コンテンツ2 コンテンツ3</div>
みたいな状態です。
これでdivで囲った部分の中身が動く下地ができました。

折り返し指定

次にCSSflex-flow: row wrap;という文字をたして
.container {display: flex; flex-flow: row wrap;}
とします。
これでコンテンツを左から順に置いていって、入りきらなくなったら今度は下に表示されるようになります。
ようするに画面幅が小さくなったら、それに応じて横並びのコンテンツが縦並びになってくれます。

最小サイズ指定

とはいえ、コンテンツの中身が文字だけだと、幅が狭くなっても
コン コン コン
テン テン テン
ツ1 ツ2 ツ3
コン コン コン
テン テン テン
ツ1 ツ2 ツ3
コン コン コン
テン テン テン
ツ1 ツ2 ツ3
みたいに縦にのびるばっかりで縦並びになってくれません。
そこで、各コンテンツに「これ以上は縮まないでね」という幅を設定します。
まず各コンテンツを<div></div>とかで囲います。
そのdivにclass="column"とか名前をつけます。
それでcssの方に
.column {min-width: 215px;}
と書きます。(215の部分は任意で変えてください)
html側は
<div class="container">
<div class="column">コンテンツ1</div>
<div class="column">コンテンツ2</div>
<div class="column">コンテンツ3</div>
</div>
みたいな状態です。
これで、画面幅が小さくなっても、各コンテンツの幅は215pxより小さくなりません。

スマホでは表示方法を変えたい部分を指定する

例えば見出しをパソコンではドーンと大きく表示したいけど、スマホでそんなに大きかったら邪魔だよね、という場合。
Media Queriesを使います。
CSS
@media screen and (max-width: 480px){ }
と記載して、{ }内にスマホではこんな風に表示してほしい、という内容をかいておけば、画面サイズが480px以下のときはそのルールが適応されます。
例えば
@media screen and (max-width: 480px){ h1{font-size: 20px;} }
みたいな感じです

スマホでは表示しなくていいものを指定する

スマホは画面が小さいのであんまりたくさんの物をつめこむと見にくくなってしまいます。
なので「これはスマホでは表示しなくていいや」という物があれば、先ほどのMedia Queries内に
.none {display:none;}
と記載します。
つまり
@media screen and (max-width: 480px){ .none {display:none;} }
という状態です。
それでhtmlの方で、表示しなくていいものにclass="none"と書けば、画面サイズが480px以下のときはそれは表示されません。
例えばicon.pngって画像を表示しなくていいなら
<div class="none"><img src="icon.png"></div>
とすれば、画面サイズが480px以下のときはicon.pngは表示されません。

ただし、このMedia Queries、IE8以下では使えません。
対応策はあるようなのですが、flexboxにした時点でIE10以下での表示を諦めてるので対策しませんでした。

文字のサイズ指定

基準となるフォントサイズに応じて、文字の大きさが相対的に変わるremという単位が便利です。

画像の対応

iphoneとかだと、画面の解像度が高いです。
対応方法はいくつかあるのですが、簡単なのは表示したい領域の2倍のサイズで画像を作って、widthとheightで実際に表示したい領域のサイズを指定して表示する方法です。(大きく作って小さく表示)
例えばicon.pngを幅150px高さ150pxで表示したい場合、まずicon.pngを幅300px高さ300pxで作ります。
そして
 <img src="icon.png" width="150" height="150">
と指定すれば、画面の解像度が高い機種で見てもきれいに見えます。

いかがでしたでしょうか。
初心者のざっくりした理解なのでおかしな部分があるかもしれませんが、私と同様初心者で、いきなり詳しいページみても全然わかんないよ、まずは大まかな構成が知りたいよ、という方には役にたつのではないかと思います。たぶん。

もっと詳しいことが知りたい場合は以下のサイト様たちを見てみてください。

http://qiita.com/junya/items/25c65fe12c18a9ab9286
http://www.webcreatorbox.com/tech/flexbox/
http://ja.learnlayout.com/flexbox.html
http://www.flapism.jp/html/278/
http://www.mdesign-works.com/blog/web/responsive-design-css/
http://scene-live.com/page.php?page=61

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

最低限のSEO対策

アプリ公開2日目、さっそくDLして使ってみてくれた方が現れ、開発者2人はとっても喜んでます!
しかし!
その方から、アイテムの登録ができなくなるという重大なバグを教えていただきまして。
わぁ、これは大問題だ。
もなかさんはバグを取り除くべくパソコンに噛りついてます。

 さて、プログラミングが全然分からない私はできることがないので、ブログを更新しようと思います。
今日はホームページのSEO対策について。

 

 今回のアプリはもなかさん:プログラミング 私:イラスト と分業して作ってます。
もなかさんより私の方が早く作業が終わりそうだったので、アプリのホームページを私が作ることにしました。
(まあ、結局もなかさんの追い上げで抜かされちゃったんですけどね。)

がんばって作ったアプリ、できればたくさんの人に使ってもらいたい。
そのためにはホームページを検索にひっかかりやすくしよう!
と、SEO対策を軽く勉強してみました。

SEO対策…検索で、できるだけ最初の方に表示されるよう頑張ること。
まあ、本気でやろうとしたら業者に依頼したりするような専門的な技術なので、
最低限のことだけやっておこう、と。
調べた結果をまとめてみます。

 

1、<title>タグにキーワードを入れる

「こんな言葉で検索する人にこのページを見てほしいな」というキーワードを、タイトルに入れようってことですね。
(でも実際の内容と無関係な言葉を入れちゃだめです)
例えばトップページのタイトルは
 着物を簡単にコーディネート。無料アプリ「着物クローゼット」
という風にしてみました。
それと、タイトルはページごとに違うほうがいいそうです。

2、<h1>タグにキーワードを入れる

<h>は見出しに使うタグなんですけど、それで囲まれた言葉が検索のとき重要視されるみたいです。
なので、タイトル同様、見出しにも「こんな言葉で検索する人にこのページを見てほしいな」
というキーワードを入れておくといいそうです。

 

とくに重要なのはこの2点みたいです。
かつ、キーワードを決めるときに、Google Adwordsキーワードプランナーを参考にするといいらしいんですけど、私はまだやってません。

他には

  • 画像にはaltで説明をつける

  • 文章量は多いほうがいい

  • 更新頻度を多くする

  • あちこちからリンクを貼ってもらう

  • 自分のサイト内でのリンクを増やす

  • リンクは画像より文字に貼るといい。文字にキーワードを含んでるとなお良い

  • urlにもキーワードを使い短めに

  • 強調したい部分(キーワード)はbよりstrongで囲う

  • ページ階層を深くしすぎない

  • 検索ロボット用のサイトマップを作成する

  • Google Search Consoleにホームページを登録する

といった対策があるようです。


こっちは「画像にはaltで説明をつける」くらいしかやってないかなあ
…あれ、頑張ったつもりなんだけど、あんまり頑張ってない?

ともあれ、これらの対策の効果あってか?6月14日現在
「着物 アプリ」で2ページめ。
「着物 コーディネート アプリ」で2ページめ。
「着物 クローゼット アプリ」で1ページめの一番上。
となっています。

できたら「着物 コーディネート」で検索しても上の方に入って欲しいんだけど、それはちょっと難しいかなあ。

 

次回はホームページをスマホでも見れるようにする方法について書こうと思います。
それでは!

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

nendの罠

落とし穴

まだあったの!?

と、思わず叫んでしまったのは、すでにGoogle Play Developer Consoleでアプリ公開をしてしまった直後でした。

公開して、後悔・・・あぁ、自分が寒いです・・・

すみません、少し落ち着きますね。

 

何が起こったのか

まずは、どうしてこんな事態になったのか、整理しておきます(自分のために)

ようやく

着物コーディネートアプリ「着物クローゼット」

f:id:mahoroba_p:20160612210120j:plain

が完成し、どや顔全開でGoogle Play Developer Consoleにアプリの登録をしたのです。

もちろん、登録でも結構つまづいたので(初心者丸出し)かなり時間がかかったのですが、何とか登録を終え、アプリ公開ボタンをいざポチッと!

参考にさせて頂いた幾つかのサイト様の情報では、登録してから2,3時間でGoogle Playに自分のアプリがお目見えするとのことでしたので、逸る気持ちを抑えつつ、お昼を食べながら待っていたのですが。

思いのほか早く、時間にして30~40分程度でしょうか。あっという間に公開までこぎつけました。

さすが天下のGoogle様、仕事が速くていらっしゃいますね(上げ上げ)

 

すかさずインストール

すぐさまGoogle Playで自作アプリを検索し、「着物クローゼット」の文字を見つけるが早いか、即行でインストール。

記念すべきアプリインストール第一人目の座を奪えたわけですが(誰も狙ってないって)きちんと動作するか試してみようとアプリを立ち上げ、悲劇は起こったのでした。

アプリは動く、nend広告 は表示されている、なのに、広告をクリックしても何も起こらない!

え、どゆこと!?

だってちゃんと表示されているのに。クリックしても反応しないのでは、クリック型広告の意味がありません。

というか、何故今まで気づかなかったの、自分!?

 

スマートフォン広告『nend』 の読込時差

色々調べて回った結果、恐らくこれだろうという原因に辿り着いた頃にはすっかり夜。

しかも、monacaのビルド回数制限(無料会員は24時間で3回まで)もアプリ登録時点で使い果たしており、本日中に差し替えることは不可能。

頑張ったのに、頑張ったのにーっ!

初めての公開でかなり気合入れたのに、公開直後に気づいたこの不具合。自分にがっかりです。

どうしてリリース前にデバックビルドして確かめておかなかったのか、非常に悔やまれます(←本当にね!

原因としては、

の二点みたいです。

 詳細はこちらのブログ様に分かりやすく説明してありましたので、参照ください。

私の場合は、Timeoutの時間設定を1000にすると長すぎるみたいで、800にしたらクリックできるようになりました。

ただし、800だと時々広告が読み込みきらないみたいで、広告が半分だけ表示されるというなんとも間抜けな出来栄えになります。

いっ、いいんですよ、動けば!(必死)

 

初っ端からぐだぐだ

そんなこんなでスマートにとは全然いきませんでしたが、リリース時の詰めの甘さも含め、初心者丸出し感も一緒に楽しんで頂ける一品が出来上がった次第でございます。

システム的にもまだ改善の余地がふんだんに残された、未来ある作品です(笑)

それでも、ようやく世に送り出せた感慨は、やはりちょっと心にじんときますね。

皆様の生活のおそばにおいて頂いて、少しでもお役に立てれば幸いです。

着物コーディネートアプリ「着物クローゼット」

宜しければ、話の種に、ちょこっとつついてみてください。

f:id:mahoroba_p:20160612210120j:plain

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

アプリ開発の二ヶ月を振り返る

思い返せば二ヶ月

とにかく動くモノが作りたくて、そして何より(主に自分達の)役に立つアプリが欲しくて始めたこのアプリ開発ですが、思い立ってからアプリ公開に至るまで約二ヶ月の期間を要しました。

何とか公開できるモノも完成したところですし、良い機会なのでこの二ヶ月をぼんやり振り返ってみたいと思います。

 

初めて尽くし

冬が終わり、それぞれ新生活が始まる春。寒過ぎず、暑過ぎず、着物を快適に着られる季節でもあります。ついつい買い物三昧したくなるのも仕方のないことですよね?ねっ!?(汗)

そうして増えていく着物小物。気が付けば、似たような色柄のモノがあそこにも、ここにも・・・

そうだ、アプリを作ろう!(京都に行こう、くらいのノリで)

あぁ、 春の陽気に当てられたんですね。きっと。

そうして始まった無謀な計画。もちろん、いきなり一からアプリ開発ができるノウハウなど持っていようはずが無い初心者二人ですので、出来る限り簡単に、楽チンに開発できる方法を模索しました。

結果、辿り着いたのが

Monaca - HTML5ハイブリッドアプリ開発プラットフォーム

という開発環境でした。

 

monaca」という名前

最初にmonacaを見つけてきたのはちどりさんです。色々と検索して、これが使いやすそうだと教えてくれました(ありがとっ☆)

その名前を聞いたとき、これは運命だと(勝手に)思いました。だって、私のハンドルネームと同じなんですから。

そんなわけで、二つ返事でmonacaに決定。なんて適当な理由(笑)

ちなみに私のハンドルネームは基本的に平仮名表記で、アルファベット表記の場合はmonakaです。はい、どうでもいい豆知識ですね。

monakaにした理由はさておき、実際に使ってみたらかなり使いやすかったですよ。

もしもこれからアプリ開発をしようと考えている初心者さんがいたら、是非オススメしたいです。

 

オススメポイント

まず、ローカルでの開発環境の構築が不要ということが大きいですね。私の愛用ノートPC(年代モノ)は空き容量が少なく、且つ、開発はちどりさんと二人で行うのでデータが同期できることが必須条件でした。

その点、ブラウザ上で作業が出来るmonacaは上記の条件を完全に満たしてくれました。もちろん、ローカル環境での開発とも併用できますので、ご安心を。

次に、多くのプラグインが用意されていることも大きいですね。私はあまり使いませんでしたが、きちんと活用できれば、初心者でも比較的簡単に、そこそこ格好のつくアプリが出来上がると思います。

それから、UIの分かりやすさもポイント高いのではないでしょうか。公式の解説も丁寧ですし、解説サイトも多いので、大抵のことはすぐに調べられます。

そして、ハイブリッドというだけあって、各種OSに対応したアプリをこれ一つで開発できるのです。覚えることが少なくて済むのは、初心者には本当にありがたいことですね。

 

困ったことは

もちろん、良い点ばかりではありませんので、ここで私なりの注意点や不満点も挙げておきます。主に、無料版を利用しているが故の制約なので、お金を掛ければ解決する問題が多いですが(苦笑)

  • ビルド回数制限 24時間で3回まで(無料版のみ)
  • 使えないプラグインが多い(無料版のみ)
  • iOSアプリのビルドは、先にAppleへのお布施をしないと利用出来ない(Appleのケチ!)
  • ブラウザでの開発なので、我が家の回線速度に依存する(貧弱回線に愛の手を)

まとめると、貧乏が全て悪い、ということで(泣)

 

初心者代表より、一言

なんだか、とりとめもない話ばかりになってしまいましたね。すみません。

要約すると、初心者でもアプリ作れるみたいですよ、ってことなんですけど。

この二ヶ月間、といっても、日中は普通に外で働いていますので、せいぜい夜の1~2時間程度(それも、毎日ではなく週の半分程度)を割いて、それで一応、アプリという形のモノが完成したことに自分達が一番驚いております。

きっと夏の終わりくらいには出来るよね、とか緩~いことを言っていたくらいですから。

ですので、作ってみたいけど時間も取れないから、とか、プログラムとかやったことないから、とか思っている初心者さんがいらしたら、是非ともこの機会に始めてみてください。本当に、意外とあっさりできちゃったりしますから。

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ

nendの導入

広告を入れる

せっかくアプリを作るのなら、ついでに広告も入れたくなるのが人の性ってものですよね。

べ、べつに広告収入とか狙ってないんだからねっ(汗)

そんなわけで、アプリ開発初心者のくせに一丁前に広告を入れようと頑張ってみたら、結構あちこちでつまずいたので(当然だ!)、メモ代わりに書き留めてみました。

 

nend (ネンド)

小学生が図工の時間にコネコネするアレではありません。

スマートフォン広告『nend』 は、クリック課金型広告のことです。

スマホでWebページ画面やアプリの一番下に表示されている広告、あれの一種ですね。他にも色々あるみたいですが、アプリを開発したmonacaの公式サイトで紹介されていたので、素直にこれにしてみました(安易)

広告掲載をお願いする場合は有料みたいですが、アプリに広告枠を設置するだけなら登録も利用も無料です。いやー、なんて経済的。素晴らしい。

もし興味がある人は、下のバナーからでも公式ページにいけるので覗いてみてください。

登録の流れ

ざっくりと登録までの流れを説明します。

しょうもないところでつまずいたりもしたので、何かの参考になれば幸いです(苦笑)

 大まかには、以下の順に行いました。

  1. nend へ登録
  2. 審査後、アカウント情報登録
  3. サイト/アプリの作成
  4. 新規広告枠の作成
  5. 承認後、広告コード取得

スクリーンショット付きの親切な説明は、monaca公式サイトこちらのブログ様に載っていますので、ここでは私が躓いたことを中心にお伝えします(照れ)

 

nend への登録

ここは流石に躓かなかった。偉い、自分!

一つだけ挙げるとすれば、私の場合、まだアプリの開発途中で登録作業を行っていたので、サイトURLの欄に記載する内容に戸惑いました。

とはいえ、これは公式でもきちんと説明してあったのですぐに解決しましたが。

開発中のアプリの場合は、以下のURLを記載します。

ここだけ気をつけたら、あとはすんなり登録完了。

nend の送信専用アドレスから登録した自分のメールアドレスに、

nend 】メディアパートナー┃仮登録完了のお知らせ

というメールが届いたら大丈夫です。

 

アカウント情報の登録

平日の営業時間中なら、仮登録後にすぐ、本登録までいくみたいなんですが、残念ながら土曜日に作業してしまったので、しばらく音沙汰なし状態。

月曜日になってようやく

nend 】メディアパートナー┃登録完了のお知らせ

というメールが届き、メール内の管理画面用URLをクリックするまで、nend のサイトにログインすら出来ません。

てか、最初の登録でパスワードも設定してるのに、登録完了メール来るまでログインできないとか、ちょっと焦るじゃないですか!?

しかも、エラーメッセージで、メールアドレスかパスワードが違ってますって言われたら、めちゃくちゃ動揺しますから!!

そんなわけで、登録は平日の営業時間内がオススメです。心底、オススメです!

あ、アカウント情報の登録は簡単なので、端折りますね(いい加減)

 

サイト/アプリの作成 と 新規広告枠の作成

広告枠の管理タブから、サイト/アプリの作成を選びます。

実際に広告を載せたいアプリやサイト(PCサイトでは広告は表示されません。あくまで、スマホ用のWebサイトのみです)を設定していくのですが、最初の登録時に一つ登録を済ませていると思いますので、まずはそれを選択。

基本的には必要事項を埋めていくだけなのですが、一つ、イラっとさせられたのが広告枠の形式の項目ですね。

オーバーレイという選択肢の存在。

あれば選びたくなりますよね。なのに、それなのに。

どゆこと!?

しかたないので、インラインを選択し、アプリ側でオーバーレイっぽくすることにしました。ちっ!(舌打ち)

しかも、この段階まで行くと広告コードがコピーできる状態になりますが、このコードをアプリ/サイトに貼り付けてもまだ何も表示されません。

広告枠の管理タブから広告枠を選び、ステータスの部分アクティブになるまで待たなければいけません。待てません!セッカチさんなんだから!(怒)

私みたいな、

とりあえず広告の中身は空でもいいから、アプリに埋め込んで表示を確かめてみたいのっ!

って人のためにテスト用コードも用意されているので、まずはそちらでお試しすることをオススメします。

nendサイトの右上にあるヘルプから、

ヘルプ => テスト用広告コードについて

でいけるので、よければお試しあれ。

 

広告コード取得

広告枠の登録が完了すると、登録したアプリ/サイト名の下に小さく広告コードとありますので、そちらをクリックすると、アプリ/サイトに貼り付ける用のコードが出てきます。

基本的にはこれをコピーして張り付ければ完成みたいなのですが、ここでも大きな落とし穴がありました(きっと初心者ホイホイなんです、間違いないです)

説明では、HTMLの

<head>ここにコードを貼り付ける</head>

とのことでしたが、騙されてはいけませんよ、初心者の皆様。

そんなところに貼り付けても、サイトでは表示されません。(アプリでは表示されましたが)

サイトで貼り付ける先は、

</head>ここにコードを貼り付ける<body>

↑↑↑ここです。こんなところに貼り付けようなんて、普通思いつきませんよね。なんて非道な!恐るべし、初心者ホイホイめ!

 

まとめ

そんなこんなで結構骨が折れましたが、無事nendを導入して、なんとかテスト表示までこぎつけました。

導入したらあとはほったらかしてたらガッポガッポ、とは流石にいかないでしょうけど、運用に関してはまた今度ということで。

にほんブログ村 ファッションブログ ふだん着物(和服)へにほんブログ村 スマホ・携帯ブログへ