2019-07-19

jsdo.itがいつのまにか死んでいた

最近HTML5実力テストをやり直したくて何回かアクセスしてたんですけど
全然表示できませんでした

TOPはまともに表示されるときもあったけれど、ユーザーページがダメだったり

データサルベージしなきゃなあと思っていたのですが
とうとうTOPすらエラー画面になってしまった

SVG GirlをIE9で眺めたり
某MinecraftのNotchが降臨して祭りになったり
HTML5実力テストさせてくれたり
すごいしょぼい椅子と机の高さ計算ツールなのに166kのPVがついたり
楽しかった

競合サービスがいっぱいあるので乗り換えは容易だけど
悲しいですね

Googleのキャッシュが取れるうちに残したいコードだけcodepenに移植しようと思いました

2018-10-20

Xperia X Performance SOV33をAndroid6.0から8.0にメジャーアップデートしたらバッテリー消費がすごく激しくなったので初期化して直した

経緯

白ロムのロック解除制限前に購入したSOV33をUQmobileで運用してから半年ちょっと経過しました。

ずっとAndroid6.0で使っていたのですが、8.0も配信されていることだしゲームがちょっと早くなったりしないかな？という気持ちで唐突に6.0→7.0→8.0とアップデートをかけました。

そして起こった症状は朝充電100％で家を出て会社に着くころにはバッテリーが85％に減っているというバッテリー消耗激しすぎる問題。

XperiaをMVNO運用するときはCPA接続とかいうのを使います。

6.0のときはWi-Fi切断時は「CPA接続：接続しました」という通知が出てたけれど、8.0にしてからは「CPA接続：接続なし」になっている。
しかしLTEは使える。

設定からバッテリー＞詳細設定で電池を消費してるアプリを見ると一番は「モバイルネットワークスタンバイ」になってました。

これは格安SIMを使うときにSMSがないSIMカードを使うと起こっていたセルスタンバイ問題ではないかとあたりをつけましたが、SMSつきのカードを使っているんですね。

もうどうしようもないな、と思い切って初期化することにしました。

やったこと

二段階認証系アプリ（VIPAccess,Google認証システム）を使っているアカウントでの認証解除
→先に解除しておかないと初期化したあとログインできなくなって死ぬ。
写真動画のバックアップ
アプリのバックアップ
→設定＞システム＞バックアップ
からGoogleドライブへのバックアップをONにして一晩Wi-Fiで置いといた。
インストールアプリの履歴や電話帳なんかはこれだけでよかった。
LINEのトーク履歴のバックアップ
→LINE>設定＞トーク＞トーク履歴のバックアップ・復元
でこれもGoogleドライブにバックアップした。便利になった。
ゲームやアプリのアカウント引継ぎコード発行
→ゲーム一杯やってる人は大変そう。少なくてよかった。
アカウントのログアウト
→念のためAndroidでログインしてるアカウント認証全部削除した。

最近は全部Googleドライブに入れてしまえるので便利だなー。

あとはなくなっても死にはしないと思ったのでどきどきしながらシステム＞リセットからデータの初期化をしました。

初期化したらあとはGoogleアカウントログインしてバックアップから復元しては各種アカウント・アプリにログインしつづけるだけで元の状態に戻りました。
といっても半日くらいかかった。しんどい。
おかげでCPA接続も接続表示になったり電池持ちもとってもよくなりました。
朝100％から帰宅しても電池50％残っています。安心。

結論

やっぱ初期化。
メジャーアップデートしたら初期化は必須。

8.0にしたらChromeがIDパスワードをぐいぐい吸い上げるようになったのでログイン関係はとても楽になりました。
しかしGoogleへの依存が激しすぎて怖いレベル。なくなったら生きていけない。
とりあえずこのままSOV33であと2年くらい生き延びたいです。

2017-08-15

アクセシビリティ対応済みのドロワーメニュー「hiraku.js」

コンテンツが多いとメガメニューやドロップダウンメニューが使われることが多いですが

アクセシビリティとかスマホ向けの処理を分けたりなどが必要になります

スマホでよく使われるドロワーメニューならパソコンもスマホも同じ処理でいけるので

探したところ、アクセシビリティ対応をあげているjQuery プラグイン hiraku.jsにたどり着きました

www.appleple.com

オフキャバスメニューとも言うそうです。初めて知りました。

キーボードでの操作も可能、ボタンにはスクリーンリーダー向けのテキストも挿入されていました。

アニメーション部分はCSS3での動作になるので、コンテンツのスライドを止めたり左開き・右開きなどの処理もほぼCSSで調整できそうでした。

ただ、「オフキャンバスメニュー開閉時に Body 自体は固定する」処理を行った際、メニューを閉じる際にFirefoxで右スクロールバーが閉じる瞬間消え、完全に閉じたら復活するので画面がカクカクする問題に遭遇しました。

この手の処理だとhtml { overflow-y:auto; } を入れて常にスクロールバーを表示させて対処することが多いのですが、こちらのスクリプトはコンテンツをスクロールさせないようにbodyにheightとネガティブのmargin-topが入っていたので、コンテンツが切れてしまうという事態になりました。

とりあえずhiraku.js 138行目の$('body').css({ width: '', height: '' });を145行目scrollToの上に入れることにより、カクカクを回避することが可能でした。

設定も簡単で今後アクセシビリティへの対応を求められることも増えそうなので、是非これからも使わせていただきたいスクリプトでした。

ありがとうございます。

2017-05-30

Google ChromeでCSSアニメーションを使っている要素の中にYoutubeを埋め込むと、全画面（フルスクリーン）にできない

stackoverflow.com

animation-fill-mode　が none 以外になっていると

その要素の中にしかYoutube動画が拡大されない

CSSに以下を記述することで回避できました

:-webkit-full-screen-ancestor:not(iframe) {
  -webkit-animation-fill-mode: none !important;
  -moz-animation-fill-mode: none !important;
  -ms-animation-fill-mode: none !important;
  -o-animation-fill-mode: none !important;
  animation-fill-mode: none !important;
}

2016-11-17

jQueryプラグインjquery.inviewで要素再表示時にアニメーションしない

LazyLoad（画像の遅延読み込み）みたいな表示をしたいということで

表示エリアの判定が楽そうなので、jquery.inview.jsを使用してみた

github.com

今回は表示する要素をcheckboxで選択できるようにする必要があり、表示が変わったらその度にinviewで上からパラパラフェードインしてきてほしかった

しかしそのままだと、一度表示されたことのある部分が、非表示のままになった。

スクロールして戻ってきたら表示される。

修正したのが以下

どうも一度表示した要素にはdata-inview="true"が入っているということが分かったので、表示リセット時にdata('inview', false)を設定すると、再表示した時にもうまくアニメーションしてくれた

チェック外した時の挙動が少しおかしいがまた直す

2016-06-03

コーディングしたら構文チェックをしよう。Firefoxアドオン「Html Validator」の紹介。

構文チェックはとても大切

HTMLコーディングをしたら誰でもやったことがあると思われるHTMLの構文エラー

<div class="section">
    <h2>ほげほげ</h2>
    <p>ふがふが</p>
</div>
<div class="section">
    <h2>ほげほげ</h2>
    <p>ふがふが</p>
<!-- divの閉じタグ一個無い -->

構文チェックを行えばエラー箇所だけハイライトしてくれてすぐ直せます。
有名なのは以下のW3Cのエラーチェックサービスかと思います。

validator.w3.org

しかしこのサービスは1ページづつしか構文チェックできないし、ローカルのファイルは
ソースをテキストエリアに張り付けなきゃいけなかったりで面倒です。

Firefoxのアドオンを入れる

「HTML Validator」というFirefoxのアドオンは、ソースコードを表示（Ctrl+U）すると、ソースコードの下部にエラーチェック結果を表示してくれます。

f:id:teffet:20160603171839p:plain

昔はソースコードを開くだけでよかったのですが、現時点（2016/06/03）のバージョンではソースコードの画面でもう一度Ctrl+Uを押さないと表示されません。
それでもエラーチェックしたいソースを開く→Ctrl+Uを押す
だけでエラーチェックしてくれる、ローカルのHTMLでも問題なし。

アドオンの形式が変わってChromeと同じ形式になる問題とかいろいろ言われていますが、どうかこのまま開発を続けてほしいと思っているアドオンです。

addons.mozilla.org

2016-05-17

jQuery DataTablesでソート順を初期化したい

jQuery DataTables

https://datatables.net/

Tableをソートしたり検索したりしてくれるにくいやつ
thをクリックするとソートしてくれるけど
ASCとDESCの切り替えだけで、初期値に戻してくれない。
初期表示時のソート無効は、

 "order": []

でいける

やりたかったのは、昇順→降順→初期値
で三回クリックでリセットしたかった

探したところ

公式フォーラムを見ても該当しそうなコードはなかった。

ヒントあった

https://datatables.net/plug-ins/api/order.neutral%28%29

開発者っぽい人が並び順を初期値に戻す拡張機能を作っていた

$.fn.dataTable.Api.register( 'order.neutral()', function () {
    return this.iterator( 'table', function ( s ) {
        s.aaSorting.length = 0;
        s.aiDisplay.sort( function (a,b) {
            return a-b;
        } );
        s.aiDisplayMaster.sort( function (a,b) {
            return a-b;
        } );
    } );
} );

最終的なコード

var descParam=false;
var oTable = $('#dataTable').DataTable({
    "order": []
});
$('#dataTable').on( 'order.dt', function () {
    var order = oTable.order();
    if(order.length > 0){
        if(order[0][1]=='desc') {
            descParam=true;
        }else if(order[0][1]=='asc'&&descParam==true){
            descParam = false;
            oTable.order.neutral().draw();
        }else{
            descParam=false;
        }
        
    }
} );

on('order.dt')でなんか並び順変更してるイベントを参照できるっぽい
order[0][1]にdescとかascとか入るからdescの時に変数trueにして次ascになった時に変数trueだったら
並び順初期化するfuntion呼んでdraw()してテーブルに反映すると
やりたかったことが実装できた