うらぶろぐ

自分で参照するためだけのブログ。本家はこちら

【単語メモ】サーブレット

サーブレット

サーバ側で動作するJavaのプログラムの一つ。画面系の処理は行わないため、他のソフトウェアと連携して動作する。連携するソフトウェアで有名なものは、「JSP」や「Tomcat」がある。

Javaにおける、プログラムの種類の一つ。 Webサーバー上で動作するクラスのこと。サーバーサイドで実行され、処理結果をクライアントに返す。多くの場合、クライアントには、処理結果がHTMLで返される。 サーブレットは、一度Webサーバー上でロードされると、メモリに常駐し、クライアントからの要求に対してはマルチスレッドで応答する。リクエストされる度にプロセスが生成されるCGIに比べ、高速なのが特長である。 サーブレットを動かすためのソフトウェア(サーブレットコンテナ)としては、Tomcatなどが挙げられる。

サーブレットとは - はてなキーワード

JSPとの連携

動的なウェブページを作ることができる。サーブレットはWEBアプリ内部、JSPは主にWEBページ部分を処理する。

Tomcatとの連携

サーブレットに命令を出す役割をもつ。

本家ブログをGoogle Analyticsに登録するまでの方法

記事が一定数溜まってきたので、収益化に興味が湧いてきた。

することとしては、
googleアドセンスの登録。
www.google.co.jp

下準備

はてなブログProにアップデート

独自ドメインを利用可能になる。

独自ドメインを用意する

ドメイン名とは?
ドメイン名ってなに? | ドメイン名関連情報 | JPRS

ドメイン名をどう決めれば良いのかは、下記サイトが参考になった。
ドメイン名の決め方

ドメイン名を取得後は、はてなブログ独自ドメインを設定する。

自分はお名前.comでドメイン名を取得したので、下記サイトがとても参考になった。
www.mutant-tetsu.com
というか他に書き足す内容はほとんどなかった。一応はてな公式のドキュメントはこちら。
はてなブログを独自ドメインで利用する - はてなブログ ヘルプ

下準備が完了したら

オンライン ビジネス - ウェブサイトの収益化 | Google AdSense – Googleからログイン、またはアカウントを作成し画面の指示に従って登録をするだけ。

申請した結果

1回目は審査に落ちましたw記事数なんかは30記事くらいはあったし、一ヶ月くらい続けていたから大丈夫だと思っていたのに。。
メッセージは下記の通り。

サイトのナビゲーションが困難: お申し込みのウェブサイトを審査いたしましたが、サイトのナビゲーションが困難です。ナビゲーションの問題には、リダイレクト、ログインが必要またはアクセスが制限されたページ、無効なリンク、ポップアップの過剰な使用、電話アプリケーション、作成中または立ち上げ前のページなどが含まれます。

原因はサイトのナビゲーション。レイアウトがデフォルトのままだったからかな?他に初期のレイアウトで落ちた方っています?
以下、対策として行ったこと。

レイアウトの変更

具体的にはサイドバーがあるレイアウトにして画面遷移を意識したこと
テーマをインストールしてちょこっとCCSをいじりました。

ブログタイトルの変更

デフォルトの○○'s blogだと手抜き感が出ていたか?

プロフィール欄の充実

googleからしてもどんな人が記事を書いているのかわかった方が信用できるようなので簡単に追記。

一次審査の合格

で、再度申請してから丸1日後AdSenseにアクセスしたらアカウントが作られていました。(googleから何の連絡もなし)

自分のブログページのHTML で タグの直後に指定されたコードを貼り付ける、とのこと。
はてなブログ
設定 > 詳細設定タブ > 検索エンジン最適化 の「headに要素を追加」にコードを貼り付ける。
choromeのデベロッパーツールから確認して、タグ内にコードがあることを確認できた。

コードを貼り付けたことを申請するチェックボックスをチェックしたらまた審査開始w
最大3日って。。

1/1にコードを貼り付けたことを申請してから一週間後、何も音沙汰がない。。。
関係ないと思うけど、Google Analyticsのマイページに通知されていた3つのことを試しました。

Google Tag Assistant Recordingsのインストール

Google Tag Assistant Recordings
画面の指示に従うと、Chrome拡張機能に追加される。

目標設定の追加

当面の目標はPVを増やすことだけど、、適当に登録してみる。
1.目標設定
 テンプレート>ユーザーのロイヤリティ>お気に入りに追加
2.目標の説明
 ページビュー数
3.目標の詳細
 5pv超え
googleアナリティクスの登録

アナリティクスと Search Console をリンク

Search Consoleはこちらから。
web-tan.forum.impressrd.jp
このページが参考になりました。
自分のブログのurlを追加して「プロパティを追加」を押下。
サイトの所有権を確認する画面が表示されたので
自分は「HTML タグ」を選択した。
はてなブログの設定>詳細設定>解析ツール Google Search Console(旧 Google ウェブマスター ツール)欄にcontent="..." の ... にある英数字をコピーして貼り付ける。

うまく行けば自分のサイト
http://www.chitana.me/ の所有権が確認されました。と表示される。

審査状況

1/9現在、まだ審査中。。。

CakePHP3をUbuntu16.04にインストールする

諸事情によりUbuntuから開発を行うことに。

下準備

下記の環境が用意されていること(Cookbookより)

  • HTTPサーバー。例: Apachemod_rewrite が推奨されますが、必須ではありません。
  • PHP 5.5.9 以上 (PHP 7 も含む)
  • PHP mbstring 拡張
  • PHP intl 拡張

サポートされているデータベースエンジン

拡張モジュールが入っているか確認

php -m

余談だが、php -i はphpinfo の実行結果を表示してくれる。違いがわからなかったのでφ(..)メモメモ
それぞれ下記のコマンドで確認できる。

$ php -m | grep mbstring
$ php -m | grep intl

自分の環境でPHP intl 拡張がないためインストールする

$ sudo apt-get install php-intl
Composerのインストール

公式サイトみたら以前あったコマンドが消えていた。。。
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

$ php composer create-project --prefer-dist cakephp/app app_name

apache2の設定

AllowOverrideをNoneからAllに変更

/etc/apache2/apache2.conf
<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

mod_rewriteを有効にする

sudo a2enmod rewrite
sudo service apache2 restart

DBの設定は後で書くとして、
http://localhost/app_nameにアクセスしても404 notfoundだった。

結果だけ書くと、/var/www/html以下にapp_nameを置けば良い。

ここでapacheのDocumentRootの概念を知らなかったので少し詰まった。
UbuntuでApache2のドキュメントルートをユーザーディレクトリに変更する。 in Koonzの毎日作りかけブログ
参考に試したけど結局だめだったやり方。
のパスを書き換えたら403でアクセス拒否された。
000-default.confを変えたらアクセスはできたけどエラーが表示された。





参考にさせていただいたサイト
CakePHP3.xの詳細インストール手順 | jMatsuzaki

バックエンドとフロントエンド

文字通り、バックエンドはユーザから見えない部分、フロントエンドはブラウザから見えるような要素のこと。

ショッピングサイトでいうと、
フロント→ブラウザから閲覧できる部分。商品の一覧はカートの中身など、サイトのデザインも含む
バック→Webサーバ、デーバベースサーバの部分など

サーバサイドのDBやシステム設計を行うのはバックエンドエンジニアでフロントの人はあまりかかわらないそう。
両方担当するのが普通かと思っていました。
今さら聞けない!? 「フロントエンド」と「バックエンド」 - ITips(アイティップス)|転職@type

Leafletについて知っていること

Leafletとは
Web地図のためのJavascriptライブラリのひとつ。 他のライブラリとしてはOpenLayersなどがある。

Leaflet は広く使われているWeb地図のためのJavaScriptライブラリである。 2011年に最初にリリースされた[2]。 モバイルとデスクトップのプラットフォームのほとんどに対応し、HTML5とCSS3に対応している。 OpenLayersGoogle Maps API(英語版)とともに最も人気のあるJavaScript地図ライブラリの一つであり、FourSquarePinterestFlickrなどの有名なサイトで使われている。
Leafletを使うと、GISの知識のない開発者でも容易にタイルベースのWeb地図を表示できる。またGeoJSONから地物データを読み込んでスタイリングしたり、インタラクティブなレイヤーを作ることができる(クリックするとポップアップが表示されるマーカーなど)。

Leaflet - Wikipedia

で、OSMとは

OpenStreetMap(OSM)は、道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクトです。
誰でも自由に参加して、誰でも自由に編集でき、誰でも自由に利用する事が出来ます。

LeafletやOpenLayersなどのJavaScriptライブラリを利用してウェブサイト上で表示させることができる。


地図上にマーカーを表示したり、パス(経路)を描画したり、検索ボックスをおいたりできるのはLeafletのようなライブラリが実現する。
自作地図: leafletで使えるおすすめプラグインまとめ - Qiita

タイルとは

地図タイルは通常256×256ピクセルの画像です。
画面に特定のエリアを表示する。新しい領域を表示するときはJavascriptのライブラリがタイルのダウンロードを行う。

移動やズームの機能、地図の新しい領域をユーザーが表示させる必要があるときに新しいタイルのダウンロードを要求する機能は、 Javascript の地図ライブラリによって実現されます(スリッピーマップ)。

JA:タイル - OpenStreetMap Wiki

jsの型取得する方法

自分用メモ
JSONに触ってarray じゃなく Object型ということを知ったw

qiita.com

OpenStreetMapを使うのに役立ちそうなサイト

マーカー・バルーン表示してる記事
Leaflet – OSMにgeoJSONでマーカーをつけたりできる便利なJavaScriptライブラリ | アンギス

大河内教授の憂鬱: OpenStreetMapでバルーン表示してみた

leafletというライブラリ
ぬるぬる動く!Web地図クライアント「Leaflet」を使おう! – GUNMA GIS GEEK


いずれPythonで実装する予定なので参考になりそう
python + OpenStreetMapで地図にデータをプロットする - Qiita