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

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

こうちゃん

主要ブラウザとレンダリングエンジンのお話・クロスブラウザ対応について

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

以前、ブラウザあれこれ、な話をしましたが、
ついでなんで、ちょっとメインで使うご紹介。

お仕事上、お客さんに納品するようなWEB制作物ならば、
様々なブラウザに対応できなくてはいけなくて・・・

かといって、世のすべてのブラウザに対応、なんて不可能なわけで
現状、主流の数ブラウザに対応すればよいことになります。

基本はお客様と相談して、推奨ブラウザは決めますが、
今のところ一番落ち着くのは、

・IE（8以下）
・FireFox
・chrome

の対応をする。といったあたりです。
（最近ではWindows10用の新ブラウザEdge用も追加）

IEはバージョンにより画面描画のルールが極端に変わるので・・・
そのWEBを欲しいお客さんや、そのWEBを見るエンドユーザーの範囲で、
IE7以前への対応は要検討、となることが多いです。

どこかの社内で使うようなシステムならたいてい、
旧IEへの対応不要

ぐるなびのような、
不特定多数のお客さんが見るサイトの場合、
旧バージョンIEへの対応必須

などとなることが多いです。

ちょっと、クロスブラウザ対応にもからむお話でした。

よろしければご参考にしてください。
まあ、今後は、iPhoneの人気を考えたら、
Safari用も考えないとかもしれませんし、
そもそもスマホ自体画面解像度などの都合で、
パソコンのブラウザで見る用とはまた別の考慮をしないといけなくて大変なんですけどね。

あと、さらに追加で、

ＷＥＢ業界に関わるには必須な情報を少々ご紹介していこうかと思います。
ここでは、ネットする際に必要なブラウザの裏方、というか内部的に必要な情報で、

レンダリングエンジン

とは
という部分を説明してみようと思います。
ちょっと別のブログでもこの「レンダリングエンジンとは」を解説したのですが、
こちらでも

レンダリングエンジンとは、ブラウザの中に搭載されている機能で、ウェブサイトを閲覧する際に、サーバーから取得してきたファイル内容を、ある規則・法則に従いユーザーに見えるように描画する機能です。
本来国際的にも基準・標準が定められているWEBの世界においても、このレンダリングエンジンが、WEBサイトのソースをどう解釈するかで、画面の表示のされ方が異なることはよくあります。

例えばですが、かつての定番ブラウザのIEなどに使用される
trident

今や数々のアドオンで快適にカスタマイズして使えて人気なFireFoxを中心に使用される
Gecko

MacなどでもおなじみSafariに使われる
webkit

のように、定番ブラウザの世界でも数種類あります（その他、独自のレンダリングエンジン搭載のブラウザも若干存在）。

これらのレンダリングエンジンの差が、
実際に、あるホームページを見た時に、このブラウザと、あのブラウザでは、
開いた時の見栄えが違う、のような現象を引き起こします。
特に近年、スタイルシートが飛躍的な進化を遂げているのと、
Javascriptの高度な利用が多くなってしまっているため、
ブラウザ依存、と言われる、あるブラウザでのみ動くサイト、
のようなものも多くなってしまっています（ここらの事情が本当にWebシステム開発者泣かせです）。

この搭載レンダリングエンジンによりブラウザはかなり特徴づけられますので、
今後ブラウザの紹介・解説する際には記録するようにします。

ちなみに、上でも記載しました、

クロスブラウザ・クロスブラウザ対応とは

についてもご説明します。

クロスブラウザとは、
Internet Explorer　や　Firefox　、　chrome　等、
webブラウザの仕様の違いなどによる挙動の違いをなくす技術のことです。

CSSやJavaScriptといったブラウザ側で解釈するものは、
まったく同じコードを書いたとしても、
ブラウザの解釈により、違う振る舞いをして、
制作側の意図と違う挙動をする場合があり、
それをなくし、本来の意図の挙動をさせるための技術になります。

通常、レンダリングエンジンといって、
ブラウザの、HTMLソースを受け取り画面への出力を決めるエンジン部分により、
おおまかに動きは決まっていますが、
時にブラウザにより、さらに独特な動きをしたりします。

そのため、あまりにマイナーなブラウザや、
InternetExprorer　の過去バージョン（IEはかなりバージョンごとに挙動が違う）などは、
対応をあきらめる場合も多いです。

そのような事情で、
WEB制作側として、動作保証する推奨ブラウザを宣言している場合が多いです。

実際、当ブログの筆者自身もシステム作成をしておりますが、あまりにも毎年のように様々なブラウザが作られ、世にリリースされておりますので、どんなブラウザでも見れます、みたいなサイトを作ってしまうと、まさかの画面崩れが起きてしまうことも多々ありまして、
そして、実際何度かお仕事でもそれで失敗もあり、
やはり、今どきのシステムでは、定番のシェアの高いブラウザ、chrome、firefox、edge、opera、くらいでしか保証しませんよ、と言って作っております。

ほんと、個人や、小さな会社が、速度やメモリの食わなさを売りにして特殊ブラウザを出すのは構いませんが、画面表示に関わるレンダリングエンジンなどまで独自実装だったりするのだけは本当に勘弁してほしいです。
現場エンジニアとしてはそうしたブラウザに出くわすたびに泣きそうです。



こちら、以前につい見つけてしまった記事なんですが

「グーグルの社員が亡くなるとその配偶者は10年間給料の半額を貰えるらしい」海外の反応
http://blog.livedoor.jp/drazuli/archives/6234651.html

今や検索エンジンの会社としては世界シェアNo.1をひた走り、各種ITサービスでも有力なサービス、他社を買収しまくり、すっかりIT業界のトップに君臨するgoogle大先生ですが、

ほんと、マジっすか！？
どんだけGoogle社は待遇いいんすか！？
もうさすが天下のGoogleっすね

同じWEB業界に生きる者として、
食堂無料とか、自習時間があったり、
息抜き自由とか、
結構あこがれるとこだらけですがｗ

にしても、この制度に、
勤続年数関係ないのはすごいですね。
やっぱり入社できるだけで結構な能力持ちであることは確定ですし、さすがに入社してすぐにいきなり亡くなるようなことはまずない（事故は除く）ですし、入社した、というだけでこれを福利厚生に持ってくるんですね。
さすがとしか言いようがありません。

まあ、こんな情報が知れ渡ったせいで、世間ではGoogle社員と結婚して旦那を暗殺するのが流行りそうで怖い・・・

さっき数えてみたら・・・

自分が仕事、趣味等でこれまで作成したサイト等ウェブメディアが約4700、そろそろ5000に到達する感じでしたｗ

とりあえずSEO対策用のサテライトにもなるので10000サイトまでは増やす予定でして。

そして、SEO対策もしてそこそこ露出増やしてると・・・

やっぱよくくる、テレビに使わせてくれ、の依頼、

いや、協力するとか、うちを材料に使ってもらうのはいいんだけど、なんで必ず無料で、なんでしょうね。おいくらで、と尋ねると必ず返ってくる、いえ、無料で、の声。

前に聞いたら、取材の場合は取材協力費を出す場合もあるが、サイトの全部、または一部を紹介や利用の場合は社の規定で無償だそうで、まあ有償にしちゃうとわざとテレビに売り込もうと過激な写真や動画をでっちあげる人が増えちゃうから、というのを前に記事で見かけたことはあるけど・・・

それにしたって、毎回無料で提案されたら、あんまし気乗りしないですよねえ。

て、勝手にどうぞの場合はいいんですけど、OK出したら、じゃあ各ページの作成時期や動機を、みたいにこっちに無駄に手間を要求してきたことあるんすけど・・・なんでそっちは何も出さないのにこっちにはずいぶんな手間かけさせんの？？と

あとたまにある、テレビで使ってやるから情報まとめてここまで連絡よこせや、的なずいぶん上から目線連絡、うーん。

もちろん、丁寧な連絡、姿勢のいい人もいっぱいいるんですけどね。

できることなら、最初から規定で、画像いくら、ページ単位ならいくら、とか、インタビューにはいくら、のように謝礼規定をきちんと決めて、これで、〇〇をテレビ用にいくらいくらでお譲りいただけませんか、のように聞くのがお互いのためにもいいと思うんですが・・・

こんな零細事業者から無料でテレビ材料をせしめておいて、ふんぞり返ってるテレビ人たちは年収数千万、芸能人は年収数億、って、そんなん気持ちいいわけないですよね。

こうちゃん

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導入時によくハマるあるあるですので、どうぞご参考にしてください。

こうちゃん

target="_blank"でなくjquery制御でリンクを別ウインドウ開き

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

htmlを使ってサイトを作っていると、必ずといっていいほどある、
外部リンク
多くの場合、外部リンクに飛ばす場合は別ウインドウで開く、というのがweb制作の定番ではありますが、例えば、サイト作成の途中でその挙動を変えたくなることがあるかもしれません。
そうした場合、通常のhtmlでリンクを製造しますと

<a href="URL" target="_blank">サイト名</a>

として別ウインドウ開きのリンクは作りますが、この場合、
例えばサイト中に多くのページがあり、大量にリンクがあった場合、書き換えが大変です。
もちろんソース全部に文字列の置換等はかけられますが、その後再度関係ページを全部アップし直しなど、手間がかかることは間違いないです。

そうした時に、全部のリンクの挙動を一括で管理するのに、
例えばjQueryを用いておくと大変便利です。

まずは定番、ヘッダでjQueryを読み込んでおきます。
<head></head>間に

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

の記述をしてGoogle提供のjQueryライブラリを読んでおきます。

その上で、
script表記中か、読み込んでるJSファイル中に
$(function(){
        $('.クラス名').click(function(){
        window.open(this.href, '_blank');
        return false;
        });
});
を記載すれば、htmlファイル中で、例えば、

<a href="URL" class="宣言したクラス名">サイト名</a>

と書いたリンクに関しては、この挙動、今回は別ウインドウで開く、
ということになります。
また、もしも挙動を変えたい場合、簡単に一か所書き換えるだけ、

        window.open(this.href, '_blank');

の、_blank　を、例えば、_self　にすれば、

これまで新規ウインドウで開いていたリンクが一斉にそのウインドウ上に、つまり、普通の画面遷移に切り替わります。

システム、サイトが大きくなればなるほど途中で変えるのは大変なものですので、こういった工夫が重要になってきます。

こうちゃん