Goro'z Journal: Web

ラベル Web の投稿を表示しています。すべての投稿を表示

HTTPSとは（調査偏）

HTTPSって漠然と使用しているけど、具体的に何なんだろう？ってことで調査してみる。

HTTP通信が平文メッセージを通信するのに対して、HTTPS通信では暗号化したメッセージを通信する。暗号化するには、サーバー証明書とクライアント証明書が必要。

HTTP通信と比較して通信をよりセキュアに、ブラウザ表示がより高速になる。
証明書を使用して通信内容を暗号化することでセキュアな通信に出来ることは分かった。しかし、なんで高速になるのだろうか。ここは追加で調査が必要だ。

2016年～2017年にかけて、HTTPSのシェアが過半数を超えた。
2019年ではどのくらいのシェアなんだろうか。ここも追加で調査が必要だ。

Mozilla Thunderbird のバックアップ（ブラック企業対策）

Mozilla Thunderbird のバックアップ方法をご紹介します。

%APPDATA%\Thunderbird\Profiles

にアクセスして、***.default を保存。これだけ。

復元するときには、同じフォルダ場所に ***.default を置くだけ。

一応、以前の会社のバックアップを取っておきました。色々と課題のある会社だったので、トラブル回避のため、、、

休日でも構わず毎日何通も来るメール、返信しないと掛かってくる電話、その電話に出ないと週明けに叱責されて評価に影響が出る。

あの頃は大変だったなぁ。。

Apache Kafkaって何なの？

Twitterを眺めていたら、Javaの公式アカウントがApache Kafkaがなんたらとツイートしていました。なんだろうかと思って、ググってみると何やら面白そう。

なんでも、大量のメッセージを高速に処理できる。Pull型を採用している（ユーザーがサーバーにデータを取りに来る）。ストリーミング配信ができる。メジャーなプログラミング言語は対応している。Twitter、LinkeIn、Netflixで採用されている。そして、無料！

Apache Kafkaを使えば自分でこれらのサービスを作るのも夢ではないということでしょうか。これは夢のあるサービスですね、どのようなアーキテクチャになっているのでしょうか。

公式サイトに詳しく記載がありますね。
https://kafka.apache.org/

オール英語なので読むのに時間がかかりそうです。少しだけ見てみると、4つのコアAPI（Producer API、Consumer API、Streams API、Connector API）があるようです。そしてメッセージのやりとりは見えませんが、可視化するサービスなんかもあるようです。私はメッセージを処理してくれるアーキテクチャを使ったことがないのですが、どのような設計になるのでしょうか。とても気になるので、引き続き公式サイトを読んでいこうと思います。

AWSでも使用できるようです。
https://aws.amazon.com/jp/kafka/

しかし、推奨しているのは他のアーキテクチャのようですね。Amazon Kinesisという、AWS製のkafka改良版とでもいうアーキテクチャでしょうか。

JavaでAuto Tweet Program作成計画　Twitter4Jを使う

JavaでAuto Tweet Programを作成しようと思っています。

なぜなのか

自動でツイートするのは面白いし、何より自動化の作業経験は未来につながると感じたからです。自動化するにあたってTwitterAPI「Twitter4J」を使用することにしました。ただ、このAPIは機械学習や文章を作成する機能はありませんので、その部分は私自身が作成するか、他のAPIを導入する等の作業が必要になります。

現段階で出来ること

ということで、JavaでAuto Tweet Programを作成の第一段階としてTwitterAPI「Twitter4J」を把握していくことにします。さっそく昨日少しだけ触ってみましたが、非常に使いやすいAPIになっています。とりあえずは現段階で、次のことが出来ました。

HOME TLの読み込み
自分が書いた文章の書き込み

このような状況なので、まだまだ使えるようなプログラムは組めていませんが感覚としては良いプログラムが組めると感じています。なぜならドキュメントが揃っており、ユーザーも多いためです。サーベイすることで試行錯誤の回数を大分減らし、素早くプログラムを組むことができると思います。

今日の計画

計画としては、今日は次のことが出来るようにしたいです。

自分のつぶやきの読み込み
定刻になったら任意の文章を書き込むボット作成

ここで考える必要があるのは、一日にどのくらいツイートするか。また、その内容をどうするか。同じ内容を続けてツイートすることは出来ない使用なので、ここは何かしら自分でプログラムを組む必要があります。今日はTwitter4Jの把握に注力するため、他APIを使用して文章を作成することについてはやらない方針にしました。

さらに努力目標として、自分のつぶやきの読み込んだものを加工して、ブログ記事のネタあるいはアウトラインにするところまで出来たら良いかと思います。ここは少し構成を考える必要があるので今日中に出来るかは不明です。

以上、「JavaでAuto Tweet Program作成計画」でした。

転職してSEからITコンサルタントになりました

前回の記事でサーバー側の記事を書きましたが、サーバー側の記事を書いたのは久しぶりでした。記事を書くの自体が久しぶりだったので、サーバー側の記事を書いたのはかなり久しぶりですね。

転職活動が無事に完了

というのも、色々と思うところや体調面での不安もあって転職活動をしていたんですね。無事に転職がうまくいって一息付けたので勉強して、こうして記事を書くことが出来ました。以前の職場ではフロントエンド中心だったのですが、今回の職場ではサーバーサイドもインフラも担当する予定です。

転職先の職場ではITコンサルタントとして、システム化計画を担当することになりました。以前の職場でもそんな感じのことをしていたので、やること自体はそれほど変わらないのですが技術領域と待遇がすごく変わりました。（給料が爆上げ）

以前の職場ではフロントエンド中心で、今回はサーバーサイドもインフラも担当すると言っていてやることが変わらないとはどういうことかと思うかもしれませんが、システムの規模が違うと「システム化計画」でもやることが全然違うんですね。これは企業によるのかもしれませんが。

システム規模による違い

システムの規模が小さいと「フロントエンド設計≒システム化計画」なんですね。サーバーサイドやインフラはLAMP環境で良しとして、フロントエンドの要件を詰めることがシステム化計画になります。

一方、システムの規模が大きいとそうもいかなくてサーバーサイドやインフラの要件もきちっと詰めていきます。新卒で入社した企業は大規模システム開発をしていて、私はそこでサーバーサイドやインフラの開発もしていたのですが、しばらく離れてしまっている間に大分状況が変わってきているようですね。最近はクラウドも一般化してきましたから、きちんと導入できるように勉強しています。

今後の楽しみ

ということで、今後はクラウドなどの記事も書いていきたいなと考えています。クラウドが今後さらに広まると、システムもデータも人も遠いところにあるのが普通になってリモートワークも広まるんじゃないかななんて考えてわくわくしています。

以上、「転職してSEからITコンサルタントになりました」でした。

Tomcat/Servletの記述をアノテーションで簡易化する方法

Servletへのアクセスがとっても簡単になりました。久しぶりにTomcatやServletを触ったら結構仕様が変わってましたので、私が観測した範囲でまとめておきます。

今回の記事は、先日書いた次の記事の更新版です。もちろん先日の次の記事の設定方法もまだ健在ですよ。今回の記事で紹介するほうが非常に簡単という話です。
「HTMLヘッダ」や「web.xmlのタグ」の解説。オマジナイのようだけどそれだけではありません。

アノテーション

Servlet 2.0からサーブレットにアノテーションを使用することでweb.xmlの編集が不要になりました。web.xmlはアドレスとディレクトリのマッピングを記述していたファイルです。具体的には、Servletのクラスの前行にこのようにアノテーションを記述すればアクセスすることが出来るようになります。

@WebServlet("/SampleServlet")
public class SampleServlet extends HttpServlet {

アクセス方法

具体的なアクセス方法をご紹介します。上記のServletクラスにアクセスするにはアノテーションに記述したクラス名にアクセスすれば良いのです。ここではSampleServletクラスですね。例えばjavascriptのajaxでアクセスするならこのように記述します。

$.ajax({
url:'./SampleServlet',
type:'POST',
data:{ message:sendMessage },
error:function() {
alert("ロード失敗");
},
success:function(xml) { alert("ロード失敗"); }
});

これでPOSTでメッセージなりのデータを送信することが出来ます。以前の記述方法から見違えるほど簡単になりましたね。視認性が抜群によくなりました。

もう少し具体的に言うと、上記のようにajaxを書くと、ServletクラスのdoPostメソッドに指定したデータを送信することが出来ます。doPostメソッドは送られてきたデータを第一引数で取得し、第二引数を使用して送り返すことが出来ます。doPostメソッドから第二引数を使用して送り返されたデータはajaxのsuccess:function(xml)に入ります。これでjavascript(ajax)とjava(Servlet)を行って帰っての通信をすることが出来ました。簡単でしたね。

このようにアノテーションを使用することでweb.xmlというファイルを変更しなくて良くなりました。

以上、「Tomcat/Servletの記述をアノテーションで簡易化する方法」でした。

eclipse pleiades 解凍の仕方。Windows10

eclipse pleiades の解凍にちょっとしたノウハウが必要だったのでご紹介します。今回の環境は Windows10 で Pleiades All in One 4.6 を解凍しました。eclipse のバージョンとしては NEON が対応します。

ダウンロードと解凍

まずは公式サイトから pleiades をダウンロードします。ダウンロード場所は任意です。

最初はこのままダブルクリックして解凍を試みました。しかし解凍できない。解凍中にエラーが出て正常に解凍できないのです。どうやら、私が普段使用しているフリーソフトLhaplusでは解凍に失敗するようです。

色々なサイトを調査してみると、pleiadesのサイトにそれらしい記載がありました。Windows 上で zip を解凍するときの注意とあります。これによると、pleiadesはLhaplusでの解凍は不可とのことでした。そして、Windowsエクスプローラーでの解凍が推奨されていました。

解凍方法の指定

解凍方法の設定を変更するべく対象のzipを左クリックしてプロパティを確認。

続きまして「プログラム」の「変更」をクリックします。

「エクスプローラー」を選択して「OK」をクリックします。

この画面に戻りますので「OK」をクリックします。

無事にエクスプローラーアイコンに変更されました。ファイルの開く種類の変更は出来たということです。ここまではWindows10でも、それ以前のWindowsでも変わりないでしょう。

Windows10の場合

しかし、Windows10はここから少々変わっています。展開する際にエクスプローラーのタブから展開を行うのです。左クリックメニューからの展開は無くなりました。

「展開」タブを選択して「すべて展開」をクリックします。

展開場所の選択画面が表示されるので、展開場所を指定して「展開」をクリックします。

無事に解凍することが出来ました。

以上、eclipse pleiades 解凍の仕方でした。

java から HTML へのデータ受け渡しについて（詳細版）

以前、「java から HTML へのデータ受け渡しについて」の記事を書きました。
https://somegoro.blogspot.jp/2016/11/java-html.html
この記事ではざっくりした内容しか書かれていない所謂簡易版だったので、今回は内容をもう少し掘り下げた記事を書きます。

思えば上記の記事を書いたころはIT業界に久しぶりに戻ってきたときでした。プログラミングどころかエクセルの使い方もすっかり忘れていて、なんでもかんでもWebで調べていたことを思い出します。何をするにも時間がかかって、当時の現場の皆さんには迷惑をかけただろうなぁ。当時の私はまったく余裕が無かったので、強気な発言ばかりしていました。

さて、思い出すこともそれくらいにしておいて本題に入ります。
「java → HTML のデータ渡し」についてです。ここの部分のデータの渡し方は色々あるのですが、私が最も簡単だと思う方法を今日は記事に書きます。具体的にはjQueryを使います。

jQueryには、便利なデータ受け渡し処理が用意されています。代表的なのが次の３つです。
・$.get
・$.post
・$.ajax

$.get はGETでサーバにデータ送信する処理です。$.post も同じようにPOSTでサーバにデータ送信する処理。$.ajax は記述の仕方次第でGETでもPOSTでもサーバにデータ送信することが出来る処理です。私は便利なので、ほとんど $.ajax を使用しています。GETで送るかPOSTで送るかは、用途によって選択するのが一般的です。

サーバにデータを送信する処理は上記３つですが、サーバからのデータ取得はどのようにするのか。実はこれもサーバにデータを送信する上記３つの処理を使用します。どれでもいいのですが、やはり私は便利なことを理由に$.ajax を使用します。$.ajaxのブロックチェーンには、サーバからデータを取得することが出来る次の処理が用意されています。
・done(function(data) {...}
・success: function(data){...}

2つ書きましたが、どちらを使用してもサーバからのデータを取得することは出来ます。jQueryのバージョンによって推奨しているものがあるので、使用しているjQueryのバージョンを確認して推奨していう方を使用するのがいいでしょう。

引数にdataと書いていますがここの名称は任意でいいです。引数で指定した任意の名称のオブジェクトにデータが入っています。では、どのようなデータが入っているのでしょうか。それはサーバで出力したデータです。サーバ側のプログラムであるjavaでprintln で出力してやれば、上記に書いたdataに自動で取得されます。細かいことはみんなjQueryがやってくれるのですね、便利ですね。

それでは最後に通してで記載しておきます。
javascript
$.ajax({
type: "POST",
url: "/javaClassName",
success: function(data){
alert(data);
}
});

java
public class javaClassName {
...
...
...
System.out.println(678);
}

以上、java → HTML のデータ渡しの詳細でした。

CSS メモ　リストのインデント

リストのインデントはこうやってやるらしい。
これから試してみる。

li {
padding-left: 1em;
text-indent: -1em;
/*必要であれば以下も*/
list-style-position:inside;
}

よくあるダメコードは別の要素で見かけだけ揃えているもの。それではロボットは意味がわからないことでしょう。SEO的なことを考えるのならば、リストはリストとして作った方がいい。

もっと良さそうなコードを見つけた。
<ul style="list-style-position: outside">
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>

参照はここからでした。
http://yume.hacca.jp/koiki/list/indent.htm

ちなみに、Google検索で次のように探すとたくさん出てきますね。
・「CSSのliリストで2行目以降を一文字下げる」
・「html リスト複数行」etc...

CSS Tips 影を付ける

影を付ける

Web’Notes
CSSで影を付けるbox-shadowの使い方
http://webnonotes.com/css/box-shadow/

★CSS3リファレンス
box-shadow …… ボックスに影をつけるhttp://www.htmq.com/css3/box-shadow.shtml

リンクはaタグで書いた方が良さそう

ヨッセンス
[HTML] リンクタグ（aタグ）って何?基本から応用まで紹介!
http://yossense.com/link-tag/

ボタンリンクの場合はボタンを透過させると良いようです。

Black Flag
CSSで透明度／透過度（opacity）の指定をする方法
http://black-flag.net/css/20110513-3045.html

loadingを表示する

難易度が高いがCSSでアニメーションを作成できます。
HTML5でサイトを作ろう
画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう
http://www.html5-memo.com/webtips/css3-loading/

cssでなくgif画像を使用すると割合簡単にできます。商用でも無料で使用できるgif画像は、次のサイトにあります。
Preloaders world
http://preloaders.net/en/free

無料で商用ダウンロード可能かどうかわかりやすいです。
GIF画像検索サイト
ローディングGIF画像作り方&商用ダウンロード&JQUERY実装記事まとめ
http://gif89a.net/gif-loading/

コーディングの方法がわかりやすいです。
森のコーディング
画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript
http://mori-coding.blog.jp/archives/6760786.html

リファレンス系

W3C公式サイト
W3C html5 reference
https://dev.w3.org/html5/html-author/

リファレンスのような内容がたくさん載っているサイト
w3schools.com
http://www.w3schools.com/

HTML5 Tag Reference
https://reference.hyper-text.org/html5/

自動生成系

テーブルのコード生成をしてくれるサイト。行や列の数字を入力することで、リアルタイム更新の図を完成テーブルを表示しながらコード生成してくれる。
TAG index
テーブルタグ作成ツール
http://www.tagindex.com/tool/table.html

フォント系

フォントが好きなサイト
WPC
http://web-pc.net/price

java(サーバーサイド処理) → HTML(画面側処理) のデータ渡し

java(サーバーサイド処理) → HTML(画面側処理) のデータ渡しについて、

結構前から調べてたのですが、やっと検討が付きました。というか思い出しました。
サーバー側で取得したり加工した「データ」を、どうやって画面側の処理に渡すのだろうかと考えていたのです。

javaの本では大体printでHTMLを出力しているようでしたが、実務を考えるとどうも現実的でないと思っていました。かと言って本には他の方法は見当たらない。

HTMLの本では form でjava側にデータを送ることについてはよく書いてあるのですが、逆方向の java → HTML へのデータ渡しについて書いてある書籍は見つかりませんでした。

javascriptも上記の二つ同様にサーバーサイド処理 → 画面側処理にデータを受け渡す方法は見つかりませんでした。

そこで、WireSharkなどでHTMLとjavaでどのようなデータを処理しているのかを見たり、HttpRequestやHttpResponseなどの仕様を調べてみました。そして辿りついたのが次の方法です。

次の情報を見ていくと詳細がわかります。
jsonデータを受け渡しに使うのですね、他の方法もあるのでしょうが、一つでもわかれば大分道が開けますね。

jQueryからサーブレットを呼び出してデータ取得、、、パラメータも渡してみたんだが。
http://ojorojoro.hateblo.jp/entry/2014/07/03/200931

JSON形式のWeb APIにアクセスするには？
http://www.buildinsider.net/web/jqueryref/034

ajaxでjavascriptとjavaの連携をする
http://pgori.hateblo.jp/entry/2013/05/24/111855

http://pussade8.hatenablog.jp/entry/2015/07/05/220612
(javascript)jQueryのajaxを利用してサーブレットからJSONを受け取る

これらはGoogle検索で「jquery java」とキーワード指定して検索すると出てきます。他にもたくさんのわかりやすい情報があるかと思いますので、気になる方は検索してみると良いかと思います。

bloggerのカスタマイズ方法　すごい方の記事まとめ

先日、bloggerのカスタマイズについてまとまっている記事がないから書きますねと言いました。

bloggerテンプレート『Vaster2』の導入方法

https://somegoro.blogspot.jp/2016/08/bloggervaster2.html

しかし、記事がありました。しかも凄く綺麗にまとめられています。それが、こちらです。

bloggerのテンプレートをカスタマイズする方法

http://toumaswitch.com/blogger-temple-download/

さすがテンプレート自作するくらいあってbloggerに精通している様子が伺えます。見やすいですね。このお方はbloggerのカスタマイズ方法についても記事にしてくれているので、これらの記事を見て私は勉強していこうと思います。

上記の他のカスタマイズ記事は次の３つのようです。

bloggerのカスタマイズに必須な条件分岐タグifのまとめ

http://toumaswitch.com/blogger-ifcond/

[完全版]bloggerのsection、widget、includableについてのまとめ

http://toumaswitch.com/includable-section/

bloggerの新しい独自タグが発表されたので紹介する

http://toumaswitch.com/blogger-add-expressions/

bloggerは独自のタグを採用しているようですね。それがとっつきにくくて利用者の伸びが今ひとつなのかもしれません。面白いおもちゃが増えたという気分で期限を決めずに気が向いたときに学んでいこうと思います。

コンテンツアドバイザーでWebフィルタリングをする方法

今回はWebフィルタリングについての話題です。

社内SEの業務の範疇になるかと思いますが、社内SEのみなさんはWeb上でフィルターをどのようにかけていますでしょうか。

IE限定ですが、閲覧出来るサイトを管理者が簡単にコントロールすることが出来ます。その設定方法をご紹介したいと思います。

会社ではOSをWindows。ブラウザをIE（インターネットエクスプローラ）。という環境で使用している方々が多いので、多くの方が使える情報かと思います。

閲覧可能サイトを制限しないと、次のような危険が考えられます。
・エロサイト見てウィルス感染
・2ch見てウィルス感染
・何かと趣味のページ見て時間浪費

このような自制を効かすのが難しい社員を社内SEは守らなければなりません。それが仕事の一つと言えるでしょう。さらに、このような行為に通信回線を圧迫されないようにしたい。そのために、この機能は簡単で便利に使えます。

その名も、コンテンツアドバイザーといいます。

設定方法の詳細はネット中にあります。ですので、ざっくりと説明するにとどめます。

１．「ツール」→「インターネットオプション」→「コンテンツ」タブを押下する。

２．「コンテンツアドバイザー」欄の「有効にする」ボタンを押下する。

３．「ユーザーアカウント制御」→「はい」を押下する。

４．「コンテンツアドバイザー」→「全般」タブを押下する。

５．「ユーザーオプション」欄の「規制されていないWebサイトを表示する」にチェックを付ける。

６．「OK」→「コンテンツアドバイザー」を閉じる。

７．「コンテンツアドバイザーが、有効になりました。」と表示される。

これでコンテンツアドバイザーが有効になった。

※規制されたWebページを閲覧しようとすると「コンテンツアドバイザーの設定により、このWebサイトを表示できません。」と表示される。

このコンテンツアドバイザーをAD（アクティブディレクトリ）なりでコントロールする。そうすることで会社内やシステム内でWebフィルタリングが出来るというわけです。

ちなみに、一般ユーザーでもADでコンテンツアドバイザーを設定することが出来ます。一般ユーザーに設定を変えられてしまっては管理者が大変ですね。

ですので、管理者しか設定できないように変更しておきましょう。ADでコンテンツアドバイザーを設定するには、インターネットオプションのコンテンツタブを使用します。ですので、そのコンテンツタブを表示してないようにしてしまえば良いのです。

以上。コンテンツアドバイザーでWebフィルタリングする方法についてでした。
いかがでしたでしょうか。これでいくらかのトラブルの種をなくすことが出来るかと思います。

「HTMLヘッダ」や「web.xmlのタグ」の解説。オマジナイのようだけどそれだけではありません。

今回の記事では「HTMLヘッダ」「web.xmlのタグ」の解説をします。それらは、オマジナイのように受け継がれているもの。しかし、それだけのものではありません。

きちんとした理由があれば開発も楽しくなることでしょう。それではさっそく始めます。

HTMLヘッダ

HTMLのヘッダというかスキーマというのか、一番最初に書く文ありますね。
それについて厳密に何なのか知らずに書いていたのです。まるでオマジナイのように。
ずっと気にはなっていたのですが中々きちんとした情報を得る機会がなくて。

今回、それ調査しました。それをかみ砕いてご紹介いたします。
これがわかればHTTP通信の基本的なことは理解できるのではないでしょうか。

みなさんHTML書くときの型として、こんな感じのものを書きますよね。

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link href="./style.css" rel="stylesheet" type="text/css">
<link rel="index" href="./index.html">
<title lang="ja">タイトル</title>
</head>
<body>
本文
</body>
</html>

これらは一体何なのか。それぞれについて解説していきます。最初に必須か任意かを書いておきます。

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
必須。文書の型を宣言している。

<html lang="ja" dir="ltr"></html>
任意。「国」と「左から右」に読むことを設定している。（left to rightですね）

<head></head>
任意。この中に色々と要素を詰めますよね。

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
必須。文字コードを記載する。

<link href="./style.css" rel="stylesheet" type="text/css">
<link rel="index" href="./index.html">
必須。文書間の関係を明示する。

<title lang="ja">フォーマット</title>
必須。タイトルを記載する。言語の登録があればなお良し。

<body></body>
任意。本文や表示したい画像などを記載する。

ということでタグの解説完了です。タグの意味がだいぶ見えてきたのではないでしょうか。

web.xmlについて

Apache TomcatでWebページ作るときにweb.xmlというファイルを作りますね。
これは厳密には何なのか知らない方も多いのではないでしょうか。その意味と使い方を知ることで便利な機能を使えるようになることでしょう。

web.xmlはざっくり言うと「Webアプリケーションの動作を定義する」ファイルです。
どんな動作かというと次のとおりです。
・サーブレット定義
・セッション定義
・認証設定
・ウェルカム・エラーページ設定
・などなど

では実際のファイルに記載されているタグを解説していきましょう。

<?xml><!DOCTYPE>
最初に記載されているの上記２つのタグではDTD宣言の設定しています。

<servlet>
servletタグでは、サーブレットクラスの名称を定義しています。使用するJavaクラスの名称に名前つけてるということですね。

<servlet-mapping>
先ほど名付けたサーブレットクラスの名称とURLをマッピングしています。

<security-constraint>
ここでは認証の設定をしています。

<login-config>
ここでは認証方式を設定しています。基本認証、ダイジェスト認証、など色々ありますね。

以上で基本的なweb.xmlのタグについての解説は完了です。いかがでしたでしょうか。web.xmlのタグはわりとたくさんあるので、随時追加していきたいと思います。そのときにはここにリンクをはりますので是非覗いていってください。

そういえば昔、サラリーマンやってたころにプロジェクト内でログイン画面が必要になったことがあったのです。で、リーダー的な活動をしていた人が「私が作る」とか言ってたのです。

私は協力したほうが良いのかなと思いつつも放っておきました。以前、その人に協力したら邪魔者扱いされたことがあったし物言いがキツイからです。

しかし、その後一向に連絡がなく１ヵ月は過ぎていたころにギブアップ連絡が第三者から入りました。結局納期に間に合わないのと仕様に明記されていないとの理由から、ログイン機能なしの方向になりました。しかし上記機能使えば簡単に出来そうですね。

bloggerで自分のアクセスを除外する方法

自分のブログや企業のホームページを始めたばかりあるいは改修したばかりのころは、自分含め改修者側のアクセスが多くなってアクセス解析できないかと思います。

そんなとき自分含め改修者側のアクセスだけ除外したいですよね。

今回はアクセスを除外する方法を４つ紹介します。

大別すると「Googleアナリティクスを使用している方」と「bloggerを使用している方」でそれぞれ異なった操作が必要ですので、それぞれに分けて説明します。

まずは「Googleアナリティクスを使用している方」について、３つの方法をご紹介します。

・ブラウザ拡張機能

ブラウザの拡張機能を使用する方法です。この方法は、ブラウザ側からGoogleアナリティクスに報告させない要求をすることでGoogleアナリティクスに自分のアクセスの形跡を残さないという方法です

・Googleアナリティクスフィルタ

Googleアナリティクスの機能で「フィルタ」があるので、それを使用する方法。これが最も直感的に分かりやすので企業などで活動されている方にはいいでしょう。なぜ企業で活動されている方かというと、固定IPでないと使用できないんですね。なので個人で使用している私にはダメでした。ご家庭で使用されているような大抵の方は使用することが出来ないことでしょう。

・コードを埋め込み

自分のサイトのページにコードを埋め込んでGoogleアナリティクスに認識させない方法。これはコードを修正する必要があったり少々複雑な作業が必要なのでWordPressなどレンタルサーバーをお使いの玄人志向の方がやるといいでしょう。認識させない正統派とでも言えましょうか。

それでは続きまして「bloggerを使用している方」について、１つの方法をご紹介します。

・bloggerで設定

上述の方法ではgoogleアナリティクスには適用されるんですが、googleアナリティクスを使用せずにbloggerでアクセス解析を行っている方には適用できない方法なんですね。ですからまた別の方法が必要になってきます。

さてbloggerでどのように自分のアクセスを除外するかと言いますと、bloggerの機能を使用して除外します。bloggerにすでにこの機能があるんですね、さすがGoogleです。やりたいことがわかってます。

それでは設定方法を記載します。

bloggerダッシュボードの「統計」→「概要」を押下してページを開いてください。

すると、画面右側中央に「自分のページビューの追跡を管理」というリンクがありますので、それを押下してください。次のページに遷移します。

この「ブログの自分のビューを追跡しない」にチェックを入れて完了です。
簡単でしたね。

それでは今日はこの辺で。

コンバージョン率とはなんでしょうか。

コンバージョン率とはなんでしょうか。

・コンバージョン率とは
Googleアナリティクスを見ていても、ブログの書き方系のノウハウを見ていても「コンバージョン率」という文字をよく見かけます。さて、この「コンバージョン率」とは一体なんでしょうか。

コンバージョン率とは「Webサイトの目標に達した数を、目標に達する最初の段階に入った数で割った割合のこと」だそうです。

抽象的で意味が分かりませんね。それでは具体的に見ていきましょう。

例１．
サイトで「商品を購入したユーザー数」を、「その商品の紹介ページを見たユーザー数」で割るとコンバージョン率となる。

例２．
サイトのバナー広告で「バナー広告がクリックされた回数」を、「バナー広告を表示した数」で割った値がコンバージョン率である。

少し分かってきましたね、実益になる割合を示しているんですね。このコンバージョン率が分かればアクセス数から大体の売り上げが予測できるようになるのでしょう。

アクセス数を上げる施策はインターネット上にたくさん記事がありますけども、このコンバージョン率を上げる施策は見たことがありませんね。施策などは無いのでしょうか、施策が無いならばこのようなコンバージョン率を計測する機能の意味がありませんので、コンバージョン率を上げる施策は存在するのでしょう。少なくともGoogleさんの見解では。

コンバージョン率を上げる施策は今後、理解が深まってから切り込んでいくとして、まずは「コンバージョン率」の「コンバージョン」って何でしょうかということを記載しようと思います。

・コンバージョンとは
コンバージョンとは、英語で「conversion」と書き、直訳すると「転換」という意味です。
これがWebの用語として使用されていて、Web業界で「コンバージョン」と言うと、「コスト」が「成果」に転換するという意味で使用されています。

いわゆるコストパフォーマンスですね。

先ほどご紹介した「コンバージョン率」はコストパフォーマンスの割合。この「コンバージョン」はコストパフォーマンスと考えると分かりやすいでしょうか。「コンバージョン率」「コンバージョン」が今回で理解が深まったかと思います。

それでは今日はこの辺で。

画像をロスレス圧縮してサイトスピード高速化　PageSpeed Insights

Googleアナリティクスをあてもなくカチカチしていると面白いものを見つけました。

サイトの表示速度を点数化して採点してくれる機能があるのです。さらに改善点などを教えてくれて指示に従って処理していけばサイトの表示速度向上に役立てることが出来ます。

この機能は「PageSpeed Insights」と呼ばれるようで、Googleアナリティクスの「サイトの速度についての提案」というページにあります。そこに行き着くには「行動」→「サイトの速度」→「サイトの速度の提案」→「PageSpeed の提案」の項目の「合計*個」を押下します。すると次のような画面が表示され、点数で自分のサイトを評価してくれます。

点数化されると高得点をとりたくなりますね、ということで高得点をとるべくGoogleアナリティクスが教えてくれた指示に取り組んでみました。取り組む点は多々あるようですが、今回は画像の圧縮についてのことを記載します。

画像にありますように「ロスレス圧縮」をしてくださいとのこと。「ロスレス圧縮」ってなんだろうと思い、少々調べてみましたが画像を綺麗なままサイズを圧縮することのようですね。そもそも圧縮とはサイズを小さくするだけにとどまらず、そのままの状態でサイズを小さくするという意味合いがあると思うので、頭にロスレスなんて付けなくても良いのではないかと思いますけどもね。

さて実際にロスレス圧縮してみましょう。ロスレス圧縮には色々な方法がありますが、今回は「TinyPNG」というサイトを使用しました。理由としては、「アプリケーションをダウンロードする必要がないこと」、「使いやすそうな画面」を上げます。

使用方法は簡単３ステップです。

１．「Drop your .png or .jpg files here」と書かれた点線ブロックに画像をドロップします。

２．するとダウンロード状況を示した棒がニョキニョキっと伸びるので、ダウンロードが完了したら右横の「download」リンクを押下しましょう。

３．これで完了です。ロスレス圧縮された画面が表示されますので、それを保存してください。

数個のファイルを圧縮してみましたが、元のサイズと比較して３０％～７０％程度圧縮されているようです。見た目もほとんど変化ありませんし、すごいですね。

このロスレス圧縮した画像をブログいアップロードしていた元の画像と差し替えて、「PageSpeed Insights」で高得点を目指しましょう。ひいては、見やすいサイトを作っていきましょう。

それでは今回の記事はこの辺で。

「SEO」とは何でしょうか。そもそも読み方は？

本日は「SEO」について解説します。

という私も知ったのはつい先日、ブログを開始してからのことです。最初、この読み方すらわかりませんよね、何かの略称だとはわかりますけど。

そうなんです。これは略称で本当の名称は「Search Engine Optimization」といって、読み方はサーチ・エンジン・オプティマイゼーションです。日本語訳は検索エンジン最適化です。

そして「SEO」はエスイーオーと読みます。

検索エンジンを最適化するということですね、検索エンジンとは検索サイトのことです。GoogleとかYahooとか。最適化とは検索を集められるようにしようということです。

では、なんで「SEO」が重要なのかというと、検索されないとアクセスを集めることが出来ません。アクセスされなければそのサイトは存在していないことと同じなんですね。人間でもわかっててもやらなければわかってないのと同じだなんて言われますがまさにそういうことです。

どんなに価値のある情報や面白い内容を記載しても、アクセスされなければ読まれることはありませんので、まずこの「SEO」対策をする必要があります。本当の勝負、いわゆる内容の価値を見定められるのは「SEO」対策をした後なんですね。

この「SEO」対策ですが、有名人やテレビCMなどの露出がなければまず個別に検索してくれることはないでしょうから、社会のみなさんが検索しそうなことをキーワードとして載せておく必要があります。検索することというと、何かしら困っていることや実現したいことで情報を収集しているとくですね。

ですから、題名には「今日取得した情報」などでなく「SEO対策の重要キーワード」などの具体的に検索されそうな言葉を入れておく必要があります。

そして自分のサイトが何というキーワードの検索で検索されたのかという情報はGoogleアナリティクスで解析できますから、「SEO」対策のひとつとしてもGoogleアナリティクスは非常に有用なんですね。

私はこの「SEO」について、少々ですが学んでGoogleアナリティクスの有用性を感じるようになりました。Googleアナリティクスには「集客」の項目に「検索エンジン最適化」とあります。

今まではアクセス数を見て楽しんでいただけでしたが、これを活用していこうと思っています。と、意気込んだもののアクセス数が少なすぎて解析に十分でないんですね。もう少しの期間が必要なようです。

ではもう一つ、今回の記事で最後にご紹介する「SEO」対策は上述した期間ですね。長く存在していることも十分な「SEO」対策になるんですね。それでは、のんびりと気長に取り組んでいこうと思います。

今回の記事ではこの辺で。

「Google Search Console」導入しました

「Google Search Console」って使っていますか？

グーグルが提供している無料のツールなのですが、グーグルからどのようにサイトが見られているかを確認できるツールのようです。

私は本日このツールを使用開始しました。なので右も左もあやふやな状態ですが、設定の仕方をご紹介しようと思います。

今回の記事では「ツールへの登録」「サイトマップの登録」までを紹介しようと思います。

・ツールへの登録
まずはGoogleで「Google Search Console」と検索してみてください。一番上にヒットしたサイトにアクセスするとGoogleアカウントログインを求められる画面が出るかと思いますので、そこでお持ちのGoogleアカウントログインしてください。

すると「Google Search Console」のホーム画面が出ますので右上にある「プロパティを追加」ボタンを押下します。すると管理したいURLを入力する場所が出てきますのでそこへURLを入力して登録。

次に認証になりますが、方法がいくつかありまして、私はGoogleアナリティクスに登録していたのでGoogleアナリティクスで認証を行いました。まだ登録していない方は隣のタブの「別の方法」を押下して別の方法で認証を行うと良いと思います。

こうして認証登録をすると「＊＊＊＊（管理したいURL）の所有権が確認されました」と表示されるので、これでツールへの登録は完了です。

・サイトマップの登録
「サイトマップとはなんぞや」というと、Google側がサイトを見やすいように作成された地図のようなものですね。XMLファイルで作られているようです。

これがあるとGoogleさんは見逃しなく検索ヒットさせてくれるようです。
WordPressなど自作サイトではこのサイトマップも自分で作成しなければならないのですが、Googleが運営しているこのBloggerでは自動で作成されています。

＊＊＊＊（自分のBloggerサイトホームアドレス）/sitemap.xml

ここに作成されていますので、アクセスしてご確認のうえ、登録されるといいです。
登録場所は「ダッシュボード」　→　「クロール」　→　「サイトマップ」で登録場所まで行くことができます。

それは今日はこの辺で。

Gmailの複数アカウントを一つのGmailアカウントで一元管理

みんさんGmailって使っていますか？

便利ですよね、Gmail。使用していくうちに複数のアドレスが必要になったりすることがあると思います。特にブログ書いている方などは。

そんなとき、複数アドレスを一つのページで管理したいなと思うでしょう。メール管理ソフトいわゆるメーラーですね、それを使えば簡単なんですけどパソコンにソフトを入れて動作がもっさりしてしまうことは避けたい。

そう思う方は多いのではないでしょうか。今回はそういった課題を解決するべくGmail一括管理方法をご紹介します。

複数のGmailアカウントが一つのアカウントページで管理できるんですね。それにはGmailの転送設定を使用して転送させます。転送設定をすると普通のメールとほとんど同じ感じでメールされるので少々わかりづらいですが、タブ分けなどの設定をすれば判別しやすくなってこの課題は解決されるでしょう。

では、設定の方法ですが転送先に対しての設定は必要ありません。転送元にのみ設定を行うことで転送設定ができます。

それでは転送元のGmail設定ページを開いてください。画面右上のボルトマークのボタンから「設定」を押下です。

すると設定画面が表示されますので「メール転送とPOP/IMAP」を選択してください。すると「転送：」の項目がありますのでそこで転送先のメールアドレスを入力してボタン押下です。

あとは確認メールなどがされるのでガイドに沿って確認していきまましょう。

設定はこんなもんです。簡単でしたね、さらに設定をしていけば受信だけでなく送信も一つのアカウントで管理できるようになります。それは次回以降の記事で書いていきます。

ただ、この上記設定ではメーラーのようにフォルダ分け受信してくれません。そもそもGmailではフォルダという概念は無いですが。どこのメールアカウントから来たのか一目でわかるようにするにはもう少々設定が必要なんですかね。そもそも出来るかも不明ですが。

やっぱどのアカウントがどのくらいメール受信しているのかは一目で確認しておきたいところですよね。。。

それでは今日はこの辺りで。

登録: 投稿 (Atom)