WYSIWYGエディタで画像のアップロードを行う | Webエンジニアブログ
WYSIWYGのエディタSummernoteではファイルアップロード機能を実装できる Data URI schemeとFile Upload Bootstrap3でデザインされたWYSIWYGのエディタSummernoteに画像アップロード機能を実装する。 SummernoteをCakePHPで利用する SummernoteにはデフォルトでData URI schemeで画像ファイルをエディタに貼り付けることが可能。実際に画像を貼り付けて、HTMLのソースコードを確認してみたのが下の画像の状態になる。 Data URI schemeの方法を用いると画像をサーバ側にアップロードすることなく、画像をすべてエンコードしてテキスト状態にして貼り付けるため、画像を参照するためのHTTPリクエストが発生しないというメリットがある。 File Upload方式にて画像を管理したい場合には、Summern
【JavaScript入門】FormやAjaxのPOST送信・取得の方法まとめ！ | 侍エンジニアブログ
特に２つ目の「第三者に知られずに」…というのは重要です。「GET」の場合はURLに送信する情報が表示されるので、大事なデータは「POST」で通信する必要があります。 例えば、パスワードなどユーザー情報をサーバーへ送信する場合には注意が必要です。 FormによるPOST この章では、Form(フォーム)を使ったPOST通信の方法について学習していきます。HTMLを使った基本的な手法と、JavaScriptから動的に通信する方法について見ていきましょう！ Formを使ってPOST送信する方法 まずは、HTMLからFormを作ってPOSTする方法について見ていきます。考え方としては、送信先となる「サーバーのパス」と通信方法の「POST」をFormタグに指定すればOKです。 <form action=【サーバーのパス】 method="POST"></form> サーバーのパスは「action属性
HTMLファイルからPOSTでJSONデータを送信する - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLファイルからPOSTでJSONデータを送信する</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#response").html("Response Values"); $("#button").click( function(){ var url = $("#url_post").val(); var JSONdata = { value1: $("#value1").val()
CakePHPとJSONでAjax用APIを作る方法
以前、CakePHPでjQueryのAjaxを使う方法というエントリーを書きましたが、 今回はJSON形式の配列を返却するAPIを作ってみます。 ここ一年間、APIを設計したり使ったりしましたが、自分なりのノウハウをまとめてみようと思います。 JSON形式で返すメリットjavascriptでオブジェクトとしてそのまま扱えるPHPから他の言語へデータの受け渡しが容易JSONはXMLなどと比べ軽量JSONを返すWebAPIはjavascriptとの相性も良く,Ajaxでのやりとりにも使えます。 PHPの場合はjson_encode、json_decodeで等でJSONと配列を簡単に変換できます。 $json = json_encode(array('あ', 'い', 'う')); echo $json; // ["\u3042","\u3044","\u3046"] ※["あ","い","う"
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
JavaScriptテストの基礎知識と使えるフレームワーク6選
JavaScriptテストの基礎知識と使えるフレームワーク6選：フレームワークで実践！ JavaScriptテスト入門（1）（1/3 ページ） しっかりとJavaScriptの“テスト”を行うために、最近のJavaScript事情やテストを取り巻く環境、今注目のテストフレームワークを6つ紹介する JavaScriptでもテストを書こう ＠ITの読者の方たちのほとんどは、どのような言語を主に利用しているのかなどの違いはあるにせよ、日常的にプログラムを書いている方たちが多いかと思います。 アプリケーションを作る、ライブラリを作成する、オープンソースプロジェクトに貢献するなど、皆さんがプログラムを書く場面はそれぞれいくつかあるはずです。それらプログラムを書く場面に共通して大切な習慣の1つとして、「作成するプログラムに対しては必ずテストコードを書く」ことがあるのは、誰にでも同意してもらえることでし
phiary
はじめに 今更な感じもしますが, わりと最近でも jQuery UI を使うことがあります. まぁサクッとドラッグや並び替えを実装しようと思うと jQuery UI が一番楽だったりするんですよね. ただ, 普通に jQuery, jQuery UI を読み込むだけだとスマートフォンのようなタッチデバイスでちゃんと動いてくれません. jQuery UI Touch Punch そこで使えるのが『jQuery UI Touch Punch』です！！ なんとこれ, 読み込むだけで jQuery UI をタッチデバイス対応してくれます. 中でやってることはマウスイベントをタッチイベントに切り替えてるだけなんですけどね. jQuery UI Touch Punch - Touch Event Support for jQuery UI furf/jquery-ui-touch-punch: A d
ぼくのかんがえたさいきょうのElectron - Qiita
はじめに ElectronはNode.js + HTML5フロントエンドのいいとこ取りな開発が行えるのが特徴です。その分、開発環境もElectronならではの考慮・工夫が必要になります. 今回のエントリでは, Electronアプリを快適に開発するための開発環境Tipsを書いていきます. そもそも「Elecronってなんぞや？」とか「どういう風にアプリを作るの？」という方については, 手前味噌で恐縮ではありますが, Electronでアプリケーションを作ってみよう を目を通すことをオススメします. また, 今回のエントリの元として、Quramy/electron-jsx-babel-boilerplate のレポジトリが出来上がっています. React + Bable + Sass + Livereload + Platform用Packaging 入りのBoilerplateですので,
Google Calendar API で日本の祝日データを取得
Google Calendarから日本の祝日データを取得する方法についての調査メモ。 ポイント GDataを使う場合はデベロッパーKEYが必要だが、GDataを使わなくても日本の祝日カレンダーは取得できる。祝日名と日付を取得したい場合、Projection valueは"full-noattendees"で。（fullより少しだけデータが小さくなる。）利用規約はGoogleカレンダー利用規約。 日本の祝日カレンダーのID japanese__ja@holiday.calendar.google.com （Googleカレンダーの公式版）japanese@holiday.calendar.google.com （Googleカレンダーのもう1つのID）outid3el0qkcrsuf89fltf7a4qbacgt9@import.calendar.google.com （mozilla.or
Ext JS例文辞典
このページはAjaxフレームワークの1つであるExt JSのサンプルを掲載しています。Ext JSのバージョンは3.1.0を基準としています。すべて確認したわけではありませんが、3.0.0で動作していたものは、基本的にそのまま動作するようです。 ミスや間違い、リンクエラーなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 また、サンプルの追加修正に関してはブログにてアナウンスしています。 Last update : 2010/1/1 2008-2010 Copyright 古籏一浩(KaZuhiro FuRuhata) ■ASCII.jpでのExt JS記事 jQueryとも共存できる「Ext JS 3.0」入門 Ext JSでGoogleマップを表示するチュートリアル 入門Ext JS：デスクトップ風メニューバーを表示しよう 入門Ext JS：グリッド
Node.js + Socket.IO + jQuery で最小構成チャット - Qiita
遅ればせながらNode.js始めまして、チャットアプリを作ってみました。 なるべくソースが短くなるようにしてみました。 server.jsとindex.htmlをWebサーバの同じ場所に置いて node server で起動します。 ブラウザからサーバの3000番ポートを開いてチャットが出来ます。例http://example.com:3000 var html = require('fs').readFileSync('index.html'); var http = require('http').createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); }); var io = require('socket.io')(http); http.
encodeURIComponentをサーバ側で文字化けずに受信 - プログラマー'sペイジ
encodeURIComponent()を使ってAjaxで送信した日本語文字(〜など)が，サーバ側で文字化けする場合への対処． ブラウザからサーバに日本語文字列を送信する時の話だが， 普通にHTMLでサブミットする場合は，ブラウザが勝手にそのページの文字コードかつURLエンコーディングした結果を送信してくれるので， 特に何も考えなくて良いのだが，Ajaxの場合はエンコードを自前でやらねばならない． この場合，JavaScriptのencodeURIComponent()関数を使うのが一般的のようだ． これを使うと， ページのエンコーディングからUTF-8への変換 その変換結果の，URLエンコーディング の両方を行ってくれる． サーバ側では，受信した内容をURLデコードして， さらに必ずUTF-8で来ているはずなので，その前提で必要な文字コードへ簡単に変換して使うことができる． ．．．のはず
LaravelベースのCMS OctoberCMS入門 - Qiita
OctoberCMSとはタイトルの通り人気のPHPフレームワークLaravelをベースにしたCMSです。 追記 (2021/02/27) まず初めに、個人的な意見ですが、CMSと言ってますがWordPressと比較するようなものではありません。 WordPressとどちらにしようか検討している場合はWordPressをおすすめします。CMSとしてはWordPressの方が歴史が長くユーザも多いため圧倒的に使いやすいと思います。 一方、Octoberはリッチなフレームワークとして非常に優秀です。つまりエンジニア向けです。（追記ここまで） Webエンジニアの自覚が無かった私ですが、なりゆきで幾つかのサイトを開発運営していますが、開発力を持たない企業だと、SEOとか気にしだすと結局CMSが必要になってくるんですね（はじめは要らないって思っていても）。 なので、実装の自由を奪われるのが嫌で使用して
PHPを学んだデザイナに最適？フレームワークLaravelベースのCMS October
OctoberというCMSが開発中らしいです。Laravelフレームワークを利用しているらしいです。最近の流行はやはりフレームワークベースのCMSでしょうかね。 まだ開発中、ということでリンク先にあるデモ動画を見た感想です。コードがダウンロードできるようになったら、また詳しいレビューをしたいと思います。 HTMLを知っている人が管理するウェブサイトに適しているのではないかな、と思いました。多くのCMSは、「HTMLを知らなくてもできる」という点がメリットなのですが、その分、細かいカスタマイズをしようとすると、HTMLを直接編集するよりも手間がかかる、といったケースが起こりえます。Octoberなら、HTMLを知っている人にとっては編集／カスタマイズがしやすそうです。 Ajax機能の追加がしやすく工夫されているようです。通常ならHTML+JavaScript+PHPが必要となるのですが、デモ
[PHP]basename() はマルチバイトに対応できない？ | PHP Archive
ファイルパスから末尾のファイル名だけを取り出してくれる basename() は便利ですが、 ファイル名が日本語の場合などは、文字の一部が文字化けてしまったり、消えてしまったりすることがあります。 その際 setlocale() により適切なロケールを設定すれば正しく動作するようになります。 setlocale(LC_CTYPE, 'ja_JP.UTF-8'); $path = 'テスト.txt'; echo basename($path); ただし PHP のバージョンによっては正常に動作しないケースも有るようなので、代替として次のような関数を作ってみました。 <?php $path = 'http://localhost/test/日本語.txt'; header("Content-type: text/html; charset=UTF-8"); echo mb_basename($
Wildflower - CakePHP CMS
Content management system and application platform build on CakePHP framework and jQuery Javascript library.Content management system and application platform build on CakePHP framework and jQuery Javascript library. Standards based. Open source. User friendly. Requires up-to-date LAMP stacks. PHP 5.2+, MySQL 4.1+, mod_rewrite. More features Download now Wildflower 1.2 Beta 2, released 18th Septem
[JavaScript] JKL.Calender
Kawa.netxp [JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。 2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も 別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。 合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。 Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、 最近なら YUI もオススメできそうですが、 実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。 JavaScript ソースのダウンロードはこちら： jkl-calendar.js JavaScr
wdCalendar - jQuery Based Google Calendar Clone
wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database. wdCalendar is free (open source LGPL license), easy to use, and with great functionalities. You can check out the d
CakePHP 3 Ajaxでのテスト設定(小ネタ） | バシャログ。
皆さんどうもfujiharaです。 残暑がまだまだ続きますね。個人的に海の家が解体されているのを見ると 夏が終わるんだなって気持ちになります。 本日は CakePHP 3で Ajax しか受け付けないページでのテスト設定を紹介します。 コントローラメソッド 以下の様なメソッドの場合テスト内で$this->get(), $this->post()を 使用しても反応してくれません。 コントローラ public function ajaxOnly() { if (!$this->request->is('ajax')) { ....(エラー処理) } } この場合、メソッドへのリクエストヘッダーを以下のようにして 書き換えることによって、Ajaxを偽装できます。 テスト内 public functoin testAjaxOnly() { //以下で偽装 $this->configRequest(
loadergenerator.com - このウェブサイトは販売用です！ - generate spinner loader activity loading indicator progress bar リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
