月別アーカイブ: 2014年12月

localStorage

二年近く前のネタだけどこんなのを見つけた。

世界が熱狂する「100万のタマゴ」アプリ 日本の個人開発者のアプリが620万DLを達成 | 【EXドロイド(エックスドロイド)】

これならスマートフォン向け Web アプリで作れそう。
しかしパソコン対応なんかにしたらネクラでキモチワルイ奴がスクリプトでアッサリ百万突破してドヤッ!てやるのが目に見える…
まあそれは別の話として。

ゲーム再開用に行うタップ回数の保持は当然ローカルストレージとなるわけで。
スマートフォンのブラウザなら必ず実装しているので使わない手はない。
問題はそのストレージ内と変数値の同期をいつどう行うか。

ページを閉じた時を検知して変数の整数値を保存が一番確実なのだが
window.onbeforeunload – Web API インターフェイス | MDN
これ iPhone で使えなかった。

サイトの後処理にはonpagehideを使う – 読み書きプログラミング ブログ

onpagehide じゃ環境依存になってしまうようだ。
やはり値変更毎に localStorage へ保存するしか確実な手段は無さそう。
しかし[ピアノ打ち]とかされた場合にストレージへの同期は追い付くのかな?

iOSのlocalStorageは非同期でディスクに保存されるっぽい – Qiita

なんてページを発見。
自動的に非同期になるなら何も問題無さそう、コードを書いて実験だ。
毎度のようにスマートフォンかエミュレートでしか動きません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タップした数を記憶する</title>
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<style>
body {
    -webkit-text-size-adjust: 100%;
}
</style>
<script type="text/javascript"><!--

    var count = 0;

    var writeText = function() {        
        var num = 1000000 - count;
        var out = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
        document.getElementById("ID_TEXT").innerHTML = out;
    }
    // Event Handler
    var onTouchEnd = function() {
        if (count < 1000000) {
            count += 1;
            localStorage.setItem("count", count);
            writeText();
        }
    }
    // Connect
    var init = function() {
        if (window.TouchEvent) {
            var tap = document.getElementById("ID_TAP");
            tap.addEventListener("touchend",onTouchEnd);
        }
        /* can not iPhone
        window.onbeforeunload = function(e) {
            localStorage.setItem("count", count);
            return null;
        );*/
        if (localStorage.getItem("count") != null) {
            count = Number(localStorage.getItem("count"));
        };
        writeText();
    }
    //-->
</script>

</head>
<body onLoad="init()">

<div id="ID_TEXT" style="font-size:48pt">1,000,000</div>
<div id="ID_TAP" style="font-size:96pt">Tap!</div>
<p><a href=".">Back</a></p>
</body>
</html>

タップした数を記憶する

IMG_0097

これだけだと本当につまらないアプリです。
卵がちょっぴりづつ割れていくみたいな演出があると先が気になるってことか。
メモしとこ。

CSS3 FlexBox

本サイトを iPhone 対応にしたしたのは随分前だがスカスカのまま放置。

site_old

Windows をまったく使っていないのでもう Windows アプリの公開をヤメる。
するともっとスカスカに、いいかげんに隙間を埋める感じにしたい。

スマートフォン(以下スマホ)を考慮するなら やはり CSS3 の FlexBox が一番だよな。
ユーザーエージェントで CSS を振り分けるほど豪華なコンテンツがあるならまだしも。

CSS flexible box の利用 – Web developer guide | MDN

tips 毎にブロックを作って横一列に並べ横幅いっぱいになったら改行。
そうすればスマホでハミ出さないし隙間も埋まる。

MDN のコードを参考に iPhone Safari 対策を入れてテスト。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
<title>FlexBox Test</title>
<style>
body {
	font-family: sans-serif;
	margin: 0;
	-webkit-text-size-adjust: 100%; /* iPhone */
}
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	text-align: left;
	margin: 5px 0px;
}
.flex > div {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.5em;
    margin:  0.5em;
    border: 1px solid #7c93b2;
    border-radius: 7pt;
    line-height: 1.7em;
}
</style>
</head>

<body>

<div class="flex">

<div>
aaaaaaaaaaaa<br />
bbbbbb<br />
cccccccc
</div>

<div>
d<br />
eeeeeeeeee<br />
</div>

<div>
fffffffffffffffffffffffffffffff<br />
gg<br />
</div>

<div>
hhhhhhhhhhhh
</div>

<div>
iiiiiiiiiiiiiiiiiiii<br />
jjjjjjjjjjjjj<br />
</div>

</div>

</body>
</html>

css3_frexbox

Firefox, Google Chrome, iPhone エミュレート問題無し。
実物の iPhone 5 Safari でも綺麗に横幅で埋まりました。
仕様はもうコレで固まっている、ということでいいのかな?

Google Chrome でイケるから現行 Android でも大丈夫だろう。
コッチは Blink だしエミュレートで確認すれば充分だと思う。

Internet Explorer では確認していない、ぶっちゃけどうでもいい。
せっかくデュアルブートにして残したミニノートの Windows7 なのだが…
もう半年以上起動すらしていない、残す必要なんて無かったな。

ということで本サイトにとっとと適用。
それとフォントサイズ指定を廃止したり行間を空けたりでタッチしやすく…
いやコンテンツを整理したり増やしたいのですけどね。

GtkFlowBox

開発者、システム管理者、ディストリビューター向けの新規事項

GTK+ 3.14 はマルチタッチをサポートしているのようです。
GtkGesture という名前か、マウスジェスチャはもう過去の遺物だな。

よし早速、ってタッチパネルのパソコンなんて持っていないよ。

後二年もすれば五万円台で ASER か ASUS が普通に出してくるのだろう。
コイツはそれからでいいや。

Gtk 3.12 のほうを見ると GtkActionBar, GtkPopover, GtkFlowBox
全部コンテナか、そんなに沢山の種類が必要なのかな?

GtkFlowBox はコンテナサイズで複数 Widget の位置を調節してくれる。
という解釈でいいのかな、GtkIconView とは違うのかな。
ちと試してみよう。

2015.03.05 修正

#!/usr/bin/env python3

from gi.repository import Gtk, Gio

class FBox(Gtk.Window):
    """
        Minimum width is standard ?
    """
    def __init__(self):
        Gtk.Window.__init__(self)
        # 
        self.flowbox = Gtk.FlowBox.new()
        button = Gtk.Button.new_with_label("Insert Label")
        button.connect("clicked", self.on_insert_button_clicked)
        # pack
        vbox = Gtk.Box.new(Gtk.Orientation.VERTICAL, 0)
        vbox.pack_start(button, False, False, 0)
        vbox.pack_start(self.flowbox, True, True, 0)
        # self
        self.index = 0
        self.add(vbox)
        self.connect("delete-event", Gtk.main_quit)
        self.resize(400, 1)
        self.show_all()

    def on_insert_button_clicked(self, widget):
        label = Gtk.Label("Label")
        label.show()
        self.flowbox.insert(label, self.index)
        self.index += 1

FBox()
Gtk.main()

gtkflowbox

3 クリック目から横に余裕があるのに縦に広がってしまう。
どうも横幅を最小値にした場合を常に計算しているようで。
ついでに、GtkListBox 同様に選択もできます。

どんな場面に便利か思いつかないのは筆者の想像力が足りないのだろう。
昨今の Web ページではよく見かけるのですけどね。

Fedora 21 dnf

Fedora 21 Workstation にアプリを導入。

どうやら yum コマンドはもう使えないようです。
dnf コマンドを作ったのだからとっとと切り換えろ、なのでしょう。

fedora21_php_install

PHP を導入しようとしたら依存関係に httpd が出てこない。
何故だと思って調べたら最初からインストールされていた。
共有関連に必要なのかな?
とりあえず Apache の設定等は特に変わっていなかった。

dconf-editor
VL PGothic
KeePassX
sylpheed

と毎度のものを software アプリから入れていく。
しかし何故か Gimp が入らない、ストアへの登録作業が終わっていないのかな?

gimp

Brasero もダメだ、待つしかなさそう。
無償なんだから文句は言わないよ。

RPM Fusion でも普通に software アプリが立ち上がる。
RPM Fusion free for Fedora 21、nonfree の所をクリックね。
すると動画音声のデコーダーは普通に software アプリから導入できる。

fedora21_codec

けど何故だか libav だけは入らないって何だこれ、意図的か?

sudo dnf install gstreamer1-libav

コマンドで導入、やっと動画再生及びサムネイルすることができた。

しかし Totem は物凄く使い辛くなったもんだ。
ギャラリー機能は人によってなんだろうけど画像と違ってそう何度も観るとは…
何より動画の元サイズ 100% で観る手段が無いとかってどうよ。

タブレットならフルスクリーン固定、かつ容量は限られている。
だからコレでいいんだけどデスクトップのプレイヤーでコレは流石にどうかと。
自前でプレイヤーアプリを作っていてよかった。

動画はタブレット向け UI との融合で一番のネックだなと思った。

デフォルトで入っている DevAssistant って便利かな?
おいおい、Vala も Gjs もネェぞ、Node.js は何故かあるが。
C で試したら「パッケージがありません、インストールしますか?」
みたいなダイアログが、パッケージ導入の手抜きには使える。

Python2, Python3, Gjs, Seed, Lua, Perl は今迄どおりある。
もう Python2 はデフォルトでいれる必要は無いと思うんですけど。

しかしアプリを揃えたら何も変わった気がしなくなった。
gnome-terminal がダークテーマになったとか結構変わっているのにさ。

Fedora 21 Install (SSD)

Fedora 21 が出た、一年ぶりのメジャー更新で嬉しい。
半年毎に慣れ過ぎて待ちくたびれた。

Fedora

WorkStation というのが今迄どおりのデスクトップのようだ。
とっとと ISO を Brasero で焼いて新規 SSD にインストール。
以前の SSD はそのまま外してバックアップ用、という今迄と同様に。

後は Phenom2 955、AMD 880G というチョッピリ古いマシンのままですが。
普段のメインが iPhone になっちゃってますから壊れるまでこのままでいく。
最新構成の自作 PC より MacBook Air か iPad が欲しいのが本音。
まあそれはどうでもよくて。

今回のインストーラは自動で日本語にはならず自分で選択方式になった。
更に日本語キーボード固定で US キーボードに変更できなかった。
インストール後に変更できるから別に問題は無いですが。

ROOT パスワードがユルくなって 10 文字程度でも「強力」扱いになる。
やっぱり評判が悪かったのだろうね、記号数値を混ぜれば充分だし。

インストール修了で再起動ボタンを押したらフリーズ、いつもの Fedora だ。
電源ボタン長押しから再起動で即イジェクトボタンから DVD-R を取り出す。
うん、インストール自体は成功していたのでよし。

GNOME on Wayland in Fedora 21 | Fedora Magazine

Wayland とノーマルを切り替えしても違いが判らない。
初期 Compiz みたいなヤリスギを期待していたけど超普通だった。

現状 Wayland 状態だとスクリーンショットが一部上手くいかなかった。
Wordpress に画像ドロップアップロードも上手くいかない、まだ実用はキビシイ。
GNOME クラシックは存在意義が解らない、3D のままだし。

Boxes がまた最初から入っている、需要はどうなのか。
Eog がデフォルトビューアに戻っている、何故 20 で除かれたか知らないが。

メニューボタンのアイコンが Firefox, Google Chrome と同じ三本線になった。
GNOME 3.14 Goal: Gear Icons | woGue

icon

このギヤアイコン、つまりメニューボタンの svg 画像だけど。

# Fedora 20
/usr/share/icons/gnome/scalable/emblems/emblem-system-symbolic.svg

# Fedora 21 Gear Icon
/usr/share/icons/Adwaita/scalable/emblems/emblem-system-symbolic.svg

# Fedora 21 Menu Button
/usr/share/icons/Adwaita/scalable/actions/open-menu-symbolic.svg

になっているね、GNOME 3.14 でないとこの svg が無い。
自作アプリで使おうと思ったら 3.14 専用にするか自前にするかしかないようで。
うーん、自作アプリはどうしようか悩む…

あとマウス中ボタンクリックによるペーストが本当に廃止されていた。
このタッチパネルなご時世だから今後はコレでいきましょう。
Middle Button Click to OLE DnD | PaePoi
「昔は良かったオヤジ」予備軍がネット上には凄く多いです。

筆者は特に Gedit の変更は大歓迎、作業スペースは大きいほうがいい。
他 GtkHeaderBar 化やボタン類が異様に大きくなっている。
今後タッチ操作 OS が主になると考えると当然の流れですね。

Nautilus でスクリプトを使うのに右クリックが必要なのも廃止してほしい。
タッチ操作からスクリプトを呼び出す最適手段が思いつかないのが少し悔しい。

そんなことより、初期状態で日本語が入力できなかった。
以前はできたはずなんだがインストーラの仕様変更のせいか?
日本語キーボードの人なら大丈夫なのかな、とにかく変更しなきゃ。
ibus-kkc 自体は入っているようですけど。

ibus_kkc

入力メソッドから[日本語]を削除し[日本語(かな漢字)]を導入。

gsettings set org.gnome.desktop.input-sources sources “[(‘ibus’, ‘kkc’), (‘xkb’, ‘us’)]”

コマンドで ibus-kkc を先頭に入れ替える、GUI で入れ替えできない。
こうしないと再起動毎に切り替えしなきゃいけなくなるので。
US メソッドは実際には残さなくてもいいと思うけど保健として。

ibus-setup にて以下のように。
筆者は直接入力とひらがな切り替えは Alt+Space にした。
ぶっちゃけ直接入力とひらがな以外は使わないよね。

ibus_kkc_setup

これで US キーボードでの日本語入力も問題無し。

google chrome の導入が進化していた。
[プログラムで開く]を選択すると software アプリが立ち上がる。

chrome

まるで最初からストアに登録されていたかのようにインストールできた。
統一感があるって素晴らしいな、OS はこうでなければ。

長くなってきたので続く。