クリップボードにコピー、、、の覚え書き

 

この記事は2016年5月23日に更新されています。

2015年4月にGoogle Chrome43+などでcommandExec("copy")が使えるようになり、jQueryおよびフラッシュでコピーするためのjQueryプラグインが不要になりました。

クリップボードにコピーという要件

デスクトップやタブレット、スマホを問わず、よく入力する住所やメールアドレスなんかをWEBページにまとめておいて、クリック（もしくはタップ）でクリップボードにコピーします。

結論としては、HTML5やJavaScriptだけでは実現できず、zClipというjQueryプラグインでフラッシュを使うことにしました。

が、もちろん自分も普段メインで使っているiPadやiPhoneではフラッシュは使えませんので、iOSのモバイル端末ではpromptコマンドでコピーしたいテキストを出力し、全選択 ＞ コピーの操作でコピーする、という方法で代用します。

フラッシュが使えるブラウザかどうかは、JavaScriptで判定します。

Demo

 

iOSでフラッシュが使えるブラウザ

iPad2とiPhone5のiOS7でPuffinがフラッシュが使え、タップでコピーできました。promptから全選択 ＞ コピーの操作が面倒なときはiOSでもフラッシュでコピーができます。Safari、Chrome、Mercuryは駄目でしたが、Puffin以外にもフラッシュが使えるブラウザはあるのかな？

Puffin Web Browser Free

• CloudMosa, Inc.
• ユーティリティ
• 無料
• 

Puffin Web Browser

• CloudMosa, Inc.
• ユーティリティ
• ¥300
• 

Flashが使えるかどうかの判定js

ブラウザがフラッシュに対応しているかどうかは、Gistで公開されていたmgngさんのFlashが使えるかどうかの判定jsを使わせていただきました。

返り値が０であればフラッシュが使えない、７以上であれば使えると判定します。

execCommand("copy")は使えなかった！

「javascript clipboard」で検索すると、フェイクで作ったtextareaにコピーしたい値を入れてexecCommandでクリップボードにコピーをするサンプルをいくつか見たのだけど、chromeなどのモダンブラウザではコピーをすることはできませんでした。IE9 on Win7では警告は出てコピーができましたが、主要なブラウザで使えないのでは意味がないので不採用にしました。

追記 2015.04.28

Chrome 43+、IE10+、Opera29+で、execCommand("copy")が使えるようになったようです。が、自分はまだ検証していません。

Cut and Copy Commands（英文）

おわり

フラッシュを使わないでHTML5やJavaScriptだけで実現する方法が結局見つけられなかったのですが、可能だったりするのでしょうか？

デスクトップやモバイル端末でWEBページのテキストをクリックでクリップボードにコピーする、という要件で、最終的に一番いいと思ったのがこの方法でした。

もっといい方法なんかがあったら是非教えてください。

参照サイト

• クリップボードにコピーする機能の実装 | ジェネストリーム開発ブログ
• zClip :: jQuery ZeroClipboard
•  
• テキストをクリップボードにコピーする | tande lab.
• クリップボードにコピー - 素人がプログラミングを勉強していたブログ
•  
• Flashが使えるかどうかの判定js

関連記事

• （続）クリップボードにコピー

検証環境

• Chrome, Safari, Firefox, IE9 on Win7
• Chrome, Safari on MacOS
• Chrome, Safari, Mercury, Puffin on iOS7 - iPad2
• Chrome, Safari, Puffin on iOS7 - iPhone5

easing関数をカスタマイズするには？

easing関数をカスタマイズするには？

Advent Calendar 2012 軽めのjQueryの18日目です。

jQueryには、animate()とそのショートカットである、fadeIn()、fadeOut()、slideUp()、slideDown()などで使うことができるeasing関数があります。

jQueryの標準ではlinearとswingの2種類、jquery.easing.jsのプラグインで拡張すると、easeInQuad、easeOutQuadなどの30種類（jswingを数えると31種類）がよく知られています。

それでは、easing関数をカスタマイズするにはどうすればいいのでしょうか？

例えば、linearをカスタマイズして、イージング処理を2回繰り返すだけのlinear2nd()という関数は以下のようになります。

0.  
1. $.extend($.easing,{
2.    linear2nd: function(status,cur_time,firstNum,changeVal,dur_time){
3.       if(status > 0.5) cur_time-=dur_time/2;
4.       return firstNum + changeVal * (cur_time/=dur_time) * 2;
5.    }
6. });
7.  

easing関数は5つの引数をとることができます。

status	cur_timeをdur_timeで割った、0から1の値がはいります。
cur_time	経過時間（単位ms）
firstNum	スタート時間、初期では常に0になります。
changeVal	変化量、初期では常に1になります。
dur_time	実行時間（単位ms）

デモと、ソースはこちらで確認ができます。 ※ Google Chrome / Safari / Firefoxで動作確認
デモページ
GitHub/Isotake/20121218

おわり

Advent Calenderには今回が初参加です。
軽めのjQueryということで思い切って参加してみました。

それでは、19日目にバトンタッチ！

参照サイト

• BlackFlag
  jQueryアニメーションにイージング（easing）処理をつけるプラグイン
• anything from here
  jquery.js のアニメーションコードの解読 ( 10 ) 番外編 easing関数解読

関連記事

はてなブログのスマホCSSは編集できる？

はてなブログのスマホCSSって編集できる？

カスタム編集したCSSはスマートフォン向け表示では適用されず、 関連しそうな設定項目も管理画面で見つけられなかったのですが、 何か編集する方法ってあるのでしょうか…？

どうしても見つけられなかったもので、 ひとまずJavaScriptでスマートフォン向けCSSを適用することにしました。

0.  
1. <script type="text/javascript">
2.   (function(){
3.     var _path = location.pathname;
4.     if (_path.indexOf('touch') > -1){
5.       document.write('<link rel="stylesheet" href="（スマホ向けCSSのアドレス）">');
6.     }
7.   })();
8. </script>
9.  

はてなブログではスマートフォン向け表示のときは、 URLのパス - location.pathname - の先頭に「/touch」を付けるので、 その条件のときにだけスマートフォン向けCSSを読み込みします。

もちろんユーザーエージェントやディスプレイのサイズで判断しても いいと思いますが、どの条件でスマートフォン向け表示にするかは はてなブログ側の仕様なので、パスで判断するのが無難と思いました。

追記

ここまで書いたところで、はてなブログの公式アカウントさん - @hatenablog - に念のため聞いてみたところ返事をいただき、やはり編集ができないということでした。

@isotake0214 すみません、現在はスマートフォン向けCSSの編集はできません。

— はてなブログ (@hatenablog) 2012年11月6日

おわり

参照サイト

関連記事

FileZillaでFTPsの設定をする

FileZillaでFTPsの設定をする

さくらのVPSのCentOS6.2で、FTPクライアントをFilezillaとして、FTPsで通信をする設定をしました。

下記のような環境で、FFFTPでFTPができていて、httpsでWEBにアクセスできているところからのスタートです。

特にバージョン3.5.3のFilezillaではFTPsが使えない、といった記事が散見されたので、エラー内容と解決方法を含めて覚え書きにしました。

動作環境

• さくらのVPS CentOS6.2
• vsftpd 2.2.2
• FileZilla 3.5.3
   
• FTPがFFFTPなどのクライアントで正常に動作していること
• SSLがインストールされていて、httpsでアクセスできること

vsftpdの設定

vsftpdのコンフィグファイル（例：/etc/vsftpd/vsftpd.conf）に下記のように書き加えます。
rsa_cert_fileとrsa_private_key_fileは、httpsで作成したファイルを指定します。

0. vsftpd.conf
1. ssl_enable=YES
2. rsa_cert_file=（例）/etc/httpd/conf/ssl.crt/server.crt
3. rsa_private_key_file=（例）/etc/httpd/conf/ssl.key/server.key
4. force_local_logins_ssl=YES
5. force_local_data_ssl=YES
6. allow_anon_ssl=NO
7.  

vsftpdの再起動。

1.  
2. service vsftpd restart
3.  

FileZillaの設定

ファイル ＞ サイトマネージャー ＞ 新しいサイトで、Filezillaの設定をします。

ホスト
ポート
Protocol
Encryption
ログオンの種類
ユーザー
パスワード

：（サーバーアドレス）
：（空欄）
：FTP - File Transfer Protocol
：Require explicit FTP over TLS
：通常
：ftpuser
：（ftpuserのパスワード）

 
これ以外の設定は初期のまま、OKボタンで登録。

 

Error: GnuTLS error -12: A TLS fatal alert has been received.

ここまでの設定でFTPサーバーに接続しようとしても、エラーがでて接続できません。

FileZillaのバージョン3.5.3が、「DES-CBC3-SHA」をサポートしていないという原因のようです - 参照先 - 。
vsftpdのコンフィグファイルに下記のように書き加えます。

0. vsftpd.conf
1. （省略）
2. force_local_data_ssl=YES
3. allow_anon_ssl=NO
4. ssl_ciphers=HIGH ← 追記！
5.  

vsftpdの再起動。

1.  
2. service vsftpd restart
3.  

Error: ディレクトリ一覧表示の取得に失敗しました。

再度FTPサーバーに接続を試みます。
今度はログインはできますが、ディレクトリ一覧の取得ができません。

FTPではパッシブモードが正常に動作するのですが、FTPsではそれが動作しないことが原因のようです。これについては、vsftpdでTLSを使う - satospoに詳しく説明されています。
FTPsで使用するポートを固定します。
vsftpdのコンフィグファイルに下記のように書き加えます。

0. vsftpd.conf
1. （省略）
2. allow_anon_ssl=NO
3. ssl_ciphers=HIGH
4. pasv_min_port=40000 ← 追記！
5. pasv_max_port=40100 ← 追記！
6.  

vsftpdの再起動。

1.  
2. service vsftpd restart
3.  

iptablesで、固定したポートの透過を許可します。下記は一般的(？)と思われるシェルスクリプトの一例です。

0. /root/bin/filter
1. #!/bin/sh
2.  
3. /sbin/iptables -F
4. /sbin/iptables -X
5.  
6. /sbin/iptables -P INPUT DROP
7. /sbin/iptables -P OUTPUT ACCEPT
8. /sbin/iptables -P FORWARD DROP
9.  
10. /sbin/iptables -A INPUT -i lo -j ACCEPT
11. /sbin/iptables -A OUTPUT -o lo -j ACCEPT
12.  
13. /sbin/iptables -A INPUT -s 10.0.0.0/8 -j DROP
14. /sbin/iptables -A INPUT -s 172.16.0.0/12 -j DROP
15. /sbin/iptables -A INPUT -s 192.168.0.0/16 -j DROP
16.  
17. /sbin/iptables -A INPUT -p icmp --icmp-type echo-request -j ACCEPT
18.  
19. /sbin/iptables -A INPUT -p tcp --dport 22 -j ACCEPT
20. /sbin/iptables -A INPUT -p tcp --dport 21 -m state --state NEW -j ACCEPT
21. /* ↓ ここ！ */
22. /sbin/iptables -A INPUT -p tcp --dport 40000:40100 -m state --state NEW -j ACCEPT
23. /sbin/iptables -A INPUT -p tcp --dport 80 -j ACCEPT
24. /sbin/iptables -A INPUT -p tcp --dport 443 -j ACCEPT
25.  
26. /sbin/iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
27. /sbin/iptables -A OUTPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
28.  
29. /etc/rc.d/init.d/iptables save
30.  
31. /sbin/service iptables restart
32.  

シェルスクリプトの実行

1.  
2. # /root/bin/filter
3.  

接続できた！！

おわり

以上、FileZillaのFTPsの設定を、てこずった2つのエラーを中心に書きました。

特に2つ目のディレクトリの一覧取得ができないことについて、新しいFileZillaではFTPsが使用できないとする記事が多かったように思えます。ファイアーウォールを設定しないようなテスト環境ではFTPsで使えているのに、ファイアーウォールをきちんと設定しているような環境では使えない、といったことが解決を難しくしていたのかも知れません。

参照サイト

• #7873 (TLS problem - cannot login via TLS in 3.5.3 (3.5.2 fine)) – FileZilla
• アニゲーPCなんでも行こう 自宅サーバーのFTP接続でのエラーについて
• vsftpdでTLSを使う - satospo

関連記事

はてなブログのキーワード自動リンクを消す

はてなブログのキーワード自動リンクを消す

はてなブログのキーワード自動リンクについて、
有料プランではその機能をオフにすることはできますが、無料プランではできません。
無料プランで自動リンクを有効に使うことも選択肢のひとつですが、
どうしても消したいという場合、下記の設定で消すことができました。

もちろん、自動リンクの機能自体をオフにするわけではありません。

キーワード自動リンクのaタグはクラスがkeywordになるので、CSSファイルのkeywordクラスを上書きできる場所に追記します。

0. sample.css
1. a.keyword { //注1
2.   pointer-events: none;
3.   cursor: default;
4.   color: #5A5A5A; //注2
5. }
6.  

注1 環境によって自動リンクを無効にする範囲を、.entry-content a.keyword のように絞ります。

注2 通常aタグは文字カラーを変えているので周囲に合わせるようにします。

おまけ： httpで始まるテキストのリンクを消す

httpで始まるアドレスを書くとリンクが張られてしまいます。

http://www.hatena.ne.jp/

実際に存在するアドレスであればいいですが、ダミーのアドレスを表示してリンクを張りたくない場合もあるかと思います。
この場合は、はてな記法の自動リンク停止記法でリンクを消すことができました。
ダッシュボード ＞ 設定 ＞ 編集モードは「見たままモード」でも消すことができました。

http://www.hatena.ne.jp/

おわり

参照サイト

関連記事

PHPでIPv6かIPv4を表示する

PHPでIPv6かIPv4を表示する

PHPで、IPv6でアクセスされているか、IPv4でアクセスされているかを表示する方法。
インターネット上で紹介されている方法を3つまとめました。

1. VirtualHostで分ける
2. サーバーアドレス $_SERVER['SERVER_ADDR'] で分ける
3. リモートアドレス $_SERVER['REMOTE_ADDR'] で分ける

1. VirtualHostで分ける

にぽたん研究所にも紹介されている、VirtualHostでIPv6とIPv4のサーバーアドレスを分けてリクエストヘッダーに値をセットする方法です。3つの中で一番スマートな感じがします。

0. httpd.conf
1. <VirtualHost 192.168.AAA.BBB:80>
2.     RequestHeader set X-IP-Version 4
3. </VirtualHost>
4. <VirtualHost [2001:e41:AAAA:BBBB::1]:80> ※ [ ] を忘れずに！
5.     RequestHeader set X-IP-Version 6
6. </VirtualHost>
7.  

0. ipv6ipv4.php
1. $ip_family = htmlspecialchars(@$_SERVER["HTTP_X_IP_VERSION"],ENT_QUOTES,'UTF-8');
2. if( $ip_family == 6 ) {
3.     $ipkind = 'ipv6';
4. } elseif( $ip_family == 4 ) {
5.     $ipkind = 'ipv4';
6. }
7.  

2. サーバーアドレス $_SERVER['SERVER_ADDR'] で分ける

サーバーアドレスを$_SERVER['SERVER_ADDR']で取得して、IPv6のサーバーアドレスに一致すればIPv6、IPv4のサーバーアドレスに一致すればIPv4と表示します。$_SERVER['SERVER_ADDR']は2通り、もしくはそれ以上ある場合でもホワイトリストで判別できるはずなのでこれで十分ではないかと思いました。

0. ipv6ipv4.php
1. if ($_SERVER['SERVER_ADDR'] == '2001:e41:AAAA:BBBB::1') {
2.     $ipkind = 'ipv6';
3. } elseif($_SERVER['SERVER_ADDR'] == '192.168.AAA.BBB'){
4.     $ipkind = 'ipv4';
5. }
6.  

3. リモートアドレス $_SERVER['REMOTE_ADDR'] で分ける

リモートアドレスを$_SERVER['REMOTE_ADDR']で取得して、コロンが含まれていればIPv6、ドットが含まれていればIPv4と表示します。リモートアドレスで判別するサンプルでは、正規表現でIPv6アドレスの形式に一致しているかで判別するサンプルをいくつか見ましたが、コロンかドットの条件分けで十分ではないかと思いました。

0. ipv6ipv4.php
1. $count_semi = substr_count($_SERVER['REMOTE_ADDR'], ':');
2. $count_dot = substr_count($_SERVER['REMOTE_ADDR'], '.');
3. if ($count_semi > 0 && $count_dot == 0) {
4.     $ipkind = 'ipv6';
5. } elseif($count_semi == 0 && $count_dot > 0){
6.     $ipkind = 'ipv4';
7. }
8.  

おわり

参照サイト

• さくらの6rd（トライアル）で参考にしたまとめ

関連記事

• ウェブサイトをIPv6対応にするには？

ウェブサイトをIPv6対応にするには？

World IPv6 Launch

公開しているウェブサイトをIPv6に対応にするには…？
IPv6で通信できない場合にIPv4にフォールバックするのは…？
などなど、ウェブサイトのIPv6対応について、
自分がよく分からなかったこと4点を試してみました。

WEBサーバーをIPv6対応にする

まずWEBサーバーがIPv6に対応していなければいけません。さくらインターネットがトライアル提供している6rd方式で、IPv6通信をできるようにしました。

IPv4環境でIPv6サイトにアクセスする

そもそも、IPv6で通信ができない環境では試験もできません。IPv6対応したさくらのVPSサーバーを経由して、IPv6サイトを表示できるようにしました。

独自ドメインをIPv6対応にする

ドメインサービスの設定で、Aレコードに加えてAAAAレコードを登録します。IPv6に対応しているドメインサービスは限られていますが、今回はさくらのドメインでAAAAレコードの登録をしました。

通信がIPv6かIPv4かを表示する

ユーザーがIPv6でアクセスしているか、IPv4でアクセスしているかを、ウェブサイトに表示します。PHPでサーバーアドレスを取得して判別しました。

話題としては少し古いのですが、2012年6月6日のWorld IPv6 Launchに合わせて、4月から7月にかけてテストをしてきたことの覚え書きです。

WEBサーバーをIPv6対応にする

さくらインターネットのIPv6接続サービス、さくらの6rd（トライアル）でサーバーをIPv6対応にします。各OSにより設定方法は異なるようですが、CentOSの場合は6rdに対応していないので、カーネルとiprouteにパッチをあてます。

さくらの6rd（トライアル）＞ 6rd設定方法（CentOS5.5編）
さくらの6rd（トライアル）＞ 6rd設定方法（CentOS6.2編）

9月16日の時点では、上記で案内されている方法では6rdは利用できないはずです。標準でインストールされるのがCentOS6.3にアップされていたり、カスタムでインストールできるCentOS5.5のカーネルとiprouteパッケージのバージョンが上がり、RPMパッケージがインストールできない、という理由です。

ipv6.google.comやOCNのIPv6通信確認サイトにpingがとおれば設定完了です。

1.  
2. /* ipv6.google.com にping試験 */ ping6の「6」を忘れずに！
3. # ping6 2404:6800:4004:805::1011
4.  
5. /* www.ocnipv6.jp にping試験 */ ping6の「6」を忘れずに！
6. # ping6 2001:218:2001:3005::7f
7.  

以下、さくらのVPSサーバーのIPv4アドレスを、192.168.AAA.BBB、6rdで指定されるIPv6アドレスを、2001:e41:AAAA:BBBB::1、とします。

IPv4環境でIPv6サイトにアクセスする

自宅の固定回線のJCNはIPv6に未対応で、モバイル回線のXiは、Xi自体は対応しているのですが、モバイルルータのL-09Cが未対応ということで、自分のインターネット環境ではIPv6サイトに接続できませんでした。

そこでSSHを使って、IPv6対応したさくらのVPSサーバーを経由してIPv6サイトを表示させます。SSHクライアントとしてPuTTYと、FirefoxのSOCKSプロキシの機能を利用します。
WorldIPv6Dayという事で、
さくらのVPSを使ってIPv4、IPv6両方のサイトを閲覧する方法。

この時点で、下記のようなIPv6サイトを見ることができます。
ipv6.google.com
OCNのIPv6通信確認サイト

さらにこの時点で、さくらのVPSサーバーにおいたテストファイルにIPv6アドレス直打ちでページの表示ができるはずです。
（例）http://[2001:e41:AAAA:BBBB::1]/test.html ※IPv6アドレスの直打ちでは[ ]を忘れずに！

独自ドメインをIPv6対応にする

IPv6アドレス直打ちで表示できるようになったので、独自ドメインでも表示できるようにします。

今回はさくらのドメインで、バーチャルホストのアドレス ipv6.sample.com にAAAAレコードとAレコードを登録することにしました。

エントリ名
種別
値
DNSチェック
TTLの指定：

：ipv6
：IPアドレス(A)
：192.168.AAA.BBB
：する
：チェック無し

 

エントリ名
種別
値
DNSチェック
TTLの指定

：ipv6
：IPv6アドレス(AAAA)
：2001:e41:AAAA:BBBB::1
：する
：チェック無し

 

以上の設定で、名前解決のときにAAAAレコードとAレコードが払いだされ、IPv6通信ができるときはIPv6で、できないときはフォールバックしてIPv4で通信をします。

なお、AAAAレコードとAレコードを両方受け取ったときにどちらを優先するかはOSの設定にしたがい、Windowsでは初期でIPv6が優先になっています。

通信がIPv6かIPv4かを表示する

IPv6でアクセスされているか、IPv4でアクセスされているかをPHPで判別します。インターネット上で紹介されているいくつかの方法のうち、サーバーアドレスで分けるのは下記のようになります。IPv6かIPv4の判別ってどうすればいいんだろうと思っていたけど、ただこれだけでした。

0. ipv6ipv4.php
1. if ($_SERVER['SERVER_ADDR'] == '2001:e41:AAAA:BBBB::1') {
2.     $ipkind = 'ipv6';
3. } elseif($_SERVER['SERVER_ADDR'] == '192.168.AAA.BBB'){
4.     $ipkind = 'ipv4';
5. }
6.  

おわり

以上、IPv6に関して4点をまとめましたが、ご存じの通り、日本はIPv6で通信できる環境が十分ではなく、現時点でウェブサイトをIPv6対応で運用することにはフォールバックの問題があり、注意が必要です。

実際の運用にあたっては、セキュリティ関連などに取り組まなければいけないはずですが、今回はここまで。

参照サイト

• さくらの6rd（トライアル）で参考にしたまとめ

関連記事

• PHPでIPv6かIPv4を表示する