サイトにAjaxいいねボタンを設置しよう(X173)

★ターゲット:サイトにいいね!ボタンを実装したい人

オラオラオラー!どうも虚空シャークです。オレは猛烈に感激している…これまで幾度なく挑戦してきては敗れた因縁のボスを倒した心境だ…最近、プログラミングの勉強がてらサイトにオリジナルのいいね!ボタンを設置したいと思い、あれやこれやと調べていたのだが、最も有力と思えるサイトを発見!それがAjaxいいねボタンである。

※Ajaxいいねボタンのサイト

このサイトでは、無料でいいねボタンの設置をサポートしてくれる。ただし、ただ与えられたコードを貼り付けてできるような生易しいものではない…そこで手順を解説したい

(1)まずはAjaxいいねボタンをダウンロードしよう

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

上記URLに手順がガイドされている。手順では、インターネットしたファイルを解凍し、自分のサイトにアップロードするように書いてある。このアップロードだが、オレは愚かなことにHTMLファイルに入れるだけだと勘違いしていた。

そうではなく、サーバーにアップロードするにはFTPツールというのを使わんといかん。FTPツールも色々あるみたいだが、オレの場合はホームページビルダーを使ってるので、その中に「ファイル転送ツール」というのがある。それを起動し、public_htmlのとこに指示にある「iine」フォルダをドラッグ(移動)する。すると自動的に高速で文字がバババって出ていかにも転送されてるようだった。




(2)インストレーション・ウィザードを実行する

ここが一番手こずった…なにせ説明に書いてある「ブラウザでiine/install/index.phpを開けてください」の操作が意味ワカランカッタからだ。この文章をそのまま受け取ると、iine/install/index.phpをそのままコピッてMicrosoft Edgeとかのブラウザで貼り付けてアクセスするのだが、PHPのインストールサイトとか検索結果が出てくるだけ…PHPのインストールが必要なのか?と思いPHPのインストールまでしてしまう始末…

自力で考えても分からなかったので、運営もとに問い合わせてみることに。すると、サイトのURL教えてもらえばこっちで試してみるとのこと。すると返ってきた答えが、普通にできましたとのこと。答えは、単にiine/install/index.phpで開くんじゃなくて

(自分のサイトのURL)/iine/install/index.php

が正しかったようだ。多分こう書いてくれんとワカランと思う…これで無事説明通り、「スタート」ボタンがある画面に進んだ。

(3)MySQLの情報を入力する

ここも若干苦戦した。まずMySQLとは何ぞや?ということ。分からないのでググると、世界で最も利用されている、データベースを管理するソフトウェアらしい。これもインストールが必要かと思い、インストール。しかし結論、先ほどのPHPやMySQLのインストールは不要だったことが分かった。なぜなら、オレが今契約している「エックスサーバー」では両方とも実装されているからだ。

ここではMySQLのホスト名、データベース名、ユーザー名、パスワードを入れる必要がある。エックスサーバーで契約している場合はエックスサーバーのサーバーパネルにログインすれば確認できる。アクセス所有権を与えないとログインできないので注意な。

これでログインできれば、いよいよコードの生成画面になる。アップロードしたiineフォルダにいくつかのバリエーションのいいねボタンが入ってるが、Ajaxいいねボタンのトップページからほかにも色んな種類のボタンテンプレートがダウンロードできるので、これを上記の要領で自分のサイトにアップロードすれば使えるぞ!

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



Ajaxいいねボタンを実装するにあたって、一番恩恵を感じたのは、俺様が契約してる、このエックスサーバー様様さ。これさえ契約してれば、PHPやらMySQLやらインストールしなくてもできたのだからな。何より容量300GBってのがすごい。オレは数年ホームページを作ってるが、まだHTMLファイル2GBぐらいしか消費してないぜ。ほかにWordPressも使えるし、言うことなし!

ウェブ知識-HTML5、PHP、MySQL(X172)

★ターゲット:ウェブページにいいね!ボタン設置したい人

ども~!虚空ポンタです!WEBサイトであれやりたい!これやりたい!ってのはあるんだけど、ピンポイントで解説してくれるサイトや本が中々見つからなくて難しいよ~!

今回のテーマは、ウェブページで「投票」ボタンや「いいね!」ボタン、「お気に入り」ボタンとかなんでもいいんだけど、押された数によってページ上で集計されていく仕組みを作りたいんだよね~!

でも思ってたより数倍困難(>_<)調べた中で一番信頼できそうなのが、Ajaxいいねボタンっていうサービスなんだけど、このサイトの手順通りコード貼り付けしても反映されない…そこでまずPHPとMySQLを使用…とあるので、とりあえずこの2つを公式サイトからダウンロード。

また、今僕が使ってるのはホームページビルダー19でHTML5に対応してないっぽい?から新しいホームページビルダー22を購入し、HTML5仕様にした。いいね!ボタンを実装するためにあれやこれやと試してるけど、まだ実現できていない。

一応、サイトに問い合わせしてみたけど予想通り返信こないし、自力で解決するしかない孤独な戦いですよ。分からない単語も山ほどあるから、1つ1つ勉強していくしかないと思うんだ。というワケで勉強スタート!




(1)HTML5

今まで気に留めたこともなかったけど、HTMLにはバージョンがあるんだねえ。今までずっと使ってたのがHTML4で、これは1997/12に登場したという大分古いヤツ(笑) で、今回使い始めたのがHTML5という最新型で、これでも2014/10に登場したものだ。主な違いや特徴を列挙するね。

●HTMLソースの先頭に<!DOCTYPE html>が入る

HTMLソースを出したさい、<html>より先頭に<!DOCTYPE html>と入っていればHTML5で作られているということ。

●<font>タグ廃止

今まで当たり前のように<font size=”4″>とかで文字サイズとか指定してたけど、HTML5ではこの記述方法は推奨しないみたい。でも使えるっちゃ使えるけど。

代わりに<span style=”font-size:15pt;”>などのように、<span>タグで文字の背景色とかまとめてCSSで指定する仕様になったみたい。

●他の言語やファイルの埋め込みに柔軟に対応できる

これよこれ!要はPHPとかに柔軟に対応できるってことやろ??これに期待!!

(2)PHPとMySQL

PHPはウェブ系のプログラミング言語だね。利用してるサーバーが対応してればHTMLソースにそのまま書くことができるよ。記述方法は<?phpから始まり?>で終わる。

MySQLとは何ぞや?なんだけど、海外のOracle社が提供し、世界で最もメジャーなオープンソースソフトウェアだそうだよ。オープンソースっていうのは、ソフトウェアを構成しているプログラム(ソースコード)を無償で一般公開すること。よって誰でもソフトウェアの改良や再配布ができるらしい!

仕事の現場でもよく利用され、Yahoo!やGoogleも利用しているというから信用していいと思う。SSHやSSLでセキュリティも万全だって!僕もインストールしてみたけど、文字は全部英語で取っつきにくい(;’∀’)

『【電子書籍】PHPとMySQLのツボとコツがゼッタイにわかる本』:横山達大

いいね!ボタンをページに設置しようという、今回の目的に沿った素晴らしい本。AjaxいいねボタンはPHPとMySQLで動作してるらしいから、この本を見れば仕組みが分かるのでは??

サイトやWordPressでポップアップを作る(X171)

★ターゲット:サイトでプログラミングしたい人♥

やあ! 私は虚空ウサ♥
ITで生計を立てたいチミ達のためにがんばるよ♥

プログラミングって今とっても需要あるよね~

でも複雑なコードだけ学ぼうとしてもイマイチ頭に入ってこないと思う。 プログラミングってサイト作ったりアプリ作ったりと実践ありきだと思うんだ。

というワケでこの回では、サイトを自分で作り、サイトにプログラミング要素を取り入れちゃおう★という回だっ! ついてキテネ♥

そうだな~、では今回は初心者向けに、サイトで何かボタン押したらポップアップウィンドウが出るように仕掛けを作ることをテーマにしちゃおう!

(1)ボタン作ってポップアップウィンドウ出そう!

サイトにはボタンを設置できるんだ。 ボタン+ポップアップウィンドウ相性がいいよ。 例えば〇×クイズなら、〇のボタンと×のボタンを作れば、それを押してなんらかの回答を出すことができるからねっ! 回答はポップアップウィンドウ(画面真ん中とかに出てくるヤツ)で表示させるボタンの設置方法はHTMLの知識になるんだけど、コードはね…

<button type=”submit”onClick=”alert(‘〇〇’);” >(ボタンの中の文字や画像)</button>

だね。 意外と簡単やろ?? 〇〇にはポップアップウィンドウで表示させる文言を決められるよ! (ボタンの中の文章や画像)っていうのは、ボタンの中に表示させる文字や画像を指定するんだ。

あ、WordPressだとデフォルトではJavaScript実装されてないのか、プラグインの導入が必要みたいだね汗




(2)WordPressでポップアップウィンドウ出すには?

かくいうこのブログはWordPressで書いてるんだけど、WordPressは初心者には使いやすくていいけど、慣れてくると自由度は低いことに気づく(‘◇’)ゞ コードの融通利かんし! JavaScriptも最初は使えないみたいで、ポップアップウィンドウとか出すにはプラグインをインストールするなどの方法があるみたいだね☆

調べたら「Popup Maker」というソフトがいいみたいだ☆インストールは左上の三本線→プラグイン→新規追加→プラグインの検索からできるよっ!

●ポップアップの作成

まずはポップアップウィンドウを作る作業からだね。まず編集画面がほとんど英語なので、分かりやすくするためマウス右クリックで日本語に翻訳しておこう。

やり方はWordPressトップ画面の左上の横三本線→「ポップアップを作成する」→「ポップアップ名、ポップアップタイトル、本文」を記述→画面下の「トリガー」→「新しいトリガーを追加」→「追加」→「追加」→「公開」でできるよ!

ポップアップ名というのは、他と区別するためのデータ名で、ポップアップタイトルは、ポップアップ画面の左上に表示される大文字だね。本文にはポップアップで表示させたい文字や画像、動画などを自由に記述できるよっ!

トリガーっていうのは、ポップアップが起動する条件のことだよ。これは2通りあって、何か文字や画像をクリックしたらポップアップが出るのか、一定時間経過したら自動でポップアップが出るのか指定できるんだ。デフォルトでは「クリック型」になってるよっ☆まあ、これが一番無難だからね(^^)

ポップアップが作成できたら、いよいよブログに導入する番だ。まず、作成したポップアップのコードをコピーしなければならない。やり方は左上の横三本線→「すべてのポップアップ」→使用したいポップアップタイトルの右横に表示された「popmake-〇〇〇〇」という文字をコピーしよう。そしてブログの編集画面を開き、ポップアップの起動条件にしたい文字や画像の部分を下記コードで囲もう。

<span class=”popmake-〇〇〇〇”>(対象の文字や画像)</span>

今日のテーマは理解できたね!??

『【Amazon Kindle版】いちばんやさしいWordPressの教本』:石川栄和ほか

WordPressは使いやすいけど、プラグインとかが英語で解説されていたり、分かりづらい点もあるので、本を読んでしっかり学んだほうがよいかもしれませんっ!著者はWordPressのテーマやプラグインの開発をてがける会社の社長さんなので安心ですっ!