SQLの窓

2016年08月21日


Google ドライブの WEBホスティングが無くなったので、Google の Firebase をとりあえず使う方法

もう、【2016/8/31で廃止】であることは解っていたのですが、Google からメールが届きました。

IMPORTANT: Drive web hosting is shutting down

We announced last year that we're deprecating web hosting in Google Drive for users and developers. Our records show that you might have used this feature to publish a webpage or serve other web assets.

On Aug 31, 2016, we will discontinue serving content via googledrive.com/host/[id] and the webpages will not be accessible anymore.

As an alternative to web hosting in Drive, we recommend:

Blogger−An easy and free way to host websites.
Firebase Hosting− An alternative if you're using the web-hosting feature to serve static webpages with items on Drive.
で、試してみました。確かに普通に使えます。インターネットの情報はそれなりにありますが、無料プランの説明はちょっと古いものしか見つかりませんでした。結論から言って、『無料プランで独自ドメインが使用できます』 技術者が使用するのであれば、DB や Android でPush 通知などがすぐいろいろ試してみれると思うので、特に問題は無いですが(ドキュメントが英語というのはいつものことですが)、一般の人にはちょっとハードルが高いです。ただ、ホスティングのみをする目的で、Node.js をインストールしてコマンドプロンプトを使ってデプロイするという事は、FTP クライアント使うのとそう違わないのかなぁ・・という気もします。それどころか、ローカルに http://localhost:5000 のウェブサーバを使用して表示を確かめる事ができるので、そんなに悪くも無いのかなぁとも思いました。 インストール等手順 二つのアカウントと、3つのPC から試しました。これでいけると思います。画像がやたらと多くなるので、NAVER のシステムを使ってまとめました。 Firebase の使い方 / Google の 1 GB まで無料のホスティングサービス プロジェクトの作成もコマンドプロンプトからできるようですが、プロジェクトはブラウザから作成したほうがいいでしょう。そして、ブラウザであらかじめログインしておく事になるので、そのブラウザは規定のブラウザである必要があると思います。ログイン時にたぶん、規定のブラウザを使っていると思われるからです。 カスタムドメインは、自分の管理するドメイン側で、二つ TXT レコードを書き込む必要があります。これは、以前から Google が使用していた方法のようです。ただ、説明としてはサブドメインが使えるとあるのですが、自分がゾーン編集できるのはメインのドメインのみなので、試してはいません。 入力したとたん、TXT レコード が表示されて、そのエントリをすぐに削除できませんでした。仕方ないので一晩明けて見に行ったら『削除可能』になっていました。 コマンドプロンプトについて コマンドプロンプトに慣れている人にはいまさらですが、『簡易編集モード』に変更しておくと、コピーペーストが楽になります。ただ、インストール場所をデフォルトの Program Files にした場合、昨今変更できないので、『簡易編集モード』へ変更する為にデスクトップにショートカットを作成してから『簡易編集モード』に変更する事になります。 ▼ Windows10 の設定画面 また、Node.js 用にインストール時に Path 環境変数の先頭に文字列が追加されるので、これも知ってる人はいいですが、知らない場合は後で『あれ?』と思うかもしれません。 デプロイ エラーが出る可能性があるので、その場合はしばらくしてから再度実行が必要です。
【Googleの最新記事】
posted by lightbox at 2016-08-21 23:01 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2016年08月12日


clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。

Google Chrome の Flash 完全排除に対応 : JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項 では、具体的にその方法を自分で用意して使用しています。その方法のほうが、メンテナンスし易いと思う場合はそちらを使えばいいと思いますが、簡単に実装したいのならばこちらの方法です。

実装コード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
var clipbpardText = "";

$(function(){
	var clipboard = 
	new Clipboard('.clipboard_btn' , {
		text: function(trigger) {
        		return clipbpardText;
		}
	});

	clipboard.on('success', function(e) {
	    alert("クリップボードにコピーしました");
	});

	$("#button1").on("click", function(){
		var work = prompt("入力値をクリップボードにセット")
		clipbpardText = work;
	})
});
</script>
<button type="button" class="clipboard_btn" id="button1">実行</button>

clipboard.on は特に必要ではありませんが、テストする場合は解り易くなると思います。

まず、イベントの開始となるクリックイベントでコピーさせたい文字列をグローバル変数である clipbpardTextにセットします。

その後、new Clipboard で定義した text に対するファンクションが起動されて、コピーさせたい文字列(ここでは clipbpardText)を return するだけで実装完了です。


この処理は内部のソースコードを読むとたぶん以下の部分だと思われます
ClipboardAction.prototype.selectFake = function selectFake() {
            var _this = this;

            var isRTL = document.documentElement.getAttribute('dir') == 'rtl';

            this.removeFake();

            this.fakeHandlerCallback = function () {
                return _this.removeFake();
            };
            this.fakeHandler = document.body.addEventListener('click', this.fakeHandlerCallback) || true;

            this.fakeElem = document.createElement('textarea');
            // Prevent zooming on iOS
            this.fakeElem.style.fontSize = '12pt';
            // Reset box model
            this.fakeElem.style.border = '0';
            this.fakeElem.style.padding = '0';
            this.fakeElem.style.margin = '0';
            // Move element out of screen horizontally
            this.fakeElem.style.position = 'absolute';
            this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
            // Move element to the same position vertically
            this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
            this.fakeElem.setAttribute('readonly', '');
            this.fakeElem.value = this.text;

            document.body.appendChild(this.fakeElem);

            this.selectedText = (0, _select2.default)(this.fakeElem);
            this.copyText();
        };
textarea を作成して、-9999px で画面から隠しているようです。




posted by lightbox at 2016-08-12 20:20 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2016年08月10日


Google Chrome の Flash 完全排除に対応 : JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項

世の中の一般的な使用方法は、オリジナルサイトの概要と大差無いようですが、実際本当に使いたい環境を持っている人にとっては説明不十分です。

バージョン 1.5.4 までと 1.5.5 からでは仕様がすこし違う

問題は、element.focus(); ですが、これですと環境によってはコピー対象となるエレメントの位置までスクロールしてしまうので(実際このブログではしてしまった)ので、良く解らずに 1.5.4 以前を使用している場合は、バージョンアップしないほうがいいです。また、以下のソースコードからも解るように、focus() が実行されるのは、INPUT か TEXTAREA か その他の要素で contenteditable 属性を持っている場合だけなので、普通に DIV ならば focus() が実行される事はありません。
/*!
 * clipboard.js v1.5.12
 * https://zenorocha.github.io/clipboard.js
 *
 * Licensed MIT c Zeno Rocha
 */
    if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
        element.focus();
        element.setSelectionRange(0, element.value.length);

        selectedText = element.value;
    }
    else {
        if (element.hasAttribute('contenteditable')) {
            element.focus();
        }

        var selection = window.getSelection();
        var range = document.createRange();

        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);

        selectedText = selection.toString();
    }

    return selectedText;
この SyntaxHighlighter の右上のツールバーにある copy ボタンは、Clipboard.js を組み込んで実装しました。

実装

このような事をふまえて一般的な実装は以下のようになります
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
$(function(){
	var clipboard = new Clipboard('.clipboard_element');
	clipboard.on('success', function(e) {
	    alert("クリップボードにコピーしました");
	});
	$(".action_btn").on("click", function(){
		var work = prompt("入力値をクリップボードにセット")
		$("#clipboard").text( work );
	})
});
</script>
<div class="clipboard_element" data-clipboard-target="#clipboard">
	<button type="button" class="action_btn">実行</button>
</div>
<div id="clipboard" style='position:absolute;left:-1000px;white-space:pre;'></div>
このソースコードには、いくつか重要な部分が存在します。

注意事項

1) ページにひとつだけ、クリップボード転送用の要素を DIV で作成する
   (body 要素直下でいいと思います)

2) DIV 内に改行やスペースを反映させる為に white-space:pre を設定する

3) ページ上から隠す為に、position:absolute;left:-1000px を設定する
   (クリップボートへコピーする為に選択する必要があるので、非表示では動作しません)

4) クリックイベントは、ボタンである必要は無く、どのような要素でも良い

5) ボタンをクリックした時に必要な文字列を DIV に転送した後、DIV のクリックイベントが発生
実際の Clipboard.js のイベントは、ページ上のクリックイベントが全て終了してから発生するので、この順序である必要は無いのですが、仕様変更等あった場合にそなえてこの順序が良いと思います。


追記

ここで行っているような転送用のエリアを作成した処理を半自動でやるのがどうやら Advanced Options のあたりのようなのですが、ソース読むといろいろ scroll とかやってるので、環境によってはやはり問題がでるかもしれません。


Google、ChromeでのFlashブロックをさらに推進、12月にHTML5をデフォルトに

関連する記事

clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。



posted by lightbox at 2016-08-10 21:54 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2016年08月08日


Android Studio で理解不能なエラーが出た時の対処方法 : Invalidate Caches / Restart



具体的には、Activity に当然あるはずのメソッドが『存在しません』等表示されて、赤い線でエラーが発生したりします。

その他にも、ありえないエラー等あった場合は、メニューから『Invalidate Caches / Restart』を実行します

復旧に数分かかる結構長い処理になりますが、過去4,5回発生したトラブルは皆この処理で解決しています。



posted by lightbox at 2016-08-08 18:57 | Comment(0) | Android Studio 2 | このブログの読者になる | 更新情報をチェックする

2016年08月06日


【2016/8/31で廃止】Google ドライブに HTML を置いて WEBページが作れる詳細 / Drive Notepad / Neutron Drive

Google ドライブにおけるウェブ ホスティング機能の廃止について

この機能は、Google の方針により、2016 年 8 月 31 日 で利用ができなくなります



▼ 以下古い記録になります
-----------------------------------------------------------------------------
こちらで利用方法を説明しています
SDK 的には、『webViewLink』という仮想ディレクトリによる公開
( access-control-allow-origin:* を返してくれるので ajax で取得できます )

https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/base.htm
( https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE 部分が webViewLink )

関連する記事

Google ドライブの公開ページと管理ページを行ったり来たりする為のブックマークレット

▼ 昔は無かったのですが、現在ページ下に広告が出てしまいます。

Google+ のコメントを読んでいたら、Google ドライブの仮想ディレクトリの別名を作ってくれるサービスがある事が解りました。どの程度の信頼性があるか解りませんが、とりあえず作ってみました。

http://gdriv.es/winofsql/base.htm
( https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/base.htm と同じ )

別名は早い者勝ち。こちらからです。

からくりは、ただのフレームです。ですから、アイコンの表示は gdriv.es のものになります。
正直言って、Google ドライブそのものがそれほど使いやすいものでは無いので、『できる』という事は間違い無いんですが、実際運用しようとなるといろいろあるので『面倒』な部分もあります。 例えば、同名ファイルのアップロードでは、同じファイルがもう一つ作成されますが、HTML 内よりそのファイルを参照していた場合参照できなくなります。 ですから、テキストデータの更新はオンラインで直接行う必要があるのですが、そのような事を実現するには、Google Chrome 拡張の Drive Notepad が必要になります( 現在他に選択肢がありません ) (重要) 新規作成時の拡張子でファイルの意味( MIME ) が決定してしまうようなので、注意して下さい( 拡張子変更しても変わりません )
追記 : ※ Google+ のコメントより、Neutron Drive という高性能なエディタがある事を知りました(但し、3週間の無料のトライアルで本来は年間3ドルの有料です。( フリーになっていました ) しかし、ツリーで管理できて、さらにテキスト毎にタブになるのでその価値はあります。)

It's free! However, if you would like to fund further development feel free to donate.
また、ファイルを右クリックしてホスティングされている URL で開いてくれるのが便利です 今回再確認したら、2013年の夏に FTP の対応を済ましていたようです。ただ、高性能のわりにユーザ数が少ないのは、当初有料にしていた影響なのか、内容が開発者向きなのかどちらかが理由では無いかと思っています。 ※ FTP は、有償のプロアカウントで使えるようです(詳しく調べて無いので詳細は不明です) ちょっと使ってみると自動保存である事が解るので、むやみにネットワークを混雑させない為に Auto Save のチェックは外しておいたほうがいいと思います。 以上はどこからでも使えるという運用ですが、自宅のみで使うのならば 『PC 用 Google ドライブ』をインストールすればほんの少しのタイムラグで普通に編集できます ただ、同期する為に PC のディスク容量とネットのトラフィックを多少犠牲にしなくてはいけません。また、個人 PC 以外でインストールするのは良くありません。
( Drive Notepad / ユーティリティカテゴリにあります ) しかし、この拡張アプリ(Drive Notepad)はかなり前から使っていますが、PC上で使う一般的なテキストエディタに比べるとまだまだ問題を抱えています。少なくとも現時点では、『作成されたファイルがルートにしか保存されない』という問題を確認しています。ですから、後から目的のフォルダへ移動処理を行わないといけません( ドラッグによる移動は可能です ) 現在そのような不具合はありません 以上を前提に、『Drive Notepad』を使って運用するという手順が以下のようになります。 ファイルのアップロード オンラインで更新を行うのは、仕方の無い場合のみという方向で、最初に HTML、CSS、画像等を用意してローカルの PC で動作確認を終えておきます。そして、ある程度公開可能になってからそのセットを Google ドライブのフォルダにアップロードします。 フォルダは、共有機能で『ウェブ上で一般公開』にする必要があります フォルダの作成 ウェブ上で一般公開 ※ フォルダを共有しないと公開できません 公開 URL の取得
※ 現在さらに長いサブドメインにリダイレクトされます

https://googledrive.com/host/xxxxxxxxxxxxxxxxxxxxxxx
▲ xxxxxxxxxxxxxxxxxxxxxxx の位置に、自分のアカウントで開いた時にアドレスバーに表示される id を設定してアドレスバーにセットして表示すると、WEB ページの仮想ディレクトリが表示されます。

https://drive.google.com/?authuser=0#folders/長いid文字列


もうちょっと具体的に 少し前は、Google ドライブビュアーというアプリが標準であって、HTML から使えたのですが、今はブックマークレットを使用するか、Neutron Drive を使用して『View File』を実行するといいと思います。 フォルダの中のファイル https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/base.htm と言う URL になっている場合、0B9Jymqpro6gSVlB5Wm52U29wTlE 部分がこのフォルダにあたるので、同じフォルダの中にあるファイルを直接参照する場合は、例えばこのようにします。 さらに、フォルダ内のフォルダは階層で参照できますが、フォルダには全て ID があるので、それで直接参照しなおすと、URL は短くなります。 このようにして、必要なファイルをフォルダ内にアップロードして、HTML 内では直接参照すれば良いのですが、同名ファイルが複数あると参照できなくなるので注意して下さい。 tool.css と img.jpg は同じフォルダにあります。http://winofsql.jp/WinOfSql.ico は、アイコンの指定を外部ファイルで行っていますが、正しく動作しています。 Drive Notepad は、UTF-8 しか対応していないので、HTML 内の charset 指定は UTF-8 で行います。 別ドメインの JavaScript 最初にテストしたのですが、動きませんでした。画像を外部から参照は可能でしたが、開発者ツールでは警告のようなものが表示されていました。 『The page at https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/base.htm displayed insecure content from http://別ドメイン/ファイル名.』 これは、https から http でアクセスした為ブロックされてしまっています。こんな経験は https のサイトを運用していないので解りませんよね・・・ 最後に Google なんで、突然(こっそり)仕様変更があったりや拡張アプリが動かなくなったり( 実際ありました )するので、Google ドライブはあまり一般ユーザ向けのサービスではありません。 実際問題、Google ドライブ向けの拡張アプリは使えるものは数少なく、日本語のものは当分手に入らないものと思います。仕様を調べてもさっぱり解らなかったりするのですが、現状使えているものが使えなくなる事は考えにくいので、このホスティング機能とはうまく付き合って有意義に利用すべきだと思います。 Google+ のコメントの前半は、PHP や MySQL が使いたいとか結構好きな事を言ってる人が居ました。後半は、いくつかの問題点やバグのような報告ですが、だいたいにおいてここに書いてある事で包括していると思います。 開発者向けのドキュメント Publish Website Conten : Google Drive SDK 正式発表は、Google+ のこのエントリ( 2/6 )。SDK の更新日付は 1/31 でした。 ▼ 英文のあちらの記事 Google Drive to support simple website publishing
posted by lightbox at 2016-08-06 14:43 | Google | このブログの読者になる | 更新情報をチェックする



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール