SVGファイル

こんばんは、こうちゃんです。

昨今人気の画像ファイル形式のSVGファイルですが、
拡大・縮小しても画質が劣化しない、とレスポンシブデザインのサイトなどに親和性がよいため、広く普及してきています。

このSVGファイルとはどのようなものか、などを今日はご説明していこうかと思います。

SVGファイルとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、
webサイトで多くのケースで使われているJPG、PNG、GIFなどの画像ファイルが、ラスタ形式なのに対して、SVGはベクトル形式の画像です。
これは、ラスタ形式のJPGファイルなどは、画像の中身を、ピクセルを縦横に並べる方法で記録しており（言うなれば座標毎に色をふっているような）、そのため、画像を拡大すると粗くなり、縮小すると、欠けてしまったりします。
作ったサイズから変えるのに不便で、サイト等で使うと、パソコンで見た時には普通なのに、残念ながらスマホで見ると拡大されてギザギザの粗が目立つ、なんてこともよくあります。
それに対して、ベクトル形式でできているSVGファイルは、XMLベースの二次元画像データで、画像の情報を座標を結ぶ直線などの情報で記録しているため、拡大・縮小しても劣化が起きにくい形式です。
サイトなどでレスポンシブデザインを使い、パソコンやスマホなど画面解像度の異なる環境で見られる機会の多い近年のwebサイトに対してとても相性がよいです。

SVG（Scalable Vector Graphics）ファイルの魅力はいくつかあります。以下にそのいくつかを挙げてみます：

1. **拡大縮小に対応**: SVGファイルはベクター形式であり、画像を拡大・縮小しても画質が劣化せず、クリアな表示が可能です。これは、Webデザインや印刷物など、さまざまな用途で重要です。

2. **編集しやすい**: SVGファイルはテキストベースで記述されているため、編集が容易です。SVGファイルをテキストエディタで開いて編集することができ、色や形状、サイズなどを自由に変更できます。

3. **アニメーションやインタラクティブ要素の追加**: SVGファイルにはアニメーションやインタラクティブな要素を追加することができます。これにより、Webサイトやアプリケーションで動的なコンテンツを作成することが可能です。

4. **軽量化**: SVGファイルは一般的に他の画像形式よりもファイルサイズが小さく、高品質な画像を提供できるため、Webサイトのパフォーマンス向上にも貢献します。

5. **検索エンジン最適化（SEO）**: SVGファイルはテキストベースであるため、検索エンジンがコンテンツを理解しやすく、SEOの観点からも有利です。

これらの特性により、SVGファイルは多くのデザイナーや開発者にとって魅力的なファイル形式となっています。

そんなSVGファイルですが、時に事情により（使用できるファイルフォーマットが限られるなど）、JPGファイルなどと形式を変換する必要が出てくる場面もあり、そのような時は、SVGファイルを作成できるIllustratorやphotoshopなどで変換することもできますが、そもそもソフトを持っていなかったりソフトを起動して変換する手間を考えると、web上でできてしまうと大変便利で、
最近ではそうしたサービスを行ってくれる（しかも無料）サイトも登場しています。

https://www.aconvert.com/jp/image/svg-to-jpg/

画像ファイルをそのフォーマットから、好きな形式に変えてくれる、しかも、ネット上に挙がっている画像でもOKという、大変便利な夢のようなサービスです。

よろしければ画像形式の違いに悩んだ際などにはご利用してみてください。

こうちゃん

MAX_QUERIES_PER_HOURでデータベース繋がらない

こんばんは、こうちゃんです。

先日開発中のサイトで突如データベースに繋がらなくなり困ってしまう事態が起きまして、
未来のために原因や解決方法等を備忘録代わりに残しておきますー。

まず、プログラム整備中のサイトにある時アクセスしたら、

has exceeded the 'max_connections_per_hour' resource (current value: 〇〇) i
n

みたいなエラーが出てデータベースに接続するプログラムがエラーで通らなくなってしまいました。
困ったことにこれ、エラー発生原因部分のプログラム消しても何しても一定時間アクセスできなくなってしまうんですね。
何もできないので、その間に、このエラーの原因や対処方法を確認しまして、一応の解決をしましたのでそのあたりのご説明を。

まずエラーに関しては、単純にエラーの英語文通りで、
プログラムで、一時間以内に、
MySQLの、max_connections_per_hour、という設定値以上のセッションを張ってしまったことが原因です。
この値はMySQLユーザーごとの設定ではありますが、
だいたいサイト開いた時に実行プログラム内で、どのユーザーで繋ぐかは決まっているのがほとんどですので、例えば、データを引き出すのに10クエリ発する画面があったとして、その画面を１時間以内に100回開かれれば、1000セッションを張ったことになり、設定値が1000であれば、これでもうエラーに引っ掛かります。

説明でも、
時間単位の接続数: 1時間で新しく開ける接続
これ、私のレンタルサーバーでは1500になっていたのですが、
1時間に新しく開ける接続、てことは、シンプルにサイトを見たら、トップページでSQL使っていたらどんなに工夫してあっても、１接続は発生しますよね、てことは1時間以内にちょっとアクセスが集中しただけでもうお陀仏なんじゃ・・・
なんて設定でしょうねえ。

公式にも
サーバーが実行されると、各アカウントがリソースを使用する回数がカウントされます。過去 1 時間以内にアカウントが接続数に対する制限に達した場合は、その時間が経過するまで、そのアカウントによる以降の接続が拒否されます。
てなってますし。

さすがにこれじゃ使い物にならないので、
解決するためには、まずはプログラムの方は最適化して、むやみにデータベースに対してコネクションを張らないように（必要最低限）するのはもちろんとして、
その上で、この設定値をかなり引き上げておくか、それでもいつかオーバーすることを予期して、規制を停止するかのいずれかがよいかと。

既定数を変更する場合、

GRANT USAGE ON *.* TO 'ユーザー名'@'localhost' WITH MAX_CONNECTIONS_PER_HOUR 数字;

とSQL発行して、数字で最大数を決めればその数値になります。
また、そもそも最大数を制御したくない（規制しない）場合はこの数値を0にします。

GRANT USAGE ON *.* TO 'ユーザー名'@'localhost' WITH MAX_CONNECTIONS_PER_HOUR 0

これで今後この制御は外れます。

といっても、むやみにコネクションを増やさないようなシステム作りも心がけた方がよいのも言うまでもないですが。

こうちゃん

chromeのシークレットモード

こんばんは、こうちゃんです。

いつも使っていて大変便利なgoogle先生作の優秀ブラウザ、
chromeですが、もちろん普通に使っていても大変便利で使いやすいんですが、
サイトに情報が残ったり、chrome自体にgoogleアカウントでログインしておりますと、
自身のID、パスワードを記憶してしまったりします。

そんな時に、大事な情報を一切残さずサイトに訪問したい場合、
chromeにはデフォルトで便利な機能が搭載されています。

シークレットモードです。

こちら、使い方は、ブラウザ右上の設定アイコン（縦〇みっつ）をクリック
シークレットウィンドウを開く、をクリックしてください。

そうしますと、普段はタブが白いchromeですが、
タブの黒いウィンドウが開きます、こちらがシークレットモードを使える状態のブラウザになります。

以降は普通のブラウザとして使用できますし、
通常時に登録したブックマークなども使えます。

ただし、この状態では、開いた段階でcookieもセッションもクリアされており、また、その状態で使ったブラウザの情報、閲覧履歴やフォームに入力した内容は記録されません。
また、ブラウザを開いている間は閲覧しているサイトでcookieやパスワードは利用できますが、そのシークレットウィンドウを閉じた際にcookieもきれいにクリアされます。
例えばパソコンが共用パソコンである時など、他のユーザーに操作内容が知られずに使うことができるという便利機能になります。

なお、シークレットモード中にダウンロードしたファイルなどはそのまま残り続きますので、ご注意ください。

また、もしも通常のchrome使用中に、
特定のサイトを開く時だけいつもシークレットウィンドウにしたい、などの場合は、
大変便利なchromeのextensionのひとつ

Incognito Filter

を使うといつでも実現できます。
このextensionを入れて、アイコンから指定したいサイトURLを登録したり、利用したいサイト開き中にアイコンクリックから設定することができます。
これにより、日常のサイト閲覧、ネットサーフィンなどで、特定のサイトを開く時に、履歴や入力データを残さずに済むので便利です。

こうちゃん

FTPで425エラー！？

こんばんは、こうちゃんです。

私は本業で多くのサイトを作成・管理しておりまして、
つい先日、いつものように大量管理しているサイトの操作中、
あるサーバーにFTPで繋ぎまして、ファイル操作をしようとしましたら・・・

ffftpにて（FTP用フリーソフトです）
425 Unable to build data connection: Operation not permitted

！？
どいうこと！？
いつも使っててこんなエラー出てなかったんですけどーーーー

仕方ない、だいたいFTPでのこんなエラーなんてのは、過去の賢人達も一度はぶつかっていて、同じように悩み、解決してきた歴史があるはず、と調べれば解決するだろうと、
早速エラーメッセージにて検索してみました。

おおう、まずは解決方法は置いておいて、このエラーメッセージが出る時の原因は判明しました。

FTPでは通信時に使うポートが、
制御用コネクション(control connection)と呼ばれる、ファイル転送に関する指示（コマンド）をやりとりするためのもの、デフォルトで21番ポートと、
データ転送用コネクション（data connection)と呼ばれる、データ転送用ポートで、デフォルトで20番ポート、
のふたつを使っているそうで、
425エラーは、まずは、
425 Unable to build data connection
という部分があり、データ転送用コネクション(data connection)を確立できなかった（接続できなかった）ことを示しています。

原因としては、セキュリティで20番ポートが閉じられている場合や、
今回のエラーメッセージのように、
Operation not permitted
と出ていれば、権限不足等でポート確立が許可されていない場合です。

これはFTPクライアントでなく、サーバーのFTPサーバー側の設定なので、
見直しで、暗号化通信を強制する「TLSRequired on」となっているときに発生するようで、対策としては、
proftp.confを開いて、

TLSOptions NoSessionReuseRequired
という行を追記、FTPサーバーを再起動することで直ります。

他、そもそも、ファイア・ウォールなどのセキュリティ設定で20番ポートを閉じている場合も接続できませんので、その場合、アプリケーション層で対処でなく、サーバー管理者に確認の上、20番ポートをふさいでいないか、解放できないか、の相談をするとよいでしょう。

こうちゃん

PC操作自動化ならAutoRunner!

こんばんは、こうちゃんです。

こちら、繰り返し作業や、パソコンに一定の自動作業をさせるのに大変便利な、種々のパソコン操作の自動化ソフト、
AutoRunner!です

これは画期的なソフトで、起動すると、メニューから、パソコンで実行したい各タスクをアイテムとして何個も登録することができ、そのひとまとめを実行させると、あとは自動で順に実行、しかも繰り返し処理も指定回数こなせる、という大変な優れものです。
指定できる動作には、コマンドラインで指定のプログラムを起動、などをはじめ、指定のwebページを開くとか、キーボード操作も指定可能、マウスでこの座標をクリックしろ、などもやすやす、とにかく普段のパソコン作業で画面上で行っているような作業はほぼ自動化できます。
そして、画面にソフトが起動するまでの時間等も考え、例えばある作業をしたら何秒待って次を、などもすべてのタスク間で指定可能というすばらしさです。

そして、そんなすばらしいソフトが、なんと無料のフリーソフトであるというこの驚きの事実
http://ichisoft.nobody.jp/ar.html

似たような作業自動化系のソフト、これまでもいくつかはありましたが、
指定できる作業の幅広さや使いやすさで、こちらがかなり秀逸ですね。

使い方は最初だけ少し手こずるかもしれませんが、慣れると簡単に設定を作れます。

https://www.vector.co.jp/magazine/softnews/020828/n0208281.html

今リンクが切れていて、ここからはダウンロードはできませんが、
使い方はしっかり説明されておりますので、よろしければ参考にされてください。

こうちゃん

ライセンスフリーな画像だけ欲しい時

こんばんは、こうちゃんです。

今回は意外と知られていないgoogleの画像検索の使い方のご紹介です。

ブログやサイトを作成する際に、趣旨にあった画像を貼って説得力を増したい場合や、
見栄えをよくしたい場合がありますよね
このような時、フリー素材ならば気軽に使えるのですが、どうしても適当に必要なワードで検索して、見つかった画像をポンとダウンロード、使用、というわけにはいきません
※著作権や使用権のフリーでない画像は利用できません

そのような場合、gooele検索は大変便利で、用途に応じて、使用権のフリーな画像や、クリエイティブ・コモンズ・ゼロ（著作権がない状態。著作者が自ら能動的に権利を放棄したものです。）やパブリックドメイン（作者の死後50年経って自動的に著作権が消滅した物）などが簡単に検索できます。

まずは、google検索で、絞りたいキーワードを検索窓に入れて検索
最初の表示結果から、キーワード下の種別のところで、画像、をクリック
この時点でも大量の画像が出てくると思いますが、この時点では、まだフリー画像とかではありませんので画像を選ばないでください
次に、検索窓下右側にある、「ツール」という文字をクリック、そうしますと、下に文字列が展開しますので、その中の「ライセンス」をクリックします
これで、利用したい画像の目的ごとにライセンスの度合いに対応した画像絞り込みができます

最初はライセンスでフィルタリングしない、にチェックがついていると思いますので、
使いたい目的に応じて、
「再使用が許可された画像」とかを押すと、その内容で絞りこめます。
こうして絞った画像は、使用が許諾されていますので、原則使用できます。
なお、それでもその公開サイトに公開ルールで、著作者クレジットは入れること、などが入っている場合はそのルールにのっとりましょう。

クリエイティブコモンズの考え方で、
完全な権利放棄でなく、何種類かのwebの二次利用のための公開方法があり、そのルールづけがサイト内で表記されている場合がありますので

※なお、クリエイティブコモンズとは

クリエイティブ・コモンズ（Creative Commons）は、著作権を持つクリエイターが、自らの作品に対して柔軟なライセンスを提供するための非営利団体です。クリエイティブ・コモンズのライセンスは、著作権者が自分の作品に適用することで、他の人がその作品を自由に使用、共有、改変することを許可するものです。このライセンスは、著作権者が従来の「すべての権利を保持する」スタンスから、「一部の権利を他者に開放する」スタンスに変化させることができます。クリエイティブ・コモンズのライセンスには、使用条件を明確に示すためのいくつかのバリエーションがあり、著作権者は自分の作品に適したライセンスを選択することができます。これにより、著作権保護と共有のバランスを取りながら、クリエイティブな活動や情報の共有を促進することが可能となっています。

それでも、簡単なルールを守るだけで、有償の高い写真素材などを買わなくても使いやすい写真や画像素材が山と使えるのは大変魅力ですので、画像を多用するクリエイターや、ブロガーの方はこの方法をぜひ利用してみてください。

こうちゃん

FuelPHPでindex.phpを省略する方法

こんばんは、こうちゃんです。

プログラム言語のひとつで、htmlとの親和性の高さで、サイト制作によく使われる言語のPHPで、高速かつ便利な機能が充実していて近年人気の高まっているフレームワーク、
FuelPHP
このFuelPHPを用いて開発をする時に、
最初にぶつかりがちな壁のひとつの解決方法を解説します。

FuelPHPをサーバーに入れて、初期設定を済ませて、webで見られるようにした時、
最初、URLは、
http://ドメイン名/index.php/コントローラ名/アクション名

のように、URLの中でドメイン名の次に、動作ファイルの名前である、index.phpが入ってしまいます。
通常のサイトで、PHPファイルを配置、見えるようにした時の
http://ドメイン名/index.php
でしたら見えていてもいいですし、外のページも、
例えば、
http://ドメイン名/access.php
みたいに各ページに名前がつくのでindex.phpも見えていても構わないですが、FuelPHPの場合、その続きにコントローラ名、アクション名がつくので、
すべてのURLに変わらずindex.phpがつくのはあまり見栄えのいいものでもありません。
ですが、初期で勝手にこのindex.phpを抜いて

といったURLにアクセスしてもエラーで画面が表示されません。
この場合の、index.phpを除いて
http://ドメイン名/コントローラ名/アクション名

としてアクセスするための方法の解説です。

変更すべき点は3ヶ所で、

１．
fuel/app/config/config.php
の中ですでに用意されていますので、コメントアウトを削るだけです。

 * Set this to 'index.php if you don't use URL rewriting
 */
- //'index_file' => false,
+ 'index_file' => false,

２．
/public/.htaccess
の同じく、すでに用意されているコメントアウトの#を外すだけです。
#Remove index.php from URL
- #RewriteCond %{HTTP:X-Requested-With} !^XMLHttpRequest$
- #RewriteCond %{THE_REQUEST}               ^[^/]*/index\.php [NC]
- #RewriteRule ^index\.php(.*)$         $1 [R=301,NS,L]
+ RewriteCond %{HTTP:X-Requested-With}  !^XMLHttpRequest$
+ RewriteCond %{THE_REQUEST}                ^[^/]*/index\.php [NC]
+ RewriteRule ^index\.php(.*)$          $1 [R=301,NS,L]
コメントアウトを外すだけで対応できます

３．
.htaccessを有効に
これはサーバー設定で、すでに有効化してあれば対応しないで大丈夫です。
上記１．２．を設定しても動かない場合、この対応をしましょう。
まずはapacheの設定
linuxサーバーならばたいていこのパスにある設定ファイル
/etc/httpd/conf/httpd.conf
を編集

<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>

のように、フォルダ設定がある場所で、NoneをAllに変更しましょう。
-AllowOverride None

+AllowOverride All

この変更後、保存して、webサーバー再起動します。
service httpd restart
レンタルサーバーなどでコマンドラインを操作できない場合は、そのレンタルサーバーのサービスごとにあるであろう設定変更の手順やサーバー再起動の箇所を探してください。

以上の対応で、以降Fuelプロジェクトで、

http://ドメイン名/コントローラ名/アクション名

のように、index.phpなしでアクセスできるようになります。
FuelPHP導入時によくハマるあるあるですので、どうぞご参考にしてください。

こうちゃん