どうのこうの

名古屋/元フリーランス/スタートアップ勤務/ウェブ/マークアップ/プログラマ/エンジニア

Category: Web制作小物ツール (page 1 of 2)

Web制作小物ツールを S3 + CloudFront + 独自ドメイン SSL (AWS Certificate Manager) に変えた

Web制作小物ツールは自宅サーバーで運用していたんだけど、パスワードジェネレータとかあることを考えると SSL にしたいなぁと思っていて、折角だから一度やって見たかった S3 + CloudFront + 独自ドメイン SSL (AWS Certificate Manager) (+ 一部機能に Amazon API Gateway) にしてみました。

以下、作業のメモです。

S3 + 独自ドメインでホスティングするまで

下記の公式ページが参考になりました。

例: 独自ドメインを使用して静的ウェブサイトをセットアップする – Amazon Simple Storage Service

ドメインはバリュードメインで管理していて、 DNS は Amazon Route 53 を使わずにバリュードメインの DNS を使いたいので、バリュードメイン側で下記のように設定をしました。

ここまでで、 S3 + 独自ドメインでの運用ができるようになりました。

AWS Certificate Manager + Amazon CloudFront

AWS Certificate Manager と Amazon CloudFront の設定は下記サイトが詳しいです。

[ACM] AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた | Developers.IO

今回は http へのアクセスは https へリダイレクトさせたいので「Redirect HTTP to HTTPS」を選択しました。

また、「Origin Domain Name」には S3 の Static website hosting のエンドポイント(「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」)を入力し、「Alternate Domain Names
(CNAMEs)」には CNAME を入力し、「Price Class」は「Use All Edge Locations」を選択し、「Default Root Object」は「index.html」を指定しました。それ以外は基本、初期値を利用しました。

注意点としては、 AWS Certificate Manager は「米国東部 (バージニア北部)」で作成しないと Amazon CloudFront では使えないので注意。(私は初め「アジアパシフィック (東京)」で作ってしまって、ちょっとハマった。)

もう一つ注意点としては、「Origin Domain Name」を「{バケット名}.s3.amazonaws.com」ではなく「{バケット名}.s3-website-ap-northeast-1.amazonaws.com」としないと https://webtools.dounokouno.com/dummytext/ のような URL で https://webtools.dounokouno.com/dummytext/index.html を表示してくれないので注意。(私はこれで約1日、 https://webtools.dounokouno.com/dummytext/ でアクセスできなくなりました…。)

参考: CloudFront に S3 bucket のサブディレクトリパスのコンテンツを参照させる – Qiita

再度、バリュードメインの設定

「S3 + 独自ドメイン」でバリュードメインの設定をしちゃったので、ここで再度、 DNS の設定を変更します。設定内容は下記の通り。

(ここで末尾の . を入れてなくて一時的にサイトをダウンさせちゃった…orz)

AWS の利用料金はいくらになるか

現在、無料枠の期間内なので、正確な料金はわからない気がします。

とりあえず、来月の一ヶ月が無料枠で収まるかはここに追記したいと思います。

2017年4月2日 追記

今日確認したら、3月の利用料は無料でした。

それぞれのサービスの利用状況を見ると、すべて無料枠内で収まっているようです。

ちなみに、 Web制作小物ツールの2017年3月のセッション数は「9,020」、ページビュー数は「10,231」でした。

また来年の今頃に、無料枠がなくなったタイミングで利用料金がいくらになるか確認をしたいと思います。

追記ここまで。

Web制作小物ツールの対応ブラウザの変更

今回のサーバー移転にあわせて、コードもいくつか修正しました。

まず、 jQuery を v3 にアップデートした関係で、 IE 8 以下はサポート対象外になりました。

参考: Browser Support | jQuery

また、一部機能で Ajax の CORS (Cross-Origin Resource Sharing) を利用するようになったので、 IE 10 以下はサポート対象外になりました。

参考: CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 | Developers.IO

CORS のほうは、 jQuery プラグインを使えば IE 8 、 IE 9 にも対応できるようですが、Web制作小物ツールの利用者に IE 9 以下のユーザーは少ないので、サポートしなくてもいいかなと判断をしました。

上記はWeb制作小物ツールの直近30日のアクセスの、 Internet Explorer のバージョン毎の内訳。 86% 以上が IE11 。

まとめ

静的サイトなら S3 で十分ですし、 CloudFront を使えば独自ドメイン SSL の認証書が無料なのがうれしいです。

自宅サーバー + 安価な SSL 認証書の場合と、 S3 + CloudFront の構成の場合のどちらが安いかは、 AWS の無料枠が終わった段階で見極めたいと思います。

「英和和英翻訳ツール」を改修して「英和和英翻訳比較ツール」を作りました

最近、英語を書くことがちょこちょこあって、
翻訳くらべ」がとても便利でよく利用しています。

「翻訳くらべ」でもまぁ全然問題ないんですけど、
翻訳ツールは以前自分でも作ったので、
「翻訳くらべ」みたいに使いやすく、
より自分が使いやすいツールを自分で作ってみました。

「作ってみました」というよりは、
以前作ったものの改修ですね。

 

英和和英翻訳比較ツール | Web制作小物ツール – dounokouno.com
http://webtools.dounokouno.com/translate/

20110226_001

 

改良点1:レイアウト変更

レイアウトを変更して、翻訳結果を並べるようにしました。
(「翻訳くらべ」をパクらせていただきました。)

 

改良点2:翻訳 API を追加

利用する翻訳 API に Yahoo と iKnow を追加しました。
これで英和和英翻訳比較ツールは翻訳 API が4つになりました。

「翻訳くらべ」は10の翻訳エンジンを比べられますが、
実際には3つくらいしか動いてなかったりするので、
これで同等かそれ以上です。

まぁ、英和和英翻訳比較ツールも iKnow API が動かなかったりするので、
実質3つなんですけどね。

Yahoo の翻訳は下記サイトの API を利用させていただいています。

英語←→日本語の翻訳APIとして使えるYahoo Pipesを作った(管理人日記) – むぅもぉ.jp

iKnow は API の説明ページがないんですけど、
API 自体は動いていたので、
利用させていただきました。

http://api.iknow.co.jp/items/matching/apple.xml

ただ、smart.fm が2011年3月31日でサービスを終了するらしいので、
そのタイミングで使えなくなるのかも。

Smart.fm – 世界最大級英語学習コミュニティーサイト

ってか、smart.fm って昔、 iKnow っていう名前じゃなかったっけ……?
iKnow が smart.fm になって、また iKnow になるの……?

 

改良点3:翻訳後のテキストを再翻訳

英語に翻訳された文章が自分の意図通りなのか不安になって、
英語を再度日本語に翻訳したくなりませんか?
僕はなります。

「翻訳くらべ」を利用している時は一回ずつコピペして再度翻訳していたのですが、
英和和英翻訳比較ツールは「このテキストを翻訳」ボタンを設置しました。

これで、翻訳結果に自信が無いときの確認作業が楽になります。

20110126_002

 

改良点4:メモ欄とメモボタン

翻訳作業って、
いくつかの翻訳結果を組み合わせて、
より自分の意図する表現にしようとしたりしませんか?
僕はします。

「翻訳くらべ」を利用している時は、
ブラウザとは別にテキストエディタを起動して、
コピペして組み合わせて、組み合わせた文章をコピペしてまた翻訳して、
みたいなことを繰り返していました。

英和和英翻訳比較ツールでは「メモ欄」と「メモ」ボタンを設置しているので、
「メモ」ボタンをクリックして翻訳結果を「メモ欄」にメモしておくことが可能です。

これで、翻訳結果をコピペしたり、一時的に置いておいたり、組み合わせたりが楽になるんじゃないかなぁと思っています。
(あくまでもメモなので、ブラウザのウィンドウを閉じると消えてしまいます。)

20110226_003

 

今後の課題とか

他にも翻訳 API があれば追加したいです。
どなたかご存じないですか?

WebService X っていうところが API を提供してるっぽいんだけど、
動いてないのはタイミングが悪かったのかなぁ?

TranslateService Web Service

あと、myGengo の API はてっきり自動翻訳 API だと思ってたら、
myGengo のサービス(人力翻訳)への依頼や翻訳結果を、
自分の Web サービスに組み込むための API なのね。

サンプル動かしてみて、やっと気づいたよ……。

API | ハイクオリティで低価格な人力翻訳を、ウェブサイトやアプリケーションにつなぎましょう。 | myGengo

 

英和和英翻訳比較ツールを利用してみて、使い勝手が悪かったり、不具合などありましたら、
コメント欄にてご指摘いただければ幸いです。

ダミーテキストジェネレータに「lorem ipsum」を追加しました

個人的に英語のダミーテキストが必要だったので、
ダミーテキストジェネレータに「lorem ipsum」を追加しました。

ダミーテキストジェネレータ | Web制作小物ツール – dounokouno.com
20110107_001

 

lorem ipsum(ロレム・イプサム、略してリプサム lipsum ともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体(フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。

Lorem ipsum – Wikipedia

へぇ。
勉強になります。

 

英語と日本語の混じったダミーテキストも追加したかったんだけど、
なんか良いテキストないっすかねぇ……。

ルー語変換された人間失格を使おうかと思ったけど、
笑ってしまいそうになるので却下しました。

回文エディタを作りました

Web制作小物ツールに、
回文っぽい文章が作れるかもしれない回文エディタを追加しました。

Web制作にはあまり関係ありませんが……。

 

回文エディタ
http://webtools.dounokouno.com/kaibun/index.html

20101127_001

 

はてなブックマークニュースの回文の記事を読んでたら、
無性に作りたくなって一気に作ってしまいました。

タイヤキ焼いたを越える秀作が続々?すごい「回文」を集めてみた – はてなブックマークニュース

 

で、実際に作ってみたものの、
これで回文が作れるかというとそうでもないなと。

回文を作るには回文メソッドというか、
回文を作るための手法を使って作るんだなーってことが、
回文エディタを作ってみて気がつきました。

回文の作り方は下記サイトなどが参考になります。

 

日本語変換には Google CGI API for Japanese Input を使っています。
非公式でjsonpが使えるらしく、JavaScriptだけで日本語変換ができて便利ねー。

 

いろいろ突っ込みどころはあるとは思いますが、
よかったら遊んでみてくださいm(_ _)m

HTMLエスケープツールを作りました

Web制作小物ツールHTMLエスケープツールを追加しました。

 

HTMLエスケープツール
http://webtools.dounokouno.com/htmlescape/index.html

20101122_001

 

またまたよくあるツールです。
またまた個人的に必要だったので作りました。

ブログにソースコードを貼る際などにご利用いただければ幸いです。

 

本当はタグの入れ子や関数、条件式に応じてインデントする機能をつけたかったのですが、
どうやって作ればいいか思いつかなかったので実装は諦めました。

どなたかロジックを教えてくださいm(_ _)m

URLエンコード/デコードツールを作りました

Web制作小物ツールURLエンコード/デコードツールを追加しました。

 

URLエンコード/デコードツール
http://webtools.dounokouno.com/urlencode/index.html

20101120_001

 

よくあるツールです。
ちょっと個人的に必要だったので作りました。

画像のタイトルは「ジェネレータ」になっていますが、
「ジェネレータ」っていうのはなんか変だなと思って「ツール」に変えました。

 

URLエンコード/デコードしたいタイミングってあまりないとは思いますが、
機会があれば使って見てください。

Web制作小物ツールを移転しました

諸般の事情によりWeb制作小物ツールを移転しました。

ブックマーク等されていた方は、
お手数ですが新しいアドレスへ変更をお願いいたします。

 

【旧】http://dounokouno.com/webtools/
【新】http://webtools.dounokouno.com/

 

リダイレクト処理をしているので、
今後旧アドレスにアクセスした場合は、
勝手にURLが変わると思います。

 

リダイレクトの書き方は下記サイトを参考にさせていただきました。

.htaccess – Rewrite

 

実際の書き方はこんな感じ。

 

ついでに、「英和和英翻訳」と「検索エンジン順位チェック」を少し修正しました。

英和和英翻訳」は体感速度が、
検索エンジン順位チェック」は実際の処理速度が速くなっています。

よろしければお試しください。

 

それでは、今後ともWeb制作小物ツールをどうぞよろしくお願いいたします。

検索エンジン順位チェックツールを作りました

入力されたキーワードで検索したときの、
対象ドメインの順位を調査する、
検索エンジン順位チェックツールを作りました。

 

検索エンジン順位チェックツールの紹介

検索エンジン順位チェックツール
http://dounokouno.com/webtools/rankingcheck/index.html

順位チェックには、
検索エンジン各社が提供しているAPIは使用せずに、
検索結果をスクレイピングしています。

スクレイピングはGoogle App Engineで動いています。
正直、レスポンスが遅いです。
データの読み込みが成功するまで検索を繰り返すので、
結果の表示に時間がかかる場合があります。

Google App Engineなので、
CPUの使用量が規定を超えた場合、
サーバーが止まると思います。
課金については、考え中です。
サーバーが止まったら考えます。

 

よくあるツールではありますが、
よろしければ使ってみてください。

英和和英翻訳ツールを作りました

入力された文章を英和、和英翻訳する、
英和和英翻訳ツールを作りました。

 

英和和英翻訳ツールの紹介

英和和英翻訳ツール
http://dounokouno.com/webtools/translate/index.html

翻訳には以下のAPIを利用しています。

Microsoft Translator は下記からサイト登録すると利用できます。

Microsoft Translator AJAX API

Yahooでも翻訳したかったけど、
下記のAPIでは英和はできるけど、
和英がうまくいかず、あきらめました。

英語←→日本語の翻訳APIとして使えるYahoo Pipesを作った(管理人日記) – むぅもぉ.jp

 

翻訳するときはいつもエキサイト翻訳を使っていたのですが、
これからは自分のサイトで翻訳できるようになりました。

単語はApple純正の辞書を使うけど。

都道府県selectメニューコードジェネレータを作りました

都道府県を選択するメニューのhtmlコードを生成する、
都道府県selectメニューコードジェネレータを作りました。

 

都道府県selectメニューコードジェネレータの紹介

都道府県selectメニューコードジェネレータ
http://dounokouno.com/webtools/prefecture/index.html

20091002-001

都道府県のselectメニューを生成するだけです。

下記サイトを参考にしています。
コピペだけなら、下記サイトをご利用いただいたほうがよいかもしれません。

都道府県選択するやつ。|CSS HappyLife

 

ジェネレータにするほどでもなかったかもしれませんが、
無性にプログラムしたくなり、衝動的に作りました。

Older posts

© 2017 どうのこうの

Theme by Anders NorenUp ↑