jQueryとCSSで遊ぼう【初級者向け】

blog160912

今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら

作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)

ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。


いまでは、このような使い方をすることが多いです。


jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う


CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。

Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。

それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。

終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。

on()は、clickやmouseenterなどの動作の時に命令を発動させます。

例では「click」イベントが起こったときに、


の2つの命令をしています。

①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。

②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて


CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。

transitionは自動ではスタートしません。またループもできません。

しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。

transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。

キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点


CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。

もちろん、text-alignをleftからcenterにしてもアニメーションはしません。

数値を扱うものしか使えない、とおぼえておいてください。

先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。

※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。


発火


これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。

CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)

もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。

そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。

例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。


また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。


さまざまなジェネレーターやライブラリ


自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。

そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。

作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。

Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。

たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。


参考サイト



Wixの新機能を試してみました

Wix Editor
 

無料で使えるWebサイト作成ツール「Wix」。
自由度の高いレイアウトや、アニメーションなどの目を引くデザインが、コードをいっさい書かなくても簡単に実装できてしまいます。

logo
Wix.com
http://ja.wix.com/

数ヶ月前にWixでWebサイトを作ることがあった時にも、その簡単さに驚いたのですが、それからもどんどん新しい機能が追加され、より多岐にわたったデザインを作ることができるようになりました。

その新機能の中でも特に気になった2つ。8月に実装されたばかりの新しいスクロールエフェクトと、全画面に対応したカラムレイアウトについて、今回はご紹介します。

続きを読む Wixの新機能を試してみました


WordPressで画像情報を個々に取得する。

どうもKazです。

WordPressで画像を扱う際に、画像のalt、キャプション(caption)、説明(description)を個別に引用する事がありました。
altはともかく、キャプションや説明の欄を使う事が今まで無かったのでネットで調べてみると、以外と個別に取得する方法を書いている方が見当たらなかったので自分のメモ代わりの為にも書いておこうと思います。

WordPressで画像を扱う際にIDを持たせるかURLを持たせるか考える事があるかと思いますが、画像からイロイロと情報を引き出す場合はIDを持たせた方が使いやすいと思います。

さて、画像はIDで持つ事にして、その画像の情報はドコにあるのかと言うと…
WordPressのDBは『メディア用』『投稿用』『カスタム投稿用』などキレイに分かれておらず『ごった煮』状態になっていますので探すのは大変なのですが

.wp_postmeta
(meta_IDをキーにpost_IDやはaltなどがあります)

.wp_posts
(IDをキーに、キャプション、説明などがあります)

この2つのDBの中に入っています。
※画像に情報を書き込み、AdminerプラグインなどDB内を確認してみてください。

それぞれの記録状態がわかったので
画像のIDをキーとして取得する方法を説明致します。

【altの取得】

※altに関しては定番ですので、説明は不要かと思います。


キャプション(caption)、説明(description)の取得
前に説明した通りwp_postsの1レコードに書き込まれていますので、その1レコードを全部取得してから必要な情報のみ取得します。

【該当レコードの取得】


これでIDに紐付けされたレコードが取得できます。
取得できる項目が23項目ほどありますが
その中で

キャプション = post_excerpt
説明 = post_content
タイトル = post_title

以上の項目で持っています。
ちなみに、こんな物もあります。

投稿のタイプ(画像のみ) = post_type
オリジナル画像のURL = guid

では、早速alt以外の項目も取得していきましょう。

【画像情報の取得】


これで画像IDから基本的な情報が取得できました。

連続で取得する場合は、画像IDを配列に持ってループさせ
各情報も配列で持てば扱いやすくなるとおもいます。


安い独自SSLの使えるサーバーについて

近年急激に安くなった独自SSL。Googleが検索順位に影響するよ!と言い始めてからにわかに注目を集めています。かつて安いSSLと言えば、サーバー会社の提供する共用SSLがほとんどでしたが、昨年あたりから年数千円単位の格安の独自SSLサービスが出てきました。サーバーを契約すれば、無料で使えるエックスサーバーのようなサービスもあります。2016年8月現在、有名処のサーバーの独自SSLサービスを調べてみました。

格安SSL証明書について
証明書の信頼性云々もさることながら、色々制限もあります。
・格安SSLの場合、SSLの持ち込みはできないケースがほとんど。サーバー会社とセットで利用する形態になる。
・ドメイン認証型のため、利用できるブラウザに制限がある。ざっくり言うと古いブラウザでは表示できない可能性あり。更にざっくり言うとガラケーは弾かれる可能性大。その代わりに審査が簡単で即日利用できるようになるなど、安い以外のメリットもあり。




■さくらインターネット

証明書 Rapid SSL
価格 年1500円

詳細:さくらのSSL https://ssl.sakura.ad.jp/

コンパネから申し込んで、即実利用可能。




■ロリポップ/ヘテルム

証明書 GlobalSign クイック認証SSL
価格 ロリポップ年20000円 ヘテルム年18000円

詳細:ヘテルム 独自SSL https://heteml.jp/option/ssl/

GMOグループグローバルサインのSSLを提供。流行の格安SSLは提供していない模様。




■お名前.com/Xrea/CORE server/Value server

証明書 アルファSSL
価格 年1200円

詳細:バリューサーバー 独自SSL https://www.value-domain.com/pr/ssl/

月額換算で100円とかなり安い。アルファSSL自体もGMOグループ。そう考えるとロリポップでアルファSSLを扱うのも時間の問題か。




■ファーストサーバー(Zenlogic)

証明書 Let’s Encrypt
価格 0円

詳細:Zenlogic無料SSL https://zenlogic.jp/option/ssl/letsencrypt.html

いつの間にやらクラウドサーバーがサービスの主になっていたファーストサーバー。法人・個人事業主に限定されるが、無料でSSLを提供している。




■エックスサーバー

証明書 Let’s Encrypt
価格 0円

詳細:エックスサーバー独自SSLについて https://www.xserver.ne.jp/functions/service_ssl.php

弊社も利用中。ファーストサーバーと同じく、Let’s Encryptの証明書。
サーバー契約者なら無料・無制限で取得出来るので、割り振っているドメイン全てをSSLに対応させることが可能。




■カゴヤ・ジャパン

証明書 Rapid SSL
価格 年9180円(上位プラン契約で無料)

詳細:カゴヤジャパンSSLサーバー証明書 https://www.kagoya.jp/ssl/

契約をしていれば、1つだけ無料で使える。




色々見てきましたが、現状アルファSSLとLet’s Encryptの2択です。Googleの検索順位も荘ですが、アプリとサーバー間の通信もSSL必須とされてきているので、今後需要はますます高まるのは間違いないでしょう。
各サーバー会社の格安独自SSLは、今春あたりから急速に広まってきたものなので現在様子見ですが、問題なければ積極的に導入していきたいサービスです。


Contact Form 7でアンケートフォームを設置

仕事でアンケートフォームを付けることになりそうなので、Contact Form 7での設置方法を整理して文章にしてみました。アンケートとしては小規模なものを想定しています。(回答数100未満くらい)

使ったプラグイン


Contact Form7
執筆時version4.5

導入方法は割愛します。ダッシュボード→プラグインからさくっと入れてください。
日本語対応しているので安心です。

cf701

フォームの設置(基本)


はじめて使う人は、基本となる問合せフォームを設置してみましょう。
ダッシュボードの左メニューお問い合わせからコンタクトフォームを選びます。
コンタクトフォーム 1としてサンプルが初めから入っています。cf702 貼り付け用の固定ページを用意しておきます。(記事でも構いません。)
本文にショートコードを貼ります。cf703 完了です!簡単です。cf704
実際にフォームに入力して送信すると、WordPressの管理者宛にメールが届きます。

アンケートフォームを作る


色々項目を増やしてアンケートフォームを作っていきます。
新規追加でフォーム追加画面を出します。↓最初の状態。
cf705 最初から基本的な部品は入っていますので、これを参考に付け足していきます。
今回はサンプルとして以下のようなアンケートを組み立ててみます。
フォーム下のボタンを押すとダイアログがでますので、必要項目をいれて挿入ボタンを押します。
今回は4つの質問を作ります。以下に記入例を挙げますので参考にしてください。

Q1 WordPressをセットアップしたことがある。
ある ない
→ラジオボタンcf711
Q2 どこにセットアップしましたか?
レンタルサーバー ローカルPC 専用サーバー ローカルサーバー
→チェックボックスcf712
Q3 現在WordPressサイトの管理をされていますか?
している いない
→ラジオボタンcf713
Q4 最もプラグインの多いサイトで何個入ってますか?
0~10 11~20 21~30 30個以上
→ドロップダウンメニューcf714
個人情報
・名前・メール・メッセージ
→デフォルトのまま

例と同じように<label>

個人情報部分は、標準の物をそのまま流用します。アンケートとしては不要なので題名を消しました。必須項目もそのままです。アスタリスクの有無で判別されます。
この段階で保存して固定ページにショートコードを貼り付け、見てみましょう。

cf706
もっともらしい、アンケートフォームができているはずです。
しかし、このままでは新規で追加した項目のデータを受け取ることができません。
受け取るための設定を追加してやります。

受信メールの設定


メールのタブを開いて受信メールの内容を書いていきます。受け取りに使いたいメールアドレスもこちらで設定します。
cf707
題名は消したので、[your-subject]は消します。
そして本文に追加したフォームのメールタグを追加して行きます。
追加出来るタグは上部に表示されているので、見ながら書き込みます。↓例です。
cf709
書いたら忘れずに保存を。

これで設定完了です。
回答者にもメールを送るには、メール(2)にチェックを付けて、同じように本文を書いていきます。回答や個人情報の控え、簡単なお礼、運営の署名などを記載しておくとよいでしょう。

表示メッセージの設定


Contactform7の仕様上、フォームの送信時に確認画面は出ません。
代わりに任意の送信完了のメッセージを出すことができます。
これはメッセージタブで設定します。
また、エラーの時の表示メッセージもこちらで設定可能です。
cf710
これでアンケートフォームは完成です。
実際の運用には、個人情報の取扱いなどもしっかり記載した方がよいでしょう。
より作り込むなら
・メールをWordPressのDBで管理する
・送信前に確認画面を出す。
などを別のプラグインを追加することで対応できます。

また、もっと大規模にアンケートを採るなら、
集計機能のあるアンケート専用のプラグインを使うとよいでしょう。
予算に都合が付くならSSLにも対応したいですね。

※以下に動作サンプルを設置しました。よろしければご回答ください。

続きを読む Contact Form 7でアンケートフォームを設置


IFTTT使って自動でGoogleスプレッドシートに記録していく

blog160809

Googleスプレッドシートを使ってますか?
仕事していると必須なExcelですが、職種によってはあのセルが並んでいる画面を見るのも嫌だっていう人がいるのも事実。
使ってみると、それはそれで便利なものですよ。
そんなExcelをブラウザ上で使うことができるGoolgeスプレッドシートを上手に活用すると、作業の効率アップに繋がるかもしれません。

例えばブログメディアを運用していると、記事のリストを作りたいときってないですか?
上司に急に言われて月間の更新数を出したり、Google Analyticsのレポートを作るときに記事の情報が必要だったり。
必要になってから慌てて作るよりも、ブログを更新したら自動的に記録できたら楽ですよね。
そんなときのIFTTTです。

IFTTTの説明はこちらでご紹介しています。
IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

ブログの更新記録を作る。


IFTTTのアカウントやチャンネルの登録は済んでいる前提でお話しします。

手順


チャンネルの登録は全部で7Stepあります。
全部英語の画面ですし、ちょっと多い気がするかもしれませんが、そんなに難しくないのでチャレンジしてみてください。

Step0:トリガー


160809_01

「this」をクリックします。

Step1:チャンネルを選択する


160809_02

トリガーとなるチャンネルを選択します。
今回は記事リストを作りたいので「RSS」を選択しました。チャンネルとなるサービスがたくさんあるので、検索ボックスを使って探すと早いです。

Step2:何をトリガーにするか


160809_03

Step2ではStep1で選択したチャンネルで何が起きたらトリガーになるかを選択します。
チャンネル「RSS」では、「New feed item」「New feed item matches」の2種類を選ぶことができます。今回は「New feed item」を選択しました。

Step3:アクション


160809_04

「that」をクリックします。

Step4:チャンネルを選択する


160809_05

アクションさせるチャンネルを選択します。
Googleスプレッドシートを使いたいので、「Goolge Drive」を選択。

Step5:どんなアクションをするか


160809_07

Step4で選択したチャンネルで何が起きたらトリガーになるかを選択します。
Googleスプレッドシートに行を追加して行くので「Add row to spreadsheet」を選びます。

Step6:何をするのかを選択する


160809_08

Step6で選択したアクションの具体的な中身を決めて行きます。
内容は選んだチャンネルによって変わってきます。

この例では入力できる項目が3つあります。
「Spreadsheet name」はスプレッドシートの名前、「Formatted row」には記録する項目、「Drive folder path」はスプレッドシートまでのパス(フォルダー構成)です。
準備できたら「Create Action」をクリック。

Step7:確認・登録


最後に確認画面です。
ここでこのレシピのタイトルを変更することもできます。
OKだったら「Create Recipe」をクリック。
これでこのレシピがマイチャンネルに登録されました。

手順は多そうに見えますが、ポチポチクリックしていくだけなのであっという間です。

完成イメージ ※画像はイメージです
160809_10

これでブログを更新すると自動的にGoogleスプレッドシートに行が追加されていきます。
日付でソートしていったりエクセルと同じように使えるので、リスト管理が一気に楽になりました。

実はバックアップの代わりにもできる?


これのおもしろいところは、WordPressのRSSをトリガーにしていたりすると、本文がHTMLの文字列で保存されるというとこですね。
なので、簡易的なバックアップのかわりにもできます。
もちろんDBのバックアップや画像ファイルなどはダウンロードできていませんが、あくまで簡易的に。
記事データだけ加工して使いたいとか言う時は便利かもしれません。

方法はStep6で記録するデータの中に「EntryContent」を含めればOKです。
入力エリアをクリックしてアクティブにすると、ボックスの右上に青いフラスコのアイコンが表示されるのでクリック。

160809_08_01

セレクトボックスが表示されるので、使いたい項目をクリックすればOKです。

160809_08_02

他のトリガーでもいろいろできる


今回はトリガーをRSSにしましたが、他のトリガー使ってGoogleスプレッドシートにリストを作っていくことができます。
ここからはアイディア次第です。
TwitterをトリガーにLikeしたツイートだけのリストを作るとか、Feedlyで後で読むにしたものをリストにしておくとかできそうです。

何でもかんでもGoogleスプレッドシートでリスト化するのがいいとは思いませんが、やっぱりリストって何かとあると便利ですし、それを自動でやれるならそちらの方がずっと楽でいいと思います。
リストを作るのって時間を取られたりするし、だったらその時間を別な何かに回すことができますから。

以前にGoogleフォームの結果をGoogleスプレッドシートに記録するっていう記事も書きました。よろしければこちらもどうぞ。
Googleスプレッドシートと連携!Googleフォームを使ってみた。


【Gmailのメールをチャットワークにも投稿!】Zapierを使ってみた

1707zapier
 

社内で使用している連絡ツール、チャットワーク。日本語でのUIが使いやすくて、ちょっとした記録なんかにも活用している今日この頃です。
出社するとまず立ち上げてチェックするツールでもあるのですが、受信した内容が、チャットワークにも投稿される「メール確認ツール」としても使えないだろうかと、ふと思ったのです。
特にGmailでは複数アカウントがあるため、それを都度確認していくのはちょっと面倒…。
たまに来る、でも目は通しておきたいメルマガなんかのチェックができたらいいなと思ったのが始まりでした。

チャットワークとGmail。違うサービスの連携ができるハブツールとして、真っ先に思いついたのがIFTTT。いろいろなサービスを対象としているこのIFTTTですが、残念ながらチャットワークはサポート外。
ほかにチャットワークが使えるハブツールはないかと、探してみたらありました!
その名もZapier

今回は、そのZapierというWebサービスについてご紹介したいと思います。

Zapierって?


以前ブログでもご紹介しているIFTTTmyThingsのように、異なるWebサービスなどを連携させることができるツールです。
何かが起こったとき(トリガー)に何かが起こる(アクション)。このサービスの組み合せを「ZAP」といい、無料プランでは5つまで作成することができます。
対象アプリはなんと500以上!もちろんチャットワークも入っています。

ZapierでGmailとチャットワークをつなげよう


ということで、さっそくZapierでZAPを作ってみました。
今回はGmailで特定のラベルがついたメールがくると、チャットワークのグループチャットにメールの内容が投稿されるという、ZAPを作成してみます。

01 チャットワークでの準備


まずZapierでチャットワークを使用するには、ChatWork APIが必要なのですが、それを発行してもらうのにチャットワークへの事前申請が必要です。

チャットワークにログインした状態でChatWork API申請ページへアクセスし、発行を申し込みます。
※ビジネスプラン、又はKDDI ChatWorkでのご利用の方は、管理者経由でのみ申請が可能です。
※申請からAPIの発行に3~5営業日かかるそうです。

発行完了のメールがきたら、チャットワークの「動作設定」で「API発行」というタブが新たに表示されるので、チャットワークのpassを入力し、APIを確認します。

20160713
 

20160712
Zapierでの操作でこのAPIが必要になりますので、コピーをしておきましょう。

02 Zapierに登録


Zapierからアカウントを登録します。
登録には名前・メールアドレス・パスワードが必要です。

20160700

03 ZAPを作成


ページ上部の「MAKE A ZAP!」をクリックし、トリガーとなるアプリ「Gmail」を選択します。

20160714
 

次に、Gmail上でトリガーにしたいできごとを選択します。
今回は「ラベルがついたメールを受信したとき」をトリガーにしたいので、「New Labeled Email」をチェックします。

20160702
 

「Connect New Account」をクリックし、対象となるメールアカウントを選択します。

20160703
 

対象のラベルを選択。

20160704
 

選んだラベル、トリガーの内容が正しいかの確認が表示されるので、問題なければ「Fetch & Continue」をクリックして次に進みましょう。

20160705
 

Gmail上に該当ラベルがあるかどうかがZapier上でチェックされ、問題なければ、これでトリガーのGmailの設定は完了です。「Continue」でさらに続けます。

20160706
 

次にアクションとなるチャットワークを選択します。

Edit Step Zapier27
 

 

チャットワーク上でアクションにしたいできごとを選択します。
今回は「グループチャットにメッセージを投稿」をアクションにしたいので、「Send Message」をチェックします。

20160707
 

「Connect New Account」をクリックし、次の表示画面でコピーしておいたチャットワークのAPIを入力し、アカウントを設定します。

20160701
 

投稿するグループチャットと、投稿するメッセージの内容を設定。
投稿内容は独自タグを使用して「メールタイトル」「送信先アドレス」なども選べますが、今回は「タイトル(Subject)」と「内容(Raw Payload Body Data)」を選択しました。

20160709
 

設定した内容で、実際にチャットワークへのテスト投稿が行われます。

20160716
 

テストに問題がなければ下記の画面が表示され、「Finish」をクリックするとZAPの完成!名前をつけて、保存しましょう。

20160710
 

もし変更がある場合は、サイドメニューから変更箇所を選択し、再度設定します。

20160717

終わりに


今回はチャットワークと連携できるという点に着目しましたが、他にもZapierでできることはたくさんあるようです。
ZAPのエラーチェックや、2つ以上のサービスをつなげられるマルチステップ(有料プランのみ)、複数のアカウントの切り替えなどなど…
無料プラン内では制限がありますが、シンプルに2つのサービスをつなげるIFTTTなどのハブツールと、良い具合に使い分けができたらと思っています。

参考にさせていただいたサイト



独自ドメインのサイトを広告無し100円以下で立ち上げてみる【2】無料サーバーにサイトを設置編


~前回までのあらすじ~

  • 格安で独自ドメインのサイトを立ち上げてみるとしてスタート。
  • ドメインはお名前.comで格安のxyzドメインを32円で取得。niigata360.xyz
  • サーバーは比較的品質の高そうなxdomainを選択。
  • ドメイン取得後、ネームサーバーの設定を済ませて反映されるのを待つ。
    ここまでやりました。

今回は、実際にHTMLコンテンツをアップし、サイトを公開してみます。


■サイトを設置
テストサイトをHTMLで用意します。内容は特にありませんが、仕掛けとしてスライドショーと、google mapsのiframeによる埋込みくらいは盛り込んでおきます。


今回設置するxdomainの無料サーバーは広告はつきませんが、下記の制限があります。

  • 1ファイルあたり3MB
  • DB無し(別サーバー・広告あり)
  • PHP不可
  • CGI不可
  • 他社で取得したドメインのメール設定は不可
    このあたりの制限が大きな制約になりそうです。こうやって書くと何もできなさそうですが、逆に
  • 独自ドメイン10個OK
  • 容量1GB
  • FTPが使える。(ファイルマネージャーも別途用意されている。)
    と言うように、保存容量が比較的大きかったり、無料でもマルチドメインで設定していけることは大きなメリットです。個人的にはFTPでアップできるのも管理が楽で便利です。

※xdomainの無料サーバーは広告を受け容れることでPHPやMySQLが使えたりWordPressの設置も可能なサーバーも使えます。WordPressでの広告はスマートフォンやタブレットなどモバイル環境のみでの表示と、結構控えめですね。ひとまず今回は広告無しにこだわってみたいと思いますので、WordPressはあきらめ上記制約内で作ってみます。

ということで、シンプルな構成のWEBサイトを用意します。
あとはUPするだけです。FTPの設定だけ載せておきます。図はFileZillaです。
・ホスト ・ユーザー ・パスワード をいれてログオンの種類を通常にしておけば繋がります。
WEBベースのファイルマネージャーも用意されているので、そちらからUPしてもいいでしょう。接続先が直で公開用のルートフォルダになりますので、そのままHTMLファイルをアップすればOKです。


blog_free02

では実際にファイルをアップします。


■実例 テストサイト→http://www.niigata360.xyz/サンプルサイト


 ■結果
ブラウザが対応していればスライドショーなどのコンテンツの表示も特に問題ありません。やはり有料のレンタルサーバーに比べると画像の表示などにもたつきが見られます。値段相応と言った所です。(無料ですが)


■余談
実はここまでは、順調に用意できたのですが、google chromeでは表示できず「無効なURLです。」との表示が続いていました。FirefoxやIE、Edge、さらにMacのsafariでも正しく表示されます。chromeだけドメインの名前解決ができてない印象でした。原因がわからず難儀したのですが、結局は、chromeのDNSキャッシュが原因だったようで、クリアすると表示できるようになりました。chromeのDNSキャッシュクリアは設定からはできないので、アドレスに「chrome://net-internals/#dns」を入れて設定画面を出し、そこから消してください。

blog_free04


■感想
過去に、無料WEBサイト制作サービスが流行って廃れた時期がありましたが、ここに来てふたたび盛り返してきている感があります。無料サーバーも思ったより使えそうですし、選択肢もいくつかあり、組み合わせ次第でランニングコストを極力かけずにWEBサイトを構築できます。テストサイトの構築や個人の学習には十分かと思います。しかし実際に使ってみて無料サーバーと格安であっても有料サーバーには大きな隔たりを感じました。コストに問題なければ、個人のテストであっても有料サーバーを借りた方が面倒が少ないかと思います。(目的によります。)特にドメイン関連の設定に自信の無い方は、ドメインとサーバーは同じ会社から借りましょう。別々の会社から借りた場合、今回のようにトラブルがあると、原因の切り分けと追求に難儀します。



■注意点
ドメインは今回安く取得できましたが、2年目以降は普通に通常料金が掛かります。安くて飛びつくと、維持費が高く付くドメインもありますので、長く使う予定でしたら、一般的な

.comや.net、.jpなどを取得しましょう。今回30円で取得したxyzは2年目以降は1480円です。

また、無料サービスはいつ停止しても文句が言えません。そのあたりのリスクをよく考えてご利用ください。







もう少し続きます。

-PR-
お名前.com



Xdomain



Macawでデザイン→即HTML化

どうも、Kazです。

この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか?」と思ってしまうくらいのアプリでしたので紹介したいと思います。

そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
macaw_1607_00


 

記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。


続きを読む Macawでデザイン→即HTML化


独自ドメインのサイトを広告無し100円以下で立ち上げてみる【1】ドメインとサーバー編

最近、各種無料ウェブサイト制作サービスについて調べています。
近々、弊社のサービスの一部として取り入れる予定もあります。

その一環で現在「独自ドメイン」のウェブサイトを立ち上げるのに最低いくら掛かるのか、
調べて、最安プランを実行してみました。一応「広告無し」で考えます。
(注:人件費は考慮しておりません。)

■必要な物
ウェブサイトを立ち上げるには、サイトのHTMLデータの他に、
・ドメイン
・サーバー
が少なくとも必要です。通常はどちらも有料です。

■ドメイン
まずはドメインです。ウェブサイトのアドレスですね。
ドメインはサーバーを契約すると無料で1つもらえたりする所も多々あります。
(この場合サーバー代がそこそこ必要です。)
今回の実験にあたり、お名前.comの格安ドメインを取得してみました。
お名前.comはマイナーなドメインのセールをよくやっています。
今回は実験用のにxyzドメインを取得してみました。税込32円!安い!
予算100円でしたので、大幅な節約となりました♪
クレジットカードかデビットカードがあればさくっと取得出来ます。

と言うわけで取得してみました。niigata360.xyzです。
お名前.comでの取得画面

■レンタルサーバー
次にサーバーです。ウェブサイトを置く場所ですね。
今回はxdomainの無料レンタルサーバーを使ってみます。なんと無料にもかかわらず広告がありません。
おそらく有料サーバーやドメイン契約への宣伝目的の為のサービスかと思います。
個人的にxserverはレンタルサーバーの中でもかなり信頼しているサービスなので、
xdomainにも期待大です。

■ドメインの設定
ひとまず先に取得したドメインを使えるように設定します。
お名前.comのドメイン設定でネームサーバーをxdomain指定のものにしておきます。
ネームサーバー設定

次にxdomain側で他社ドメインの登録作業を行います。
今回はwhois認証を選びました。ちなみにドメインは10個登録出来るようです。
ドメイン設定追加

設定後、数時間でネームサーバーの情報が行き渡り、FTPでのアクセスも可能になります。
xdomainでは数時間から2日と書いてあります。
これを書いている現在、数時間たってますが、いっこうにアクセスできません。
もしかして、これは2日コースか。
続きは使えるようになってから書きます。ひとまず初回はここまで。

続きます。

-PR-
お名前.com



Xdomain