JavaScriptで数値や文字列を画像に置き換える

投稿日時: 投稿者:
返信

アクセスカウンターやデジタル時計など数値を画像で表示したいとき。

var str = String(123);// 一度文字列へ
for (var i in str)
{
    document.write('<img src="' + str[i] + '.png">');// i番目の文字
}

画像を用意すれば数値だけじゃなくて文字列も置換可能。
適当なベンチマークではstr.charAt(i)よりstr[i]の方が30倍くらい高速だった。

関数にするならこんな感じ？

// 関数定義
function str2img(str, img)
{
    var imgs = '';
    for (var i in str)
    {
        imgs += img.replace('%s', str[i]);
    }
    return imgs;
}
 
// 使用例
document.write(str2img('abc123', '<img src="http://sample.com/%s.png">'));

JavaScriptにはsprintf関数がないので%sを固定で置換。詳しくはここらへん。
画像作ってないから実際に表示されるかは分からないけど日本語も出力はされるみたい。

このエントリーをはてなブックマークに追加

TextBoxでCtrl+Enter

投稿日時: 投稿者:
返信

TextBoxでCntrl+Enterを押したときに何か処理をしたい。
【参考】キーボード操作への反応（テキスト入力とコントロール）

// using
using Windows.System;// VirtualKey
using Windows.UI.Xaml.Input;// KeyRoutedEventArgs
 
// コード
bool isCtrlKeyPressed = false;
 
private void textBox_KeyUp(object sender, KeyRoutedEventArgs e)
{
  switch (e.Key)
  {
    case VirtualKey.Control:
      isCtrlKeyPressed = false;
      break;
    case VirtualKey.Enter:
      if (isCtrlKeyPressed)
      {
        // Ctrl+Enterが押されたときの処理
      }
      break;
  }
}
 
private void textBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
  switch (e.Key)
  {
    case VirtualKey.Control:
      isCtrlKeyPressed = true;
      break;
  }
}

Enterを押したときに改行が入ってしまうので、必要あればTextBoxのIsReadOnlyプロパティとか使って適当に。
参考サイトではKeyDownで処理するように書かれていますがタイミングとしてはKeyUpの方が自然でしょう。
また、Enterの場合AcceptsReturnがTrueになっているとKeyDownでは動きません。

このエントリーをはてなブックマークに追加

Aapache2.4で403エラー

投稿日時: 投稿者:
返信

Apacheのバージョンを2.4に上げてローカル環境でサイトを見ようとすると

Access forbidden!
Error 403

と言われるようになってしまった。

エラーログを見ると”authz_core:error”と出力されてたので
下記サイトを参考に設定ファイルを修正。
authz_core:error apache 2.4 エラー

Order Deny,Allow
Deny from ALL
Allow from localhost 127.0.0.1

となっていたのを

Require host localhost 127.0.0.1

へ。しかし状況変わらず。
再度エラーログを見ると今度は”authz_host:error”と”authz_core:error”の両方が出力されてる。
ドキュメントのコメントによるとRequireのhostには特有の書き方があるらしい。
ここらへんを参考にしつつ

Require local

にしたら正常に表示されるようになった。

このエントリーをはてなブックマークに追加

TextBoxのAcceptsReturnをTrueにするとKeyDownでEnterが取得できない

投稿日時: 投稿者:
返信

TextBoxのAcceptsReturnをTrueにするとKeyDownでEnterが取得できません。
よほどの理由が無ければKeyUpで処理しましょう。

<TextBox x:Name="textBox" TextWrapping="Wrap"
  KeyUp="textBox_KeyUp" KeyDown="textBox_KeyDown"
  AcceptsReturn="True"/>
// using
using Windows.UI.Xaml.Input;// KeyRoutedEventArgs
using System.Diagnostics;// Debug
 
private void textBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
  Debug.WriteLine("KeyDown:" + e.Key);// Enterは出力されない
}
 
private void textBox_KeyUp(object sender, KeyRoutedEventArgs e)
{
  Debug.WriteLine("KeyUp:" + e.Key);// Enterも出力される
}
このエントリーをはてなブックマークに追加

TextBoxのKeyDownイベントでEnterを押したときに2回実行される

投稿日時: 投稿者:
返信

TextBoxのKeyDownイベントでe.Key==VirtualKey.Enterのときに処理を行うと2回実行される。
e.KeyStatus.RepeatCountの値を見て回避。
確認したのはWindowsストアアプリ。

// using
using Windows.System;// VirtualKey
using Windows.UI.Xaml.Input;// KeyRoutedEventArgs
using System.Diagnostics;// Debug
 
// TextBoxのKeyDownイベント
private void textBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
  Debug.WriteLine(e.Key + ":" + e.KeyStatus.RepeatCount);// 確認用 
  switch (e.Key)
  {
    case VirtualKey.Enter:
      if (e.KeyStatus.RepeatCount == 1)// Enterのときは0と1の2回
      {
        // Enterが押されたときに実行したい処理
      }
      break;
  }
}

【KeyDown】
Enterのときに0と1、Tabはフォーカスが他へ移るときに0だけ、他のキーは1だけ。
カーソルキーがテキスト内の移動中に取得できない。
【KeyUp】
Enterのときに1だけ、Tabは他からフォーカスが移ってくるときに1だけ、他のキーは1だけ。
e.Keyに名前が定義されてないキーもいくつかあった。
242:CapsLockオン、243:半角→全角、244:全角→半角。

細かい挙動書いてあるサイトあったりするのかな。

【参考】
C# textbox keydown triggered twice in metro applications（英語）

このエントリーをはてなブックマークに追加

×ボタンはもう古い

投稿日時: 投稿者:
返信

close_button
このようなポップアップを見たことありませんか？

なんで閉じるが2つあるのか。

どうしてユーザーを迷わせるようなUIにするのでしょうね。
閉じるボタンがあるのに右上の×ボタンって必要なのでしょうか。

マウス操作とウィンドウが前提の、今までのWindowsでは
（重複はともかく）統一性がとれていて良かったかもしれません。
小さいアイコンでも最大化していればカーソルを右上に持っていけば押しやすいですしね。

しかしスマホなどのタッチ向けのアプリでこれをやってしまうとアイコンが大きくなります。
更にスマホのアプリにはWindowsほど×ボタンは存在しておらず統一性もありません。
おそらく普段見慣れているからという理由でなんとなく付けたのだと思いますが
より直感的な操作が求められるタッチ向けのUIに相応しいかは再考の余地があるでしょう。

このエントリーをはてなブックマークに追加

Mevyタスク

投稿日時: 投稿者:
返信

このエントリーをはてなブックマークに追加

Windows8用Twitterクライアント「Mevy」をリリースしました

投稿日時: 投稿者:
返信

Windows8用Twitterクライアント「Mevy」をリリースしました。（2013年3月19日公開）
初ストアアプリです。無料。試用版に制限はないのでそちらをインストールしてください。
気に入っていただけたら寄付（購入）していただけるとありがたいです。
詳しくはこちら → http://mevy.snowcait.info/
インストール → http://apps.microsoft.com/windows/app/mevy/31760b9c-38fb-4d95-a471-d2ee8d920ee5

Mevyの審査を通して分かったこと

・α版でも機能が完全に動いていれば問題ない（アプリロゴに(α)、プライバシーポリシーを兼ねたWebサイトにα版と明記）
・説明文にMetroという単語を含めるのはOK
・プライバシーポリシーは2行で十分
・説明文は3行しか表示されない

一度リジェクトされたときに引っかかった項目と修正方法

要件 1.2

You should add more detail to your app description, it reads too generic or vague to adequately represent the app’s unique value.
説明不足。一般的なことしか書かれていない。
→説明文に特徴を1行加筆。アプリの機能を書いていなかったので追加。

要件 6.5

During the review of this app, it did not appear to be fully localized for the languages it supports.
サポート言語でローカライズされていない。
→UIは英語と書いていたもののNGとのこと。提供地域を日本のみに変更、UIと説明文を各種アイコン以外すべて日本語に。

その他

添付されていたPDFにも何か書いてありましたが本文に言及がないので無視。

今後

国外をすべて切ってしまったので英語くらいには対応して提供地域を増やしたい。
メインクライアントとして完結させるには機能が足りなさすぎるので無いと困るものから順次機能追加。（基本自分用なのでこっちの方が優先度高）
寄付とはいえ購入してくれた方にはお礼代わりに広告OFFにしたい。

このエントリーをはてなブックマークに追加

ListViewにデータバインドしたときにバインドしたデータの型が表示される

投稿日時: 投稿者:
返信

まぁただのミスなんですけど。
ListView で DataTemplate を使用したときに
データバインドした型しか表示されず、テンプレートが効いていない。

【誤】

<ListView>
  <DataTemplate>
  </DataTemplate>
</ListView>

【正】

<ListView>
  <ListView.ItemTemplate>
    <DataTemplate>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

ListView.ItemTemplate が抜けてたっていうオチですね。

このエントリーをはてなブックマークに追加

XAMPPインストール時にApacheが起動しない

投稿日時: 投稿者:
返信

XAMPPインストール時に下記のようなメッセージが出てApacheが起動しない。

Problem detected!
Port 80 in use by "system"!
Apache WILL NOT start without the configured ports free!
You need to uninstall/disable/reconfigure the blocking application
or reconfigure Apache to listen on a different port

80番ポートを他のアプリケーションが使っているのでなんとかしてと言われています。
[環境] Windows 7, XAMPP 1.8.1

原因と対応

まずはXAMPPコントロールパネルからNetstat開いてみましょう。これ便利。
80番ポートをPID:4のsystemが使ってますね。これをなんとかすればいいわけです。

Skype

よくあるのがSkypeを起動している場合。
「ツール」→「設定」→「詳細」→「接続」で
「上記のポートに代わり、ポート80と443を使用」にチェックが入っていれば外す。
これは前にハマった。

Web Deployment Agent Service

WebMatrixをインストールしているとWeb Deployment Agent Serviceが80番ポートを使う模様。
XAMPPコントロールパネルからServices開いてWeb Deployment Agent Serviceを停止。
ついでにプロパティからスタートアップの種類を自動から手動へ。
詳しくはこのへん→WebMatrix とポート80 の関係を断つ方法
今回はこっち。だいぶ前に入れてたXAMPPをアップデートしたタイミングで動かなくなった。

BranchCache

この記事の参考にしてるWindows 7で80番ポートが使用されており、Apacheを起動できないではこれが原因だったみたいですね。
これもXAMPPコントロールパネルからServices開いてBranchCacheを停止。

その他

上記参考記事にはこのへんも書いてありますが調べてないので割愛。
・IIS
・SQL Server Reporting Services
・Windows Remote Management
Windows Remote ManagementはServicesにあるので同様に停止できそう。

このエントリーをはてなブックマークに追加