2016-12-02

PHP リンクからPOSTデータを渡すには

data

使用する場合と致しましては、、

リンクのデザインを保持したままPOSTデータを送信したーい!という時に使っちゃいます。

(ボタンを使用しない)

 

(例)index.phpへ送信する場合


<form name="form1" method="POST" action="index.php" >
<a href="javascript:document.form1.submit()">Submit</A>
<input type="hidden" name="hogehoge_status" value="1">
</form>

普通にformでかこってあげます。

そして、リンクの<a href =””>のなかにJavaScriptの処理をいれることで

リンクをクリックすると同時にPOSTデータを送ることができます。

author :: shino / Category :: HTML5,Javascript,technology / Date :: 2016-12-02 / Comment :: No Comments »

2015-07-03

CSSのz-indexが効かない!

z-indexを調整してもなぜだか後ろに隠れてしまう。そんなことに出会ったことありませんか?
powerpoint-27539_640

以下に参考サイトがありました。

z-indexで重なりが直らない場合はtransformのz軸を疑ってみる

CSS translateに要注意です。

translateを使っていると効かなくなります。

私の場合は、SliderBarのJSプラグインを入れていたため、その中を調べてみるとtranslateを使っていました。
これが原因か、とわかったんですが、その上にmodalで表示したいのですが、SlideBarのJSプラグインを修正なんてしてる暇がないわけで。

解決方法は簡単です。

SlideBarJSプラグインの多くは、全体を囲むように指示があったりしますので以下のようになっている場合が多いです。

<div class="slidebar">
<div class="modal"></div>
</div>

それを外に出して同一レベルにする。

<div class="slidebar"></div>
<div class="modal"></div>

slidebarの制御外にすればよいってことですね。あとうあ、slidebarとmodalのz-index調整でOKです。

author :: futoshi / Category :: Blog,CSS,Javascript,technology / Date :: 2015-07-03 / Comment :: No Comments »

2013-12-04

既存のEclipseにTitanium Studioをインストールする方法(for windows)

titanium_opning

Titaniumは、iPhone , iPad , Android, さらには、BlackBerry, TizenといったスマートフォンのアプリをJavascript(若干拡張)言語で作ることのできるツールです。開発するにはTitanium StudioというGUI開発ツールがあり、無料で公開されています。(利用するにはユーザ登録が必要)

これは、Eclipseをカスタマイズしたもので、実態はEclipseです。

なのでEclipseを入れておいて、あとからTitaniumをセットアップする方法を調べてみました。
日本語環境で使いたい場合にはこの方法がいいですね。

Eclipse日本語化 pleiades
http://mergedoc.sourceforge.jp/index.html#/pleiades.html

ということで、実際にやってみましたが、若干不都合な点があります。先に説明しますが、
[eclipse.exe]が無くなります。代わりに[TitaniumStudio.exe]になります。
この時点でショートカット類は使えなくなるので一瞬あれ?と思いますが一応、eclipseは健在です。つかえてます。不都合はなさそうですが違和感ありますね。。。

Eclipseの準備

Eclipseは、4.3がいいです。最新のTitanium Studioは、Exlipse 4.3でした。(2013/12現在)

ソフトウェアアップデートのサイト追加

「設定」-「新規ソフトウェアのインストール」から、作業対象に、次のURLを入力します。

http://preview.appcelerator.com/appcelerator/studio/standalone/update/stable/

Enterを押すとリストアップされるかと思いきや、デフォルトでは何も出ません。
項目をカテゴリー別にグループ化」のチェックを外すと見えます。Titanium関連はカテゴリー分けされてないってことですね。

eclipse-titanium

「Titanium Studio xxxx」
というのを1つ選んでください。
残りは依存関係探してくれて勝手にインストールしてくれます。

以上です。これでインストール完了。すべてOK。

ということで、さっそく起動。

eclipseの中のeclipse.exeが無くなりTitaniumStudio.exeになってますので、それを起動させます。

すると、、、起動しませんよね。たぶん。
メモリが足りないです。

起動オプションでメモリを節約してみましょう。

TitaniumStudio.iniの編集

TitaniumStudio.ini」を開くと
[-Xmx1024m]となっているところがあります。メモリを1024m(1G)使う設定です。たぶんいろいろ動いているので足りません。
確実に動かすには[-Xmx256m]このくらいがいいんじゃないですかね。512でもいいとおもいます。
このあたりは動作が重く感じるようになったらチューニングしてもいいですね。

参考にしたサイトはこちら

既存のEclipseにTitanium Studioを追加する | MEDIA Street
http://media.st/blog/2011/05/eclipse-titanium-studio/

JavaとAndroidとTitaniumをインストールすんのに全部ハマったのでバッドノウハウ書く! – デッドボール軒
http://d.hatena.ne.jp/kibitaki/20110627/1309128048

author :: futoshi / Category :: Blog,iOS,Javascript,technology / Date :: 2013-12-04 / Comment :: No Comments »

2013-11-20

Excelからjson形式へ変換 by Mr. Data Converter

Mr. Data Converter

mrdataconverter

ウェブシステムを作っていてサンプルデータを作ってモック作りたい!ということありませんか?
そんなとき、2,3件のデータを用意するのは手作業が早いけど、もっと10件とか20件のデータを扱う場合、json形式だったりxmlだったり用意するのが大変です。
そんなときに便利なサイトがありました。

Mr. Data Converter
http://shancarter.github.io/mr-data-converter/

すばらしいです。
XMLやJSON形式以外にももっとあります。ASP/VBScriptやphpの場合は、言語の配列Arrayに入れてくれます。

  • Actionscript
  • ASP/VBScript
  • HTML
  • JSON – Properties
  • JSON – Column Arrays
  • JSON – Row Arrays
  • MySQL
  • PHP
  • Python – Dict
  • Ruby
  • XML – Properties
  • XML – Nodes
  • XML – Illustrator

変換元のデータは、CSVでもOKですが、便利なのはExcelで表を作ってそれをコピーして貼り付けすればよいです。
Excel上でコピーされたデータは、クリップボード上ではセル間がtabで区切られた状態となっております。
もちろん、Mr. Data Cenverterは、tab区切りにも対応しています。

あとは、Output asで出力形式を選べば出力OK。
簡単ですね。

各言語の配列の持ち方などその言語、構造を初めて学ぶときにも、Excel上のこの表は、どのような表現になるのかテストするの飲みよいでしょう。

 

author :: futoshi / Category :: ASP.NET,Blog,Flash,HTML5,iOS,Javascript,PHP,technology / Date :: 2013-11-20 / Comment :: 1 Comment »

2013-11-19

CSS3の角丸をIE8(IE6 & IE7)でも実現させる[border-radius.htc]の落とし穴

border-radios.htcはいまいち使えないことが分かったのでメモです。

Borderのコーナーを角丸にする方法

CSS3では[border-radius]という記述があるので簡単に実現できます。
forefoxやwebkit系(safari,chrome)でも対応させるためには、以下の通り。

moz-border-radius: 5px;	//for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px;		//CSS3

ただし、これではIE8以前には対応してません。
IE8以前のIE6,7,8に対応させるためには、「border-radius.htc」というものがありました。
これはIEのCSS拡張で、CSS内でjavascriptが呼び出せる仕組みになります。

注意:htcという拡張子をブロックするようなwebサーバ設定もありますので、その場合は使えません

以下、参考サイトです。けっこう記事にされている方いますね。

[CSS3による角丸表現の決定版?の htcファイル「border-radius.htc」]

[border-radius.htc使ってみた – 放置演算子]

[IE で border-radius を使う方法 – それはBlog]

上記の方は、3種類比較されていました。

  • border-radius.htc を使う
    VML を利用して、behavior を使って border-radius を実現する方法
  • border-radius.js を使う
    JavaScript を使って border-radius を実現する方法
  • JQuery Corner を使う
    jQuery Corner という jQuery プラグインを使って border-radius を実現する方法

border-radius.js」というJSもあるようですが、IE8は未対応とのことです。

さらに、「jQuery Cornerを使う」とありましたので実装テストしてみました。

[jQuery Corner plugin]

これを使えばできそうかと思いましたが、FORM要素のINPUTタグには使えませんでした。

border-radius.htcを使ってみる

border-radius.htcのダウンロード先はこちら
[curved-corner – CSS curved corner – Google Project Hosting]
http://code.google.com/p/curved-corner/

記述方法はこちら

moz-border-radius: 5px;	//for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px;		//CSS3
behavior: url(border-radius.htc);//for IE

border-radius.htcの動きとしては、
moz-border-radius、-webkit-border-radius、border-radiusで指定されている値を取得してるようです。

FORM要素のINPUTタグでも使える!と喜んでみたものの残念な結果に。
こちらのブラウザ(IE8)で確認したところ、合計で30個まではOKで31個以上のborder-radius.htc呼び出しがあった時にエラーとなっています。それも意味不明なJavascriptエラーです。
「エラー:引数が無効です」

デザイン的に細かいところまで角丸を実現させようとするborder-radius.htcではかなり厳しいですね。
一番単純な方法としては、Borderを無くして、背景に角が丸い画像を置くのが一番良いかもしれませんね。

author :: futoshi / Category :: Blog,CSS,Javascript,technology / Date :: 2013-11-19 / Comment :: 1 Comment »

2013-11-08

jQueryのstop()でキューを削除できる!

jQquery使いまくってますが、あるオブジェクトをanimate()させた時に、そのanimate()を何度も実行するケースがあるとおもいます。

一度きりの動作であれば問題ありませんが、mouseoverやscrollTopで動作する場合はanimate()の処理がQueueing(待ち行列)に入り、最初の処理が終われば次の処理、次、次、、、となってしまいます。

stop()の引数が重要

通常、慣例的にobject.stop().animate()と書いている方がいると思うんですが、このstopはstop(false,false)という引数を省略して書いていることになります。

個の引数については、動作検証も含めて以下のサイトがとても詳しかったのでご紹介します。

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

stop([clearQueue], [gotoEnd])

となっており、第一引数がclearQueue。上記でも説明した通りデフォルトがfalseなので、Queueをクリアしないがデフォルトです。これをtrueにすることですべてのQueueを削除してくれます。

第2引数はgotoEnd。これは、現在の処理を最後まで行うかどうかです。

オブジェクトがある位置まで移動し、その後次の目的の位置に移動するなど、2段階以上の位置を移動させる場合に有効ですね。

たとえば、横移動させたあとに縦移動させる場合は、横移動の最後の位置まで移動させてから縦移動しないと、終わった時の位置がずれますね。

jQueryデザインブック 仕事で絶対に使うプロのテクニック

author :: futoshi / Category :: Javascript,technology / Date :: 2013-11-08 / Comment :: 1 Comment »

2013-10-25

jQuery DOCTYPEが無いとIE動作不良!

10年くらい前のソースコードを修正していて、動作的にもJQueryで書き換えたほうが簡単と思い、書き換えてたんですがうまくいかず。

IE8 or IE7で動作をしないといけないので、JQueryは、1系の最新を利用。

JQueryは無事動いたが、$(window).scrollTop()が動かない。常に0を返す。Google検索でも、

$(window).scrollTop()は、$(‘html,body’).scrollTop()が良いと書いてあったりしたけど、うまくいかず。
http://www.atmarkit.co.jp/ait/articles/0911/13/news100_14.html

問題なのは、IEだけです。

では、新規に作ってテストしてみようと思い、先日発見したhttp://jsbin.com/こちらのサイトへ。ここだとIEでテストできるからいいよね。

そこで作るとScrollTop()が動作する。???と思って調べていると、どうやr、あHTMLの前にDOCTYPEの指定が必要みたい。

<!DOCTYPE html>

これを先頭に追加したのみ。動かなかったのはウソのようにすべて問題なく動作。

結構重要ね。これ。

author :: futoshi / Category :: Blog,Javascript,technology / Date :: 2013-10-25 / Comment :: No Comments »

2013-10-16

JavaScriptとCSSをブラウザ上で開発しよう

jsbin_image

ちょっとした動作確認や実験をしたいとき、テキストを編集して、ブラウザで表示してみて、、という作業になると思います。

パラメータを変更したり、ミスを直したりするのにも若干煩わしさがあったり。

jsbinというサイトでは、直接ブラウザ上でHTMLやJavaScript、CSSを書くことができ、リアルタイムでその実行結果を確認できます。
されに面白いところは、jQueryが使えるところ。
もちろんバージョンもいくつか選べます。

JQuery UIやbootstrap、prototype,YUI,dojoなどなど。あらゆる有名どころはすべて使えます。
もちろん自分で使いたいものを「Add library」にて選ぶだけ。

まずは、使ってみましょう。

http://jsbin.com/

このjsbin、さらに面白いことにこのシステム全体がオープンソース(OSS)で公開されました。
DB(MySQL)+web(apache)を使ったシステムになるようです。

ダウンロードはこちらから。
jsbin -GitHub
(https://github.com/remy/jsbin)

author :: futoshi / Category :: CSS,Javascript,technology / Date :: 2013-10-16 / Comment :: No Comments »

2013-07-06

PHPのSmaryとJQuery(Javascript)を使うには?

自分の過去のブログで実は実現していたことがすっかり忘れていたので、再投稿。
JQuert(Javascript)でのデータ形式であるJSON形式。これは、”{“や”}”が使われるため、SmartyのTemplateタグと同じです。これがあると、Smartyとして解釈されてしまうため、例外が発生してしまいます。これをパスするために、Smartyのデリミタである”{“を変更します。
あまりにも違うものだと他の人が見たときに分かりづらくなるので、”{!”こんな感じか、”<!{” “}>”こんな感じにすることで、回避させます。

http://gcblog.net/tips/archives/2008/1126_083630.html

Smartyクラスを継承しxxxSmaryという独自のクラスを定義。独自クラスを定義せずとも、

new Smarty();で作成したインスタンスで、直接->left_delimiter、right_delimiterを設定することで対応も可能だけど、多用する場合は、クラスで定義しておくと便利。

ついでに、template_dirとかも。

class xxxxSmarty extends Smarty{ // Smartyクラスを継承したxxxxSmaryクラスを定義します。
  public function __construct(){    // __construct()はPH5以上です。
    $this->Smarty();
    $this->left_delimiter = "{!";    
    $this->right_delimiter = "}";
    $this->template_dir = "xxxxxxxx/templates";
    $this->compile_dir = "xxxxxxxx/templates_c";
  }
}

author :: futoshi / Category :: Javascript,PHP / Date :: 2013-07-06 / Comment :: No Comments »

2008-06-19

Ext.JS GroupingViewをAjaxでJSON形式で扱ってみる

sc0003.png

Ext.JSでグルーピング表示のサンプルがあったので、使ってみました。以下Ext.JSのサンプルページ

http://extjs.com/deploy/dev/examples/grid/grouping.html

集計もやってみましたが、集計はまだExt。JSには実装されていないようで、サンプルページのJavascriptからいただいて実装していますが、割愛させていただきます。

ソース中に静的に書かれたデータをds(以降、データストア)に読み込み、GroupingViewで表示するサンプルでしたが、このデータをAjaxで取得して動的に更新できないものかやってみました。

まず、AjaxでJSON形式のデータを取得するので、dsにJsonStoreを使おうとしましたが、できませんでした。

そもそも、グルーピングの基本は、dsにGroupingStore(Ext.data.GroupingStore)を使わなければなりませんでした。以下サンプルです。

補足:指定期間のデータを取得してきて、「division」フィールドでグルーピングします。sort情報(sortInfo)という項目ですが、必須のようです。なので、データにtypeがあり、そのtypeで昇順にソートを指定してます。listenersのbeforeloadでds.load()される前に、textFiled(monthDate)の値を取得してセットしています。

ds = new Ext.data.GroupingStore({
proxy    : new Ext.data.HttpProxy({
url        :     ‘/ajax.php’, // ajaxでjsonを返却するもの指定
method    :    ‘POST’
}),
baseParams : {
dateFrom            : ‘20080406’,
dateTo                : ‘20080412’
},

reader    : new Ext.data.JsonReader({
root : ‘results’,  // JSONのrootタグをresultsとしてます。
totalProperty : ”
},  rec  //rec は別途Ext.data.Record.createで作ったレコードの型
),
groupField    : ‘division’, // divisionでグループ化
sortInfo    : {field:”type”,direction:”ASC”},
listeners:    {
‘beforeload’    :     function(){
var month = Ext.get(‘monthDate’).getValue();
if(month != “”){
this.baseParams.dateFrom     =month;
}
}
}

あとは、dsをExt.grid.GridPanelのstoreで指定します。

次にExt.grid.GridPanelのview部分ですが、
view : new Ext.grid.GroupingView({
hideGroupedColumn : true
})
で、グループ化したフィールドを非表示にできます。そのあたりは、サンプルにもあるので、割愛します。

データストア(ds)という、データが保存されている場所とそれらを表示するGridなどのビューの部分の関係がすこしば
かりわかったきがしました。

author :: futoshi / Category :: Javascript,technology / Date :: 2008-06-19 / Comment :: No Comments »

PR