開発メモ

開発用のメモです。

Web

JQuery delegate/live/bindとついになる関数を on/off に転送する

<script> $(document).ready(function(){ $.fn.delegate = function(selector, action, callback) { $(this).on(action, selector, callback); } $.fn.undelegate = function(selector, action) { $(this).off(action, selector); } $.fn.live = function(action, ca…

JQuery で $.browser を 擬似的に追加する。 (古いプラグイン対応)

<script> $(document).ready(function(){ // MSIE $.browser.msie = (navigator.userAgent.match(/(MSIE|Trident)/ig)) != null; // safari $.browser.safari = (navigator.userAgent.match(/Safari/ig)) != null; // mozilla $.browser.mozilla = (navigator.userAg…

Openssl Windows サーバー証明書の作成

SET PATH=C:\Program Files (x86)\OpenSSL-Win32\bin;%PATH% SET OPENSSL_CONF=C:\Program Files (x86)\OpenSSL-Win32\bin\openssl.cfg cd C:\Program Files (x86)\Apache Software Foundation\Apache2.2\conf\ openssl genrsa -des3 -out server.key 2048 o…

JQuery $(":checkbox").attr("checked", "") で チェックをはずす

<script> $(document).ready(function(){ $.fn.origAttr = $.fn.attr; $.fn.attr = function(key, value) { var keys = [], i = 0; keys[i++] = "checked"; keys[i++] = "selected"; keys[i++] = "requred"; keys[i++] = "multiple"; keys[i++] = "readonly"; keys[i…

CMSデザイナー ブートストラップ用グローバルメニュー デザイン

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" /> <xsl:template match="/entrylist"> <ul class="nav navbar-nav"> <xsl:for-each select="entry"> <li> </li></xsl:for-each></ul></xsl:template></xsl:output></xsl:stylesheet>

サイドメニュー(3段階~)

Web

<style type="text/css"> .globalmenu { background: rgb(128,128,128); overflow:hidden; margin: 5px; padding: 5px; width: 350px; text-align:right; display:table-cell; vertical-align:middle; } .globalmenu > ul { text-align:right; margin:5px; padding:0; } .globalmen…

グローバルメニュー(3段階~)

Web

<style type="text/css"> .globalmenu { background: rgb(128,128,128); overflow:hidden; margin: 5px; padding: 5px; width:calc(100% - 10); height:35px; text-align:right; display:table-cell; vertical-align:middle; } .globalmenu > ul { text-align:right; margin:5px; p…

グローバルメニュー(2段階)

Web

<style type="text/css"> .globalmenu { background: rgb(128,128,128); overflow:hidden; margin: 5px; padding: 5px; width:calc(100% - 10); height:35px; text-align:right; display:table-cell; vertical-align:middle; } .globalmenu > ul { text-align:right; margin:5px; p…

グローバルメニュー(1段階)

Web

<style type="text/css"> .globalmenu { background: rgb(128,128,128); overflow:hidden; margin: 5px; padding: 5px; width:calc(100% - 10); height:35px; text-align:right; display:table-cell; vertical-align:middle; } .globalmenu > ul { text-align:right; margin:5px; p…

Salesforce で JQuery をつかう

<apex:page> <apex:includeScript value="{!$Resource.jQuery}" /> <script type="text/javascript"> jQuery.noConflict(); </script> </apex:page> jQuery.noConflict() を実行する必要がある $(selector) ではなく jQuery(selector) で処理

Salesforce Visualforce で Jquery.ajax による更新

<script type="text/javascript"> jQuery(".ajax_id:checked").each(function(i,o){ var title = jQuery(o).attr("title"); console.log(title + ": start"); jQuery.ajax({ "url" : "/apex/pageName", "data" : { "id" : title }, "async" : false, // 非同期通信の場合 自動#はエラーにな…

Salesforce Visalforce で JSON レスポンス用 APEX ページ

<apex:page controller="jsonController" action="{!init}" contentType="application/x-JavaScript; charset=utf-8" showHeader="false" standardStylesheets="false" sidebar="false"> {!jsonString} </apex:page>

JQuery で全チェックを行う

<script type="text/javascript"> function allCheck(className, object) { jQuery("." + className).prop("checked", jQuery(object).prop("checked") ).click(function(){ jQuery(object).prop("checked", false); }); } </script>

Salesforce で JQuery を読み込む

<apex:includeScript value='{!$Resource.jquery}'/></apex:includescript>

CSS 1画面を 横に3つわりにする。

Web

CSS .grid3 { } .grid3 > div { width: calc((100% * 1/3) ); float: left; } HTML <div class="grid3"> <div>area1</div> <div>area2</div> <div>area3</div> </div>

CSS ページのサイズを最低1画面にする。

Web

min-height: calc(100vh); => 1画面を最小とする height : 100%; => スクロールありで表示領域を最大とする。 margin : 0 auto; => 画面のセンターに配置する。 <html> <head> <style> * { margin: 0; padding: 0; } .header { top: 0px; position: absolute; background-colo</head></html>…

ヘッダー、フッターをCSSで固定する。

Web

html / php <html> <head> Html->charset(); ?> <title><?php echo __d("users", $this->action) ?> | <?php echo __d("users", $this->name) ?></title> Html->meta ( 'icon' ); echo $this->Html->css ( 'Users.main' ); echo $this->fetch ( 'meta' ); echo $this-…</head></html>

Cakephp + Bootstrap でフォーム(横並び)

TwitterBootstrap Controller array('className' => 'TwitterBootstrap.BootstrapHtml'), 'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'), 'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'), ); View Htm…

Cakephp nestedList を用いたパンくず

<style> ul.pan { } ul.pan > li { display: inline-block; padding: 0px; margin: 0px } ul.pan > li:after { padding: 5px; content: ">"; } ul.pan > li:last-child:after { content: " "; } </style> Html -> nestedList(array("home", "admins", "users"), array("cla…

Cakephp + Bootstrap で ドロップダウンボタン

Helper public function dropDown($name, $links = array()) { return $this -> Html -> tag("div", join("", array( "", $this -> Form -> button("SELECTED MOVE <span class='caret'></span>", array( "", "class" => "btn btn-default dropdown-toggle", "id" => $name, "data-toggl…

Cakephp + Bootstrap で Pagination

Html -> tag("div", $this -> Html -> tag("ul", $this -> Paginator -> numbers( array( "first" => "|<", "last" => ">|", "currentClass" => "active", "currentTag" => "a" ) ), array("class" => "pagination pagination-lg") ), array("class" => "te…

Cakephp + Bootstrap でテーブルレイアウト

Html -> tag("table", $thead . $tbody, array("class"=>"table table-borderd table-striped")); table-borderd テーブルにボーダーを設定する。 table-striped テーブルを1行おきに別の背景などを設定する

bootstrap レイアウト cakephp

<html> <head> Html->charset(); ?> <title><?php echo $this->fetch('title_for_layout'); ?></title> Html->meta('icon'); echo $this->Html->script('bootstrap.min'); echo $this->Html->css('bootstrap.min'); echo $this->Html->…</head></html>

bootstrap ボタン

Web

class descript btn btn-default 標準 btn btn-primary 高優先度 btn btn-success 登録処理 btn btn-info 確認処理 btn btn-warning リセット btn btn-danger 削除処理 <a href="#" class="btn btn-info">body</a> <button class="btn btn-info">body</button> <input type="button" class="btn btn-info" value="button"/>

mod_rewrite 判定一覧

# HTTP_USER_AGENT : Androidのみ RewriteCond %{HTTP_USER_AGENT} ".*Android.*" [NC] # HTTP_HOST : *.example.com へのアクセスのみ RewriteCond %{HTTP_HOST} "^.*\.example\.com" [NC] # HTTP_REFERER : *.example.com からの遷移のみ RewriteCond %{HT…

httpd 日付で mod_rewriteを実行する。

htaccess RewriteEngine On RewriteCond %{TIME_YEAR}%{TIME_MON}%{TIME_DAY} ">20140800" RewriteRule (.*) - [G]

HTTPD+SSL エラー

Web

AH00526: Syntax error on line 3 of httpd-ssl.conf: SSLSessionCache: 'shmcb' session cache not supported (known names: ). Maybe you need to load the appropriate socache module (mod_socache_shmcb?). モジュール不足です。

HTTPD ./configure OPENSSL ソースインストール

Web

./configure \ --with-apr=/usr/local/apr \ --with-apr-util=/usr/local/apr \ --enable-so \ --enable-load-all-modules \ --with-ssl=/usr/local/

特定のブラウザ上部に大きな余白があく場合の対処

Web

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }

CSS Table の表示レイアウトを壊さない

Web

table.users { margin: auto; width: 90%; table-layout: fixed; } table.users th.column-1 { width: 30px; } table.users th.column-2 { width: auto; } table.users th.column-3 { width: 150px; } table.users th.column-4 { width: 150px; } table.user…

HTML5 + JQuery <input type="submit" formaction="/User"> が未対応なブラウザも一律制御する。

$(document).on("click", "input[type=submit]", function(a) { if (!!$(this).attr("formaction")) { $(this).get(0).form.action = $(this).attr("formaction"); } });

JQuery UI アコーディオン 初期は全て閉じる

<div class="accordion"> <h3>検索条件</h3> <div> <table> <tr> <th>Id</th> <td><input type="text"></td> </tr> <tr> <td colspan="2"> <input type="hidden"> <input type="submit"> </td> </tr> </table> </div> </div> $(".accordion").accordion({ "active" : false, "collapsible" : true });

CSS Table の表示レイアウトでセルの間のスペースを作らない

Web

table { border-collapse: separate; border-spacing: 0px; } table tr> * { border-bottom: 1px dotted black; border-right: 1px dotted black; } table tr:first-child > * { border-top: 1px dotted black; } table tr > *:first-child { border-left: 1…

CSSでチェックボックスにスタイルを当てる

Web

input.checkbox { display: none; } input.checkbox + label { background-color: #EEE; border: 1px solid #000; padding: 10px; display: inline-block; position: relative; } input.checkbox:checked + label { background-color: #EEE; border: 1px sol…

CSS ページング用

Web

div.paginator_numbers { margin: auto; width: 90%; text-align: right; } div.paginator_numbers span { display: inline-block; width: 30px; padding: 2px; text-align: center; vertical-align: middle; } div.paginator_numbers span:HOVER { border: …

CAKEPHP SQL実行ログを出力

element('sql_dump'); ?> .cake-sql-log { background-color: white; border-collapse: collapse; font-size: 15px; } .cake-sql-log tr { border: 1px solid black; } .cake-sql-log tr td , .cake-sql-log tr td { border: 1px dotted black; }

CSSで表示を画面中央に

Web

div.page { width: 1100px; min-height: 700px; margin: 0; margin-left: auto; margin-right: auto; background-color: #FFF; }

CSS ボタンの角を丸くする。

Web

input[type=submit] { border-radius: 40px; /* 角を丸く */ width: 150px; height: 40px; font-size: 24px; font-weight: 600; /* ボールド */ color: #FFF; /* 文字:白 */ background-color: #00F; /* 背景:青 */ }

ページング等のリンクを固定幅で表示させ、リンクの表示をわかりやすくする。

Web

div.paginator_numbers { margin: auto; width: 90%; text-align: right; } div.paginator_numbers span { display: inline-block; width: 30px; padding: 2px; text-align: center; vertical-align: middle; } div.paginator_numbers span:HOVER { border: …

apache mod_proxy_http + mod_include で外部サイトを読み込み

ProxyPass /yahoo.co.jp http://yahoo.co.jp ProxyPassReverse /yahoo.co.jp http://yahoo.co.jp 危険だな。。

ボックスレイアウト(均等割り付け)

Web

<style> .flex { width: 1000px; min-height: 400px; margin: 0px; padding: 0px; display: -webkit-flex; display: flex; -webkit-flex-flow: row; flex-flow: row; } .flex .flex_chilled { -webkit-flex: 1; flex: 1; } .flex .flex_chilled { text-align: cente</style>…

JQuery 画像の切り替え

<script type="text/javascript"> var headerArea_img_index = 0; $(document).ready(function(){ setInterval(function(){ $(".headerArea img:visible").hide(); $(".headerArea img:eq(" + headerArea_img_index + ")").show(); headerArea_img_index = (headerArea_img_index+1) % $(".h…

HTML5 の 値チェックを無効化するボタン

html5 <input type="submit" formnovalidate="formnovalidate" value="戻る"/> struts2 <s:submit formnovalidate="formnovalidate" value="戻る"/></s:submit>

入力必須の項目

html5 <input required="true"/> struts2 <s:textfield required="true"/></s:textfield>

struts2-jquery-plugin

http://code.google.com/p/struts2-jquery/ pom.xml <dependency> <groupId>com.jgeppert.struts2.jquery</groupId> <artifactId>struts2-jquery-plugin</artifactId> <version>${struts2.jq.version}</version> </dependency>

apache2.4 のインストール

Web

ダウンロード リナックスの場合(CUI) wget ftp://ftp.riken.jp/net/apache/httpd/httpd-2.4.*.tar.gz tar -xzf httpd-2.4.*.tar.gz cd httpd-2.4.*/srclib wget ftp://ftp.riken.jp/net/apache/apr/apr-1.4.*.tar.gz wget ftp://ftp.riken.jp/net/apache/ap…

CVE-2014-0094 その2

install wget https://www.modsecurity.org/tarball/2.8.0/modsecurity-2.8.0.tar.gz tar -zxvf modsecurity-2.8.0.tar.gz cd modsecurity-2.8.0/ ./configure \ --with-apxs=/usr/local/apache2/bin/apxs \ --with-apr=/usr/local/apache2/bin/apr-1-config…

起動スクリプト

Web

/etc/init.d/httpd #!/bin/sh # # /etc/rc.d/init.d/httpd # # Control the httpd # # chkconfig: 345 44 56 # description: apache httpd # ctrl=/usr/local/apache2/bin/apachectl command=$1 # Source function library. . /etc/init.d/functions exec_ht…

configure オプション

Web

ダウンロード wget http://archive.apache.org/dist/httpd/httpd-2.4.9.tar.bz2 wget http://archive.apache.org/dist/apr/apr-1.5.1.tar.bz2 wget http://archive.apache.org/dist/apr/apr-util-1.5.3.tar.bz2 解凍 tar -zxf httpd/httpd-2.4.9.tar.bz2 tar…

Twitter: @asahina_alice