2014年10月29日水曜日

jQueryのunrecognized expressionについて

とあるファイルの操作で

Uncaught Error: Syntax error, unrecognized expression: 
input:hidden[name*=images[20141029_181853_4552483cf23a5f224d54e0aa79241a14]] 

というエラーが発生しました。
input:hidden[name*='images[20141029_181853_4552483cf23a5f224d54e0aa79241a14]']

のようにシングルクオテーションでくくれば直りました。
内側と外側の引用符(記号)が同じだとエラーになるようです。

つまり、

$('input[name='text']');

のようなパターンもダメ。

2014年8月22日金曜日

FlexモバイルプロジェクトでHTMLを表示する方法

前回まではFlush CCを使っていましたが、画面遷移とかスプラッシュ画面とかが面倒なのでFlash CCでの開発はやめて、FlashBuilderを使うことにしました。

今回はFlash上にHTMLを表示する方法について。

<mx:HTML>を使おうとするとエラー
→Flexモバイルでは使えない?
http://help.adobe.com/ja_JP/flex/mobileapps/WSf3db6597adcd110e19124fcb12ab3a1c319-8000.html#WS8b1c39bd7e9fc3643c4a6fa12a8ac8b916-8000

stageWebViewを使うとモバイルアプリケーション内でブラウジング機能を利用することができます。


<?xml version="1.0" encoding="utf-8"?>
<s:View 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
actionBarVisible="false" 
creationComplete="IframeHandler(event)" 
title="Map">

<fx:Script>
<![CDATA[
   //HTMLを読み込む
   protected function IframeHandler(event:FlexEvent):void
   {
    var webView:StageWebView = new StageWebView(); webView.viewPort = new Rectangle(0, 430, this.stage.stageWidth, this.stage.stageHeight);
webView.stage = this.stage;
    var htmlString:String = 
    "<!DOCTYPE HTML>" +
    "<html><body>" +
    "<p>てすとです</p>" +
    "</body></html>";
    webView.loadString(htmlString, "text/html");
   }
]]>
</fx:Script>
 (~中略~)
</s:View>

HTMLが表示されました。

2014年8月19日火曜日

ActionScript3.0とNode.jsでSocket通信をする

今回は、Node.jsとSocket通信でメッセージを送りたい場合のお話。

前回まではレイヤーに書いてましたが、今回はクラスにActionScriptを読み込みます。



















ソースは以下のとおり。

SocketEx.as

package
{
import flash.display.Sprite;
import flash.events.DataEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.net.XMLSocket;

public class SocketEx extends Sprite
{
private var _xmlSocket:XMLSocket; //ソケット
 
 
// --------------------------------------
// コンストラクタ
// --------------------------------------
public function SocketEx()
{
// EVENTS
addEventListener(Event.ADDED_TO_STAGE, _onAddedToStage);
 
}
 
// --------------------------------------
// メソッド
// --------------------------------------
//ステージの追加とソケットの接続
private function _onAddedToStage(aEvent : Event):void
{

_xmlSocket = new XMLSocket("153.127.250.224", 3000);
 
// EVENTS
stage.removeEventListener(MouseEvent.CLICK,         _onAddedToStage);
//
_xmlSocket.addEventListener(Event.CONNECT,          _onConnected);
_xmlSocket.addEventListener(IOErrorEvent.IO_ERROR,  _onIOError);
 
}
//ソケットの接続
private function _onConnected(aEvent : Event):void
{
//  TRACE
trace("onConnect() aEvent: " + aEvent);
 
//  EVENTS
_xmlSocket.removeEventListener(Event.CONNECT,           _onConnected);
_xmlSocket.removeEventListener(IOErrorEvent.IO_ERROR,   _onIOError);
//
_xmlSocket.addEventListener(DataEvent.DATA,             _onDataReceived);
_xmlSocket.addEventListener(Event.CLOSE,                _onSocketClose);

button_send.addEventListener(MouseEvent.CLICK, _onMessageSend);
 
}
 
//ソケットの切断
private function _onSocketClose(aEvent : Event):void
{
//  TRACE
trace("_onSocketClose aEvent : " + aEvent);
 
//  EVENTS
_xmlSocket.removeEventListener(Event.CLOSE, _onSocketClose);
_xmlSocket.removeEventListener(DataEvent.DATA, _onDataReceived);
}

//送信ボタンが押されたときの処理
private function _onMessageSend(evt:MouseEvent):void
{
_xmlSocket.send(message_send.text);
}
 
//送信データの受信
private function _onDataReceived(aEvent : DataEvent):void
{
try {
 
//  Show the server data in text
message_receive.htmlText += (aEvent.data + "\n");
 
//scroll down to show latest line
message_receive.scrollV = message_receive.maxScrollV;
 
} catch (error : Error) {
//  TRACE
trace("_onDataReceived error:  " + error);
}
}
 
//接続エラー
private function _onIOError(aEvent : IOErrorEvent):void
{
//  TRACE
trace("_onIOError aEvent: " + aEvent);
 
//  EVENTS
_xmlSocket.removeEventListener(Event.CONNECT, _onConnected);
_xmlSocket.removeEventListener(IOErrorEvent.IO_ERROR, _onIOError);
stage.addEventListener(MouseEvent.CLICK, _onAddedToStage);
}
 
}
}


Node.jsが入っていることが前提としてサーバー側のソースが以下の通り

app.js

// --------------------------------------
// Imports
// --------------------------------------
var net = require('net');
var mySocket;

// --------------------------------------
// Construct The Socket
// --------------------------------------
// create the server and register event listeners
var server = net.createServer(function(socket) {
    mySocket = socket;
    mySocket.on("connect", onConnect);
    mySocket.on("data", onData);
});

// --------------------------------------
// Events
// --------------------------------------
/**
 * Handles the Event: <code>"connect"</code>.
 *
*/
function onConnect()
{
    console.log("Connected to Flash");
}

/**
 * Handles the Event: <code>"data"</code>.
 *
 * When flash sends us data, this method will handle it
 *
*/
function onData(d)
{
    if(d == "exit\0")
    {
        console.log("exit");
        mySocket.end();
        server.close();
    }
    else
    {
        console.log("From Flash = " + d);
        mySocket.write(d, 'utf8');
    }
}

// --------------------------------------
// Start the Socket
// --------------------------------------
server.listen(3000, "IPアドレス");


実行
























という具合で動きました。

2014年8月15日金曜日

ActionScript3.0で動画ストリーミングを再生する

今回はflv形式の動画を再生したいとします。
流れは次のようになります。

1.flvを読み込むためにNetConnectionクラスを使う必要があるためまずはNetConnectionオブジェクトを生成する


2.connection()メソッドにnullを引数に指定して、HTTP上またはローカル上のファイルと接続する

3.接続が完了したらデータを読み込むためのストリームを生成する

4.ビデオオブジェクトを生成してサイズなどを指定する

5.NetStreamクラスのplay()メソッドで動画ストリーミングの再生を開始する

以下がソースとなります。
import flash.display.*;
import flash.media.*;
import flash.net.*;
import flash.text.*;

//1.コネクションの生成
var connection:NetConnection;
connection = new NetConnection();

//2.ファイルとの接続を確立
connection.connect(null);

//3.ストリームの生成
var stream:NetStream = new NetStream(connection);

// 4.ビデオオブジェクトを作成する
var video_obj:Video = new Video();

// ステージの表示リストに登録する
addChild(video_obj);

// ビデオオブジェクトのサイズを変更する
video_obj.x = 20;
video_obj.y = 20;
video_obj.width  = 440;
video_obj.height = 350;
video_obj.attachNetStream(stream);

//5.動画ストリーミングの再生開始
stream.play("sample1.flv");



いい感じに表示されました。


2014年8月14日木曜日

ActionScript3.0で入力フォームを作る(2)

ボタンをクリックしたときに文字が送信されるようにしたいとします。

1.矩形などでボタンのイメージを作成する
2.右クリックしてシンボルに変換→種類「ボタン」を選択












3.インスタンス名をつける
























4.ActionScriptを記述
クリックされたときに出力されるようにします


import flash.events.MouseEvent;

//クリックイベント
button1.addEventListener(MouseEvent.CLICK,button1Listener);
function button1Listener(e:MouseEvent){
message_display.text = "出力:" + chat_message.text;
}


5.出力
クオリティーはともかく、表示されました。



ActionScript3.0で入力フォームを作る(1)

AS3とAirでAndroidアプリを作ることになったのですが、初心者すぎてまったく勝手がわかりません。
ということでまずは入力フォームを作ってみます。
AdobeFlashProfessionalCCを使用しています。

1.プロパティからテキストツールを選択する
2.インスタンス名を入力(ここではchat_messgeとしています)
3.テキストの種類をテキスト入力とする





























4.こんなかんじにドラッグ&ドロップでフォームを作る
  矩形ツールでフォームの周りを囲んでおくと入力フォームっぽい



























5.出力先のフォームを作成する
アンチエイリアスにデバイスフォントを使用を選択する

















6.ActionScriptを記述する
タイムラインからレイヤーを選択するかF9でアクションタブを立ち上げる

import flash.events.Event;

//テキスト入力フォーム
chat_message.text = "入力してね!";

//入力されたテキストを表示する
chat_message.addEventListener(Event.ENTER_FRAME,updateMessage)
function updateMessage(e:Event):void{
message_display.text = "出力:" + chat_message.text;
}

7.Ctrl + Enterで実行


























という具合になります。
Web開発とは勝手が違うのでなんか大変そうです。






2014年7月28日月曜日

vimを使っているとき急に入力が受け付けられなくなる件

保存しようとして
「Ctrl」 + 「S」をいつの間にか押していることが原因でした。
これを押すとターミナルへの出力がロックされてしまうそうです。

「Ctrl」 + 「Q」で解除できるので、焦らず解除しましょう。



2014年7月17日木曜日

動的に追加した値をjqueryで取得する方法

動的に追加した値を取得したい場合の処理について。
たとえば、「よしだ」をクリックしたときに入力フォームに引用したいとします。



こんな感じ





[NG]
動的に取得したものに関してはclick(fn)だと取得できません
//ユーザー名クリックで引用
$('.message_name').click(function () {
//
$('#message').val('>' + $(this).html() + 'さん');
});

[OK]
live(type,fn)を使うと取得できる
//ユーザー名クリックで引用
$('.message_name').live('click',function () {
//
$('#message').val('>' + $(this).html() + 'さん');
});

この関数で指定できるイベントは次のとおりです
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

2014年5月20日火曜日

JavaScript中にSmartyの変数を使う際のデリミタ設定

テンプレートファイルの中にJavascriptを書いていて、PHPの変数を使いたいとき
JavaScriptの「{ }」と被るため


{literal}
function hoge() {
{/literal}
 window.alert({$hogehoge});
{literal}
}
{/literal}

のように書かなくてはならず、ソースが見にくくなってしまいました。

Smarty.class.php
$smarty->left_delimiter = '<{';
$smarty->right_delimiter = '}>';

のようにデミリタを設定すると、

function hoge() {
 window.alert(<{$hogehoge}>);
}

のようにシンプルに書くことができます。

2014年5月13日火曜日

DateTimeによる日付の差の表示


DateTime::diff()を用いることで日付の差を表すDateIntervalオブジェクトを返します。
失敗した場合にはFALSEを返します。

<?php
$datetime1 
= new DateTime('2014-05-11');$datetime2 = new DateTime('2014-05-13');$interval $datetime1->diff($datetime2);
echo 
$interval->format('%a');?>


上を実行すると「2」が出力されます。
また、PHPのDateTimeオブジェクトは比較演算子で比較することもできます。
<?php
$datetime1 
= new DateTime('2014-05-11');$datetime2 = new DateTime('2014-05-13');var_dump($datetime1 < $datetime2); //true?>

2014年3月21日金曜日

smartyでtruncateを使うと文字化けする件

{$str|truncate:20:"..."}
のようにtruncateを使うと指定した文字数で文字列の切り捨てを行うことができます。
しかし、日本語を入力したときに文字化けする場合があります。
マルチバイト対応させることで文字化けを回避出来ます。

modifier.truncate.phpで
substr,strlenの部分mb_substr,mb_strlenに変更することでマルチバイト対応できる。

function smarty_modifier_truncate($string, $length = 80, $etc = '...',

                                  $break_words = false, $middle = false)

{

    if ($length == 0)

        return '';



    if (mb_strlen($string) > $length) {

        $length -= min($length, mb_strlen($etc));

        if (!$break_words && !$middle) {

            $string = preg_replace('/\s+?(\S+)?$/', '', mb_substr($string, 0, $length+1));

        }

        if(!$middle) {

            return mb_substr($string, 0, $length) . $etc;

        } else {

            return mb_substr($string, 0, $length/2) . $etc . mb_substr($string, -$length/2);

        }

    } else {

        return $string;

    }

}

2014年3月14日金曜日

eclipseでタブを押しても半角になる場合の対処法

タブが半角になってしまう場合には以下の2パターンが考えられます。
逆にタブを半角にしたいという場合にもこれを設定すればOK


[パターン1]
各言語の「コードスタイル→フォーマット」でタブポリシーが「スペース」になっている


[パターン2]
「一般→エディタ→テキストエディタ」でタブでスペースを挿入にチェックが入っている
かつ幅が1になっている





eclipseで半角インデントをタブに変換

いつの間にインデントが半角になっていた。 そんなときの対処法。


ctrl+iを押すだけで


タブに切り替わる。これは便利。

2014年3月13日木曜日

Zendでファイルをアップロードするときにファイルをリネームする方法

最後らへんがなんかへんですが、とりあえず動いたのでメモ
require_once 'Zend/File/Transfer/Adapter/Http.php';
require_once 'Zend/File/Transfer.php';

$adapter = new Zend_File_Transfer_Adapter_Http();
//ローカルの保存先パスを指定
$adapter->setDestination('/var/www/****/public_html/files');
//現在時刻にリネーム
$adapter->addFilter('Rename', time().'.jpeg');

if (!$adapter->receive()) {

    $messages = $adapter->getMessages();
    echo implode("\n", $messages);

}
//ファイル名取得
$imagename = $adapter->getFileName();

//パスもくっついてくるのではじく(無理矢理感…)
$imagename = substr($imagename, 46);
//DBに保存する用のURL
$url = '****'.$imagename; 

2014年3月12日水曜日

zend_layoutの有効無効など

めもめも
アクションコントローラー内の各アクションで自動ビューレンダラー無効
<?php

$this->_helper->viewRenderer->setNoRender();

アクションコントローラー内の各アクションで、任意のビュースクリプトを呼び出し
<?php

// 引数は呼び出すビュースクリプト(拡張子抜き)
$this->_helper->viewRenderer->setRender('hoge');

アクションコントローラー内の各アクションでレイアウトを無効
<?php

$this->_helper->layout->disableLayout();

アクションコントローラー内の各アクションで、任意のレイアウトを呼び出し
<?php

// 引数は呼び出すレイアウトスクリプト(拡張子抜き)
$this->_helper->layout->setLayout('fuga');

2014年2月4日火曜日

Font Awesome Iconsがmacでしか表示されない件

http://fortawesome.github.io/Font-Awesome/icons/
を使って、webフォントを表示しようとしたのですが、Macでは表示されるものの、Windowsで開くとなぜか豆腐化してしまいました。

原因
1.記法の誤り
Font Awesome 3系では
<i class="icon-○○○">
みたいなかんじでした

Font Awesome 4系では
<i class="fa fa-○○○" >
となります
→誤りはなかった

2.クロスドメイン問題
http://qiita.com/ikedahidenori/items/a33236a40986cd22f37d
→書かれている通り試したがうまくいかず・・・

最終的にCDN版を利用することで解決しました。
http://h2ham.net/font-awasome
うーん。。。

2014年1月28日火曜日

フォームのデータを配列で取得する

nameの部分を配列でもってやればよい。

http://antonsan.net/study/php/php008.php

!-- 入力フォーム -->
<div>
<p>何が好き?</p>
<form method="POST" action="<?php echo $_SERVER["PHP_SELF"]?>">
  <input type="checkbox" name="foods[]" value="ごはん">ごはん
  <input type="checkbox" name="foods[]" value="ラーメン">ラーメン
  <input type="checkbox" name="foods[]" value="うどん">うどん<br />
  <input type="checkbox" name="foods[]" value="そば">そば
  <input type="checkbox" name="foods[]" value="パン">パン
  <input type="checkbox" name="foods[]" value="小麦粉">小麦粉<br /><br />
  <input type="submit" value="送信" name="btn">
</form>
</div>

<div>
<?php
//入力内容を表示する
echo "<p>あなたの好きなもの</p>\n";
echo "<p>";
for ($i = 0; $i < count(@$_POST["foods"]); $i++){
  echo @$_POST["foods"][$i]." ";
}
echo "</p>\n";
?>
</div>

2014年1月27日月曜日

クラス名をワイルドカードで取得したいとき

smartyでforeachを使ってて、
<input class="hoge_<{$smarty.foreach.test_info.iteration}>">
みたいなのがあって、それぞれのクラス名を取得したいとします

DOMで
getElementsByClassName()
を使って取得しようとすると・・・

getElementsByClassName("hoge*")

無理!!


ただ、getElementById()の場合は大丈夫なようです。

そんなときはjQueryを使えば解決します。

$(':input[class^=hoge]')

2014年1月16日木曜日

jQueryで画像をマウスオーバーしてメイン画像を切り替えると画像が消える件

http://wataame.sumomo.ne.jp/archives/1841

のサイトを参考にjQueryで画像を切り替える処理を入れてみたところ、高速でマウスオーバーすると画像が段々と薄くなっていって消えてしまった。

意味わからず使ってたけど、調べてみると
fadeOut(50)ってのが0.05秒かけてフェードアウトするという意味だそう。
fadeIn(200)もまた然り。

ということでこれをもっと短い時間でフェードアウト、フェードインしてやればよい。
fadeOut(10)とかfadeIn(10)みたいな感じで。

2014年1月9日木曜日

Zendでファイルのアップロード&ファイルパスの保存

色々、無理矢理な気もするけど、とりあえずアップ出来た。
まずはここを参考に。
http://asklife.info/archives/1773

// 画像ファイルをストレージに格納
require_once 'Zend/File/Transfer/Adapter/Http.php';
require_once 'Zend/File/Transfer.php';
  
$adapter = new Zend_File_Transfer_Adapter_Http();
$adapter->setDestination('/var/www/任意のディレクトリ');

// エラー処理
if (!$adapter->receive()) {
    $messages = $adapter->getMessages();
    echo implode("\n", $messages);
}

// ファイルのパスを取得  
$upload = new Zend_File_Transfer();
$upload->receive();
$imagename = $upload->getFileName();  // ファイル名を取得する
$imagename = substr($imagename, 4);    // デフォルトで"tmp/"とついてるので削除
$url = 'http://ファイルのパス'.$imagename; 

// 更新データ
$data = array(
    'image' => $url
);
//  DBを更新
$result = $db->insert('tablename', $data);

格納先のフォルダはパーミッションを777に設定しておくのを忘れずに。

2014年1月4日土曜日

Smartyで変数の表示が0になる件

Smartyを使ってたら変数が0になっていた。
どうやら配列のキー名に「-(ハイフン)」を使っているとだめらしい。

何やら解決法もあるみたい。
http://babie.hatenablog.com/entry/20060306/p2

ハマりそうなので、DBのカラム名を変えて対応した。

Bootstrap3.0でmodalとformを組み合わせる

ということで今回はBootstrapについて。

ここを見ながら
http://blog.moccori.com/d/2012-10-09

$(function() {
  var options = {
    clearForm: true,
    resetForm: true,
    dataType : 'html',
    success: function(response) {
      $('#result-area').html(response);
      $('#modalForm').modal('hide');
    },
  };
  $('#modal-form').ajaxForm(options);
});

ここのmodal('hide')がBootstrap3.0では効かない。
なんか色々調べてたら、若干方法が変わってるらしい。
http://stackoverflow.com/questions/20297783/modalel-modalshow-and-modalel-modalhide-not-working

$(#modal-Form).modal(); // 初期化
$(#modal-Form)modal('hide');

ってやったら動く模様。

2014/1/10 追記
なんか$(#modal-Form)modal('hide')だけでも動くようになっていた!
bootstrap.jsを更新したからかな?