REAL RHAPSODY 

MICRO NOTE

ビジネスノートでは筆者の仕事内容やスキルアップについて語ります。

Ajaxいいね実装するナリ(BUSINESS NOTE4)


筆者が従事する仕事で成果を最大限出し、社会に貢献する為の術を公開します。
仕事の詳細や会社名はコンプライアンスの関係で明かせませんが、 仕事に関係する知識やスキルアップに繋がる事を追求していきたいと思います。

<目次>

【16】Amazon広告出そうとしたが…ナリ

【17】自営業はメンタル勝負ナリ

【18】サイトにテストや診断ツールを導入しよう

【19】投票機能が実装できない!HTML5に移行ナリ

【20】Ajaxいいねボタン実装するナリ






★ページ完成度:80%
★文字数:約7900字(OK)



キーワード検索




『【エックスサーバー】高速・高機能のレンタルサーバー』:エックスサーバー(株)



ごんし「ワシが契約してるレンタルサーバー、その名もエックスサーバー!これはすごいぞ!まずアップロードできる容量がすごすぎる!
300GB以上!ワシが今使ってる容量がどれくらいか調べてみたところ(HTMLファイルの容量)、2021/9時点で約2GBだから、全然空いてることになる。PHPも使えるし、WordPressも使える!万能万歳!!」



【16】Amazon広告出そうとしたが…ナリ



★初筆:2021/6/30
★更新:2021/7/11


ごんし「最近、電子書籍制作をがんばっているが、当然ながら中々売れない。というワケでGoogle広告と同じようにAmazon広告というものがあり、これはAmazonサイト内外で自分が出した商品を広告表示してくれるというものだ。Amazon広告を始めるには、Google広告と同じようにアカウントがあればできると思ってたが、なんちゃらアカウントが必要みたいで、これがまず意味わからん。アカウント取得で有料!?…で調べてみた。

※Amazon Advertising(Amazon広告)公式サイト

Ⅰ Amazon用で色んなアカウントがある?ナリ

●セラーセントラルアカウント

ごんし「Amazonで主体的に販売する為の出品用のアカウントのことらしい。なんと、取得するには月額4,900円(税抜)かかる。」

●ベンダーセントラルアカウント

ごんし「Amazonに販売を任せる為にアカウントのことらしい。アカウント利用は無料だがID発行は審査がある。販売はAmazonに任せるが、売れなかった場合は放置される。」

●Kindle Direct Publishingのアカウント

ごんし「む…?これは普通に買い物用のアカウントで使えたのだが?これでやればいいのかな?」

ごんし「ちなみにワシは、Amazon広告は国際化を狙い、米国のAmazon.comに出したいと目論んでおる。そこで、Amazon広告登録の段階でKindle Direct Publishingのアカウントで進もうとしたら…悪い予感的中。海外用の電子書籍は、日本のAmazon.co.jpではなく、Amazon.comで出さんといかんのかな?」

ごんし「あ…これ試しに国登録で日本にしてみたら、Kindle Direct Publishingのアカウント使えんらしい。電子書籍以外の雑貨とかならAmazon.co.jpからでも広告出せるということだな。ということは、最初に英語版の電子書籍をAmazon.co.jpで出したのはそもそも失敗。
最初から
Amazon.comのアカウントで英語版電子書籍を出し、それをAmazon広告で宣伝すればいいとみた。」

Ⅱ Amazon.comで電子書籍出版して広告出すナリ

※Amazon.comのKindle Direct Publishing

ごんし「当然ながら米国アマゾンは全部英語なのだが、マウス右クリックで日本語に翻訳しちゃえばいい。そこで英語版電子書籍を出版はあっさりできたが、気になるのは銀行の登録。日本語版と同じく、福銀の情報で登録はできたのだが、ネットで調べると海外の口座を登録せないかんという情報もチラホラ。しかし以下のページを参照すると、出品者が出品している市場とは異なる国に銀行口座を開設している場合、
Amazonが売上金を現地の銀行口座に送金してくれるとある。だが手数料がかかるみたいなので注意が必要だ。」

※Amazon海外口座送金サービス(ACCS)

ごんし「よってひとまず英語版は米国アマゾンで販売していき、Amazon広告にもチャレンジしてみよう。」

●広告出してみたが…

ごんし「1日あたりの予算3$(約330円)、1クリックあたりの単価を0.75$(約83円)に設定して広告出してみた!しかしGoogle広告と違い、表示回数が少ない。1日あたり50回以下だ。クリック回数0。単価上げたら表示されやすくなるみたいだが…本の値段安くしてるので、クリックされて売れなかったら損するし…むずいな。 これ、スポンサー広告というのにしてるのだが、スマホで見ると商品ページ上部のかなりかなり小さい枠の中に表示されるようだ。クリック率低いのは納得か…?」

【17】自営業はメンタル勝負ナリ



★初筆:2021/7/2
★更新:2021/7/22


ごんし「…全然売れん。そんな簡単じゃないと分かってたさ。でも理屈通りにはいかねえ。最近思うのが、好きなことを仕事になんかロクでもないってこと。広告代やらソフト代やらサーバー代やら金がかかるばかりで赤字続きだ。金払って広告出して露出増えたと思ったら動画低評価だからな。民衆は
娯楽に飢えた消費モンスターだ。世の中便利で楽しいものが溢れすぎて目や耳が肥えてやがる。周りが全部敵に見える。」

Ⅰ 批判に対する鉄壁のマインドもつナリ

ごんし「全然成果が出ないのもつらいが、それ以上に過酷なのが批判されること。SNSのコメント欄に我がHPのことをこわいとか気持ち悪いとかたまに書かれる。しかし自分の趣味を気持ち悪いとかいわれても、性癖みたいなもので、自分がいいと思ってやってるんだから、他人がどう思おうと知ったことではない。不快ならみるな。わざわざ書き込むな。暇人どもが。そうだ、トップページでちょっと警告しておくか。」

Ⅱ 辞めて何するナリか?

ごんし「こんな苦しい思いするなら、いっそ辞めた方がいいんじゃね?と思うこともある。しかし辞めてワシに何が残るかというと、ワシには何も残らない。今の夢に匹敵する生きがいが見つかれば別だが…まず今更見つからんだろう。そもそも、今のプロジェクトは
自分が好きでやってて誰にも強要されてないんだから、辞める理由がない。たとえそれが金になろうとならなかろうと。」

【18】サイトにテストや診断ツールを導入しよう



★初筆:2021/9/14
★更新:2021/10/20


ごんし「さてさて…エンジニアになるための登竜門として、サイトにTEST機能を導入したい。導入するページは、完成したページから。」

Ⅰ LIFE ENERGYのページにTESTを導入

ごんし「まず大事なのは、自分がどういう仕組みを取り入れたいという目的だ。ARTISTIC LIFEとMUSICAL LIFE、EXPERT LIFEのページは一部プログラミング要素を取り入れ、GROWING LIFEのページはプログラミング要素をメインに展開する。

10/20以降、計画変更。AL、ML、ELのページに中途半端にプログラミング要素を入れても使い辛くなるだけだと思い、プログラミング要素を入れるのはGROWING LIFEに絞ることに決定!」

(1)ポップアップウィンドウを使い選択試験を出題する

ごんし「クイズを普通に文章で書き、〇と×のボタンを設置。どちらかを押すとポップアップウィンドウを表示させ、正解を提示する。または2~4択の選択式で、それぞれに回答を用意する。」

(2)回答フォームを設置する

ごんし「ある問題を出題し、回答フォームを作ってそこにユーザーが入力できるようにする。送信ボタンを設置し、正しい答えが送信されたら正解、違う答えが送信されたら不正解と表示させる。」

(3)診断ツールを設置する

ごんし「ユーザーに適した職業や映画、アプリ、ゲーム、その他商品などを診断する。方法はいくつか項目を選択させ、総合数値により判定する。」

Ⅱ SWEET AMOREでは会話機能導入

ごんし「SWEET AMOREはユーザーと女の子がデート体験できるようにしたい。」

(1)会話で選択式にし、選択した回答により女の子の返事が変わる

ごんし「選択式のボタンを設置し、選んだ回答に対してポップアップウィンドウで返事を表示するというシステムだ。」

(2)キャラクターの人気投票を行う

ごんし「アンケート用の専用ページを作り、投票促すか、キャラクター個人ページに<"いいねボタン"を設置し、集計する。

投票ボタンをクリックしたら、数が自動で増えていく仕組みを作りたいと思ったが、それやるにはHTMLとかJavaScriptのコード貼り付けるだけじゃダメで、別の集計用のサーバーが必要な様子。調べたらFC2とかでできるらしい。ただ面倒なことに
美女120名分の投票ボタンを個別に作る必要がある。また、投票フォームの設置で最低2つのボタン設置が必要なので、美女個別ページに投票ボタン設置しようとしたら、投票ボタン+何かボタンを設置しなければならん。うーむ…面倒だが、〇〇に投票!+もう1つの選択はまあ好きボタンにして使い回すとすっか。…と思ったけどコード貼り付けても投票ボタン反映せんし、FC2に全体公開されてるっぽいんでやめた。」

ごんし「で、次にAjaxいいねボタンを試したがこれもコード貼り付けても反映なし。PHP(v5.2からv7.4)とMySQL使ってるらしい。何がダメなんだ…?」

※参考サイト

・自分のページの自作いいね!

・Ajaxいいねボタン


【19】投票機能が実装できない!HTML5に移行ナリ



★初筆:2021/9/19
★更新:2021/9/21


ごんし「ウガガガ!SWEET AMOREで投票ボタンつけようと先日奮闘していたのだが、想像以上に困難だった。まず外部サービス使わずHTMLとかJavaScriptだけでできないか調べるが期待通りの答えが見つからず、FC2やAjaxいいねボタンなど外部サービス使って実装試みるもコード貼り付けても反映しないという有様でふんだり蹴ったりだ。というワケで対策を講じる。」

(1)PHPのダウンロードが必要なのでは?

ごんし「PHPはHTMLに記述さえすれば動作するかと思ったが、Ajaxいいね!ボタンのコード貼っても動作しなかったので、パソコンへのインストールが必要ではないかと考える。」

(2)HTMLのバージョン低いのでは?

ごんし「調べるとHTMLにはバージョンがあり、今ワシが使ってるホームページビルダー19が対応しているのはHTML4らしい。これは1997年から使われてる大分古いバージョンで、最新はHTML5という2014年から使われてるバージョン。最新のホームページビルダー22ならHTML5が使えるっぽい。」

Ⅰ ホームページビルダー22購入!HTML4→5に移行ナリ

ごんし「ホームページビルダー19はCD-ROMでパソコンにインストールだったが、最新のホームページビルダー22はCD-ROMなしでダウンロードできるらしい。」

●ホームページビルダー22インストールしてみた!

ごんし「ほう!思ったよりめちゃ簡単ではないか!見た目もほとんど変わらんし!データもそのまま移行されてた!HTMLの最初のコードはしっかりHTML5仕様になってた。」

●コード書き換えるナリ

ごんし「なぜかビルダー22をインストールしたはいいが、あるページは自動でHTMLソースが
<!DOCTYPE html>に変わっているのに、あるページはHTML4の表記のままと謎。この場合手動で<!DOCTYPE html>に書き換えるのか?」

●font修正するナリ

ごんし「HTML5ではfontタグが廃止され、<span style>でまとめて指定になった。よってこれからfontの書き方は変えていかねばならん。色々試し、これまでの文字サイズと互換性が高いのは基本サイズが"font-size:15pt;"、大きめの文字は"font-size:20pt;"が丁度良い。太字にする場合font-weight:700で指定する。」

Ⅱ PHPインストールして色々やるナリ

※PHP 用 Windows: バイナリとソース リリース

(1)PHPインストールするナリ

ごんし「上記URLでZIPを選択し、ダウンロードしたらphp...なんとかっていうフォルダを右クリックしてすべて展開→展開先をCドライブの直下にする(C:\php)。ここまではヨシ。


※参考サイト

・PHPのダウンロード方法(TechAcademy)

(2)Ajaxいいねボタンのインストール意味ワカランナリ

※Ajaxいいねボタン v2.23インストレーションガイド

ごんし「上記URLに手順が書いており、2.ウェブサイトにアップロードまではよいのだが、3.インストレーション・ウィザードの実行の指示で"ブラウザでiine/install/index.phpを開けてください"と書いてあるのでこの文字をコピってMicrosoft EdgeとかChromeのURLに貼り付けるのだが、提示された画面は出ず、PHPのインストールとか検索結果が出てくるだけ。貼付け用コードの2業行のコードをペーストするだけでいいねボタンを設置できるともあるが、コード貼り付けてもボタンなど何も出ず空白ができるだけ。こりゃギブアップ!」

ごんし「問い合わせしたが案の定返信こないので、もう少し粘ってみることに。ブラウザ開くというのは自分のDドライブに移したDATA(D:)>なんちゃら>iineというのをコピってブラウザに貼り付けるのでないか?と想い実行。するとPHPのコードが表示されるだけだった。よくみるとサイトにこのスクリプトはPHPとMySQLを使用すると書いてあるので、MySQLとは何ぞやと思い調べる。」

(3)とりあえずMySQLとやらをダウンロードしPHPファイルを開く

※MySQL :: ダウンロードを開始する

ごんし「上記URLよりダウンロードし、パソコンで普通にアプリとして起動できる。何やらPHPファイルをブラウザで開くとあるが、ブラウザでは開けないとネットで書いてあるし、これはMicrosoft EdgeなどではなくMySQLやXAMPPといったソフトを指すのか?」

【20】Ajaxいいねボタン実装するナリ



★初筆:2021/9/22
★更新:2021/9/28


ごんし「なんと、Ajaxいいねボタンから返信がきて、"スクリプトをまずサイトにアップロードしてください"とのこと。できなかったらURLを送ってくれればこっちで試してみるとのことだ。これはありがたい。だがその前に、これまでワシの認識だと、サイトへのアップロードはHTMLファイル(ワシの場合HWというフォルダ)に入れるという認識だったが、これはファイル転送ツールを使うのではないか?と思い試してみることに。また、PHPもインストールはしたがサイトにアップロードしてないので転送する。」

ごんし「HW(ワシのHTMLファイル)>iine>install>index.phpをそのまま開くとBracketsというアプリが起動するのだが、そこでもまたエラーが…以下の2つ。

①PHPランタイムが見つかりません。PHP7ランタイムをインストールして、、PHPの環境設定で適切に"executablePath"を更新してください。これにより、コードヒント、パラメーターヒント、定義にジャンプなどのPHP関連のツールが有効になります。

②環境設定を読み込むさいにエラーが発生しました。
環境設定が有効なJSONではありません。ファイルが開かれます。フォーマットを修正してください。変更を反映するには、Bracketsを再起動する必要があります。


ごんし「①については、上記したPHPのインストール方法に従い環境変数とやらの設定をしたら出なくなった。」

Ⅰ スタートボタンの画面に!!

ごんし「Ajaxいいねボタンのサポートによると、"
(自分のサイトのURL)/iine/install/index.phpでスタートボタンの画面になると仰せ。おお!!こうやってやるのか!そこで先に進めたはいいが、今度は以下を入力する画面に。」

・ホスト名
・データベース名
・ユーザー名(データベースにアクセスするためのユーザー名)
・パスワード(データベースにアクセスするためのパスワード)

ごんし「これらの入力は、MySQLを使ってデータベースを作成しなきゃならんらしい。MySQLはインストール済みだから、データベース作成の作業にかかろう。またこっからどんづまりにならなきゃよいが…」

むむ!このホスト名やらはよく考えたら、自分が契約してるXserverで既にあるものではないか?と思い調べたら予感的中!Xserverにログインしたら普通にMySQLデータベース名やらホスト名が書いてあった。これでいいのか?ワシが契約してるサーバーではMySQLのバージョンはMySQL5.7。

でもどれがデータベース名でどれがユーザー名かよくわからんな。Xserverのサポートみたらデータベース名=サーバーID_データベース名らしい。あれやこれやと試し、追加したユーザーに
アクセス権を与えて入力したら、アクセス成功!!ということで貼付け用コードの画面に移る。」

Ⅱ ジャンジャンいいね貼るナリ!!

ごんし「最初のコード貼付けはできた…のだが、2回目以降貼り付けるには、Ajaxいいねボタンのお試しのとこからやればいいのか…?と思い、コード貼るが反映しない…そして改めてインストレーションガイドを参照。するとちゃっかり…貼付けコード作成ページを開くには、iine/codegen/をブラウザで開いてくださいと書いてあった…」

※Ajaxいいねボタン二行貼付け

あ、はい。
(自分のサイトのURL)/iine/codegen/で開けばいいのね。いい子はお試しページからやっちゃだめよ。」






LINK


IT系専門職目指すナリ(BUSINESS NOTE3)

Programing Master:プログラミング言語の種類

HTML+CSS Operater:ウェブ開発の基本

PHP Performer:いいねボタンの設置など

JavaScript Beginner:動的なウェブサイトを作る

Appli Making:アプリ開発で生き残る方法


Universal Project:ヒロハタワールドの事業化計画