2016.12.02 (Fri) Category : HTML5,Javascript,technology Author :

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データを送ることができます。

2015.07.03 (Fri) Category : Blog,CSS,Javascript,technology Author :

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です。

2013.12.04 (Wed) Category : Blog,iOS,Javascript,technology Author :

既存の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

2013.11.20 (Wed) Category : ASP.NET,Blog,Flash,HTML5,iOS,Javascript,PHP,technology Author :

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上のこの表は、どのような表現になるのかテストするの飲みよいでしょう。

 

2013.11.19 (Tue) Category : Blog,CSS,Javascript,technology Author :

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を無くして、背景に角が丸い画像を置くのが一番良いかもしれませんね。

%d人のブロガーが「いいね」をつけました。