サイト内検索
Translation here

2017/01/03(火)ソースコードを丸パクされたくない人のためのJavaScript~JQueryでCtrlキーとkeydownイベントを制御する

お疲れ様です、野村(@official_nomura)です。
年をまたいだから、というワケではないんですが新しい試みをブログに導入したので、その備忘録を残しておきます。

本日の対象者

  • JavaScript/JQueryエンジニア・デザイナー
  • コピペブロガーにお困りの方
  • 技術的な話もないのに結論ありきで語るブログに嫌気が差している技術者
太枠の方向けだったんですが、よく考えたら他の方にも需要があるな、と思いました。

本日の議題

ソース例(参考)

jQueryでクリック、右クリック、ドラッグ防止 | snippet

要約

【セレクタ】に対する【パラメータ】防止
例えば、パラメータにclickやcontextmenuを設定するとそれぞれのマウスアクションに対して制御ができる
$(【セレクタ】).on(【パラメータ】,
    function(e){
        // prイベントの場合
        e.preventDefault();
        // True/Falseの場合
        return false;
    }
);
ドラッグ防止の場合、mousedownとmouseupそれぞれののアクションを指定する
この時、mouseアクションを指定する時はonアクションと違ってパラメータを指定する必要はない

JavaScriptエンジニア向け

セレクタの概念はHTML5の話です。CSSのいじり方について理解を深めてもらえればと思います。

CSSサイトデザイナー向け

パラメーターはアクションです。
パラメーターは左クリック・右クリックのアクションを指定します。
mousedownとmouseupは左クリックボタンしかないのと、操作が決まっているのでパラメーターを入れる必要がない、という認識で概ね合っています。
なお、マウスジェスチャーはブラウザ側の機能なのでサイト側で制御する事は出来ません。

このようなスクリプトを入れているサイトを退治する方法

  1. JavaScriptをオフにする。
    jQueryも結局はスクリプトなので、JavaScriptをオフにするといいです。
    特に右クリックの禁止は相当悪質です。本懐はコピーの禁止だと思いますが、そんなもんユーザーにとっちゃどうでもいいです。
    利便性に大きく影響するので、必要に応じてON/OFFしてください。
  2. NOSCRIPTを使う
    よく使うサイトはホワイトリストに入れてしまえば、そのサイトが右クリックを禁止していようが無関係にスクリプトを禁止出来ますので、そもそもそういう挙動に気づかないでしょう。
    ホワイトリストに入れるのも、レイアウトが崩れた時ぐらいでいいと思いますよ。
    おすすめはwindowsユーザーならmicrosoftやamazon、rakutenですね。これらはサブドメインも使用しているので、設定しておかないと頻繁に崩れます。
  3. ソースコードを表示する
    アドレス欄にview-source:を入れると、ソースコードからコンテンツを閲覧する事が出来ますが、そこまでやるメリットは正直皆無でしょう……。
  4. セレクタの外にある要素をつかんでSHIFT+カーソルキーとかCtrl+Aキー
    上記サイトのソースコードをそのまま使う場合、これでコピーが出来ます。
    これを更に制限する場合はキーイベントを足してあげましょう。
$(function(){
  $(【セレクタ】).【発火イベント】(function(e){
    if(event.【キープロパティ】 && e.keyCode === 【キーコード】){
      return false;
    }
  });
});
技術者ならこの辺は大丈夫ですよね?
ヒントは上記の通り。

この辺も参考になると思います。
http://qiita.com/n0bisuke/items/8b2b0c700c8f5f5a4043

キーコードを調べるのはこっち
Bad Request

この方法からもソースコードを守る方法

一応、なくはないですが悪用も出来ちゃいますので……。
セキュリティ面の懸念から、この場では公開しません。
興味があれば各自の責任において調べてもらうか、何かしらのコミュニティで私を捕まえて聞いてもらえれば考えます。

最後に

正直、ユーザーの操作を阻害するような事をやるのは私は好きではありません。
右クリック~コンテクストメニューはユーザーにとって便利な機能ばかりです。
コピー機能を制限するためだけにコンテクストメニュー全てを制限するのはどうなんでしょうね。

明らかに必要のない操作について思うところがあるならまだしも、それ以外に干渉するのはいただけないです。
もし使うとしても、しっかりと用途を意識して使うべきでしょう。間違っても全体を指定する、というような事はしてはいけないと思います。


本日は野村ごろう(@official_nomura)の提供でお届けしました。

この記事を読んだ人は、以下の記事も読んでいます

2016/12/24(土)#エアLT ファイラ―使ってますか?便利すぎるエクスプローラー型タブファイラ「tablacus explorer」 #社内ツール大公開

社内ツール.png


お疲れ様です、野村です。
21日のイベントにこういうのがありました。
エンジニア交流会~マル秘?!こだわりの社内ツール大公開!~(画像引用元)

ここにJsonleniumという、オートメーションエンジニアの関心を一手に引き付ける魔法のキーワードがあるんですが、これ検索しても出てこないんですよね……
情報欲しいです、切実に!

なければ作るしかないのか……!

と、いうことで

悔しいのでエアLTします。
社内で使っているものでなければ、ツールでもありませんがどうぞ、ご査収ください。

本日の対象者

  • ファイラ―を使ってない人
  • エクスプローラーに物足りなさを感じる人
  • Windowsユーザー

アジェンダ

ファイラ、使ってますか?

まずファイラとは何か、ご存知でしょうか?
乱暴な言い方をすると、Windowsとかについているエクスプローラーを強化したアプリケーションの事です。
その手の界隈の方は結構使ってるみたいなんですが、Macユーザーの方やWindowsユーザーの方でもExplorerを使っている人が多いので、知って使っていないのか、知らなくて使ってないのかでは意味が異なりますので、お節介を承知で紹介させていただきます。

最初にまとめ

おすすめのファイラは何ですか?と言われれば迷いなくTablacus Explorerを推します。
アドオンで拡張できるタブ型ファイラー Tablacus Explorer

使用例(と、カスタマイズイメージ)

tablacus.png

左側で作業用BGMを、右側で色々やってます。ゲーム系のセーブフォルダをマイドキュメントに置くのは管理が面倒になるから本当にやめてほしいですね……!

画面で見える範囲だと、分割とタブロックとペイン、検索フィルターバーが目立つぐらいですね。
デフォルトでマウスジェスチャー機能があったり、裏側でマルチプロセス・マルチタスク機能をONにしています。
あんまり多機能にしすぎると干渉しそうなので、類似機能は重複させないようにしています。

安定感

同じ系統にX-Finderというものがありますが、こちらの後継です。週に1、2度更新されていてバージョンアップがめちゃくちゃ早いです。
また、アドオンも充実しておりかゆいところに手が届く、というよりは直接かゆみ止めを塗りつけている感覚です。
便利すぎてこわい。

JavaScript製

です!結構すごいな、と思ってます。ただ、エラーハンドリング系は弱いので、ネットワーク障害が起こると頻繁に落ちるようです。
対策(?)として、定期セーブや定期再起動といったアドオンがあり、障害回復に注力されています。

欠点

  • さっきも少し書きましたが、ネットワーク障害などのエラーハンドリング系が本当に弱いです。
  • ネットワークを介して使うのは少々危険な気がします(アプリを再起動すれば問題は軽減できます)
  • はじめて触る場合、アドオンが豊富すぎて何をすればいいか分からないかも知れません。意味の分かるところから少しずつ入れてみる事をお勧めします。
  • アドオンの安全性は保障されていません。セキュリティ面には注意を払っておいてください。
    tablacus自体がセキュリティホールにはなりませんが、JavaScriptである以上未知の脆弱性を孕みます。最新版であることを確認しておきましょう。
とはいえ
便利さはピカイチです。
他のファイラ―はもう使わなくなったので分かりませんが、tablacus explorerだけで満足できる体にされてしまったので不便を感じていません。
不満、というか要望
贅沢な話をするなら、コマンドツールが使えるともっといいですが、どう考えてもエンジニアしか喜ばない機能ですね。
cd,ls,find,git,wget辺りは頻繁に使うと思います。使いませんか?
batやshell程度ならvimでサクッと書いてちゃちゃっとrun出来たらいいのにな~、とか思ってますが、そこまでやったらファイラではなくなりますね。

主催の方へ、要望

もう一回、社内ツール大公開やってくださいませませ、超行きたいマジ行きたい!
LTでもブログでもやります、ツール沼の人間としては気になりすぎてここ数日つらい……!

oracleハンズオン!オラクルGoのベース技術OracleJETを触ってみよう

お疲れ様です、
最近JavaScriptのライブラリマニアになりつつあります、野村です。

OracleJETの話が、と言うよりは前段の講義であった「オラクルGO!話題の位置情報アプリをクラウドで簡単に作ってみる」という講義を受けてみて、なるほど面白そうだ!と思って突撃してきた、というのが実態です。

本日の議題

対象者

  • oracleが好きな人
  • Web関連やjavascriptが好きな人
  • とりあえず何かのハンズオンに参加したい人(私)
本日のはハンズオンのまとめです。

Oracle JETを使うために

NetBeansを入れる

まずはいつものところから環境を作りましょう。今回はNetBeansを入れます。今回は執筆時点で最新の8.2を入れましたが、バージョンは何でもいいです。
後でプラグインを入れます。

NetBeansダウンロード

私の環境ではJavaを入れてないので、リンク先はJavaSEをまるごと入れるインストーラです。
Javaが既に入っている人はそれぞれの環境を使う事もできます。

特にwindowsユーザーが多いと思うので敢えて言うんですが、それぞれの環境にあったインストーラを選択して下さい。
結構間違えて入れて動かない!なんて話を聞きます。よくわからないなら両方ともダウンロードしちゃうっていう手もあります。

NetBeansにJETを入れる

私は既に入れちゃったので若干環境は違いますが…
NetBeans1.png

NetBeans2.png


まずは皆さんの環境で起動したらプラグインをインストールってボタンを押してください。
ボタン、と言われないと良くわからないようなデザインになってるので、文言を追いかけてください。
プラグインをインストール です

その次に、使用可能なプラグインタブでJETとかを検索するとJETサポート~っていうのが出てきます。
私の場合、インストールしちゃったので、インストール済みタブを参照しています。
見落としやすいので気を付けて!

ハンズオン!

教材用のソースコードはこちら
https://github.com/JETs-JP/oraclego-JET

ローカルに持ってきたらそのプロジェクトを開きましょう。NetBeansで追いかけて開こうとすると、oraclejet-appってプロジェクトが開く事が出来ると思います。
教材用のファイルの中にHandsOnTutorial.docxがあるので、それを開けばOKです。
宗教上の理由でdocxを開けない人は宗派を改宗するかgoogleで提供しているdocx開けるサービスを使うか、何かしらでご対応ください。

ちょっと脱線。MS製品の普及率は異常

Microsoft Office Solo高いですけど便利です。
MS系のOfficeツールは国内普及率があまりにも高すぎるんや…
Macユーザーさんはdocxとかelsxとか、どうやって読んでるんですかね?ちょっと気になりました。

やってみた感じ

さすがノウハウが多いオラクルさんと言いますか、ハマる事なくスムーズに進行することができました。
若干ブラウザの挙動が怪しかったりしますが、大体は何とかなる感じです。
クライアント側よりサービス側、サーバーシステム側に色々あったりなど、ちょっとしたデバッグ作業が混じったのもハンズオンあるあるですね!

更にJETを使う

oracleJETのクックブックがありますので、そこから色々できます。
http://oraclejet.org/
http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html

通常で使う場合は正直にgoogleさんにお問い合わせ*1をしてあげるのが良さそうです。

htmlソース側をいい感じに変えるだけで描画が変わるので、今のソースをそのまま使うことができます。
まずはチャート関連を触ってみるのがおススメです。

そうでなくても、cookbookを眺めているだけでも結構楽しいです。
ソースコードは直接画面上からも変更できます。(要oracleの環境イメージ。require.jsの概念)


今回のハンズオンの一番楽しかったところはオラクルのクックブックがすごい、というところでした。

*1 : 検索支援:oracle JET cookbook

OK キャンセル 確認 その他