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 環境変数の先頭に文字列が追加されるので、これも知ってる人はいいですが、知らない場合は後で『あれ?』と思うかもしれません。 デプロイ エラーが出る可能性があるので、その場合はしばらくしてから再度実行が必要です。
posted by lightbox at 2016-08-21 23:01 | 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 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2016年08月08日


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



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

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

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



posted by lightbox at 2016-08-08 18:57 | 2 Android Studio | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり