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
画像からdataURLに変換
1x1サイズのbase64透過画像 DataURI 以下のようにMIME TYPE + base64文字列をIMGタグから参照して利用する <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" /> HTML5 Drag&DropAPI FileAPI UI関連はHTML5で実装 JavaScriptでバイナリデータ取得＆変換 XMLHttpRequestでURLから取得するパターン 参照先のサイト(サーバー側の設定)がクロスドメインに対応していないと取得できない Access-Control-Allow-Origin HTTP_Access_Control view source JavaScript (function(){ 'use stric
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
WebSocketでチャットアプリを作ろう① ~WebSocketサーバの立て方~
チャットやオンラインゲームなどのアプリではリアルタイム通信機能が必要になります。実装の難易度が高そうに感じられるかもしれませんが、Monacaアプリで使われるHTML5であれば、WebSocketという技術を使うことで比較的簡単に実現できます。 こちらの記事ではWebSocketの概要と、その導入方法について紹介します。 WebSocketとは WebSocketは読んで字のごとく、Web上でソケット通信を実現する技術になります。これまでのHTTP通信では一回の接続ごとに情報が送受信されて切断される仕組みでした。そのため、サーバ側からクライアントに対して情報を送る（プッシュする）のが困難でした。 サーバ側から情報をプッシュする技術として、WebSocket登場以前にも幾つかの方法がありました。 multipart/x-mixed-replace Firefoxの前身であるWebブラウザ、N
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
WordPressのウィジェットを自作するためのTips
WordPressに標準装備されているウィジェットで、自作のウィジェットを作成してみよう、という内容です。便利な機能で、クライアントワークでは割と必須ですけどあまり情報がない印象だったので復習をかねて書いてみました。 WPのウィジェットに追加できるアイテムボックスを自作する、という方法です。基本的な事しか書いてません。なので、WordPressテーマ開発のビギナーさん向けになります。 ウィジェットをテーマで使えるようにするまずはおさらい。利用しているテーマでウィジェットを使えるようにするには、その為のコードを書く必要があります。 何もしていない状態ですと、上記のようにウィジェットページには注意文しか表示されません。 まずは利用可能にする利用するためには以下のようなコードを利用中のテーマファイル内にあるfunctions.phpに書きます。 if ( function_exists('reg
PHP のソースコードを読みやすくするための工夫あれこれ
PHP Advent Calendar 2011 に参加しています。 PHP に関する記事を日替わりで書こうというイベントですね。 昨日の redsnow_ さんからバトンを受け取ってこの記事が14日目。 読みやすいってどういうこと ソースコードは読みやすい方がいいし、 あとから修正しやすい方がいい。 難読化したい場合を除けば、 この点では誰もが一致するんじゃないかと思います。 でも、じゃあどういうのが読みやすいか どのようにしてあればメンテナンスが楽かについては 人によって意見がわかれそう。 ということで、普段こういうふうにやってるよ、という例と どうするのがいいかなあ、と思っているところと 人様のコードを見て「おおこれはいいね」と思ったものを書いてみます。 同じものを見て「そりゃあンた当たり前だろう」と思う人もいれば 「そんな書き方してる人がいるのか！」と驚く人もいるかもしれない。 そ
もし『よくわかるPHPの教科書』の著者が徳丸浩の『安全なWebアプリケーションの作り方』を読んだら - ockeghem's blog
たにぐちまことさんの書かれた『よくわかるPHPの教科書（以下、「よくわかる」）』を購入してパラパラと見ていたら、セキュリティ上の問題がかなりあることに気がつきました。そこで、拙著「体系的に学ぶ 安全なWebアプリケーションの作り方（以下、徳丸本）」の章・節毎に照らし合わせて、「よくわかる」の脆弱性について報告します。主に、徳丸本の4章と5章を参照します。 4.2 入力処理とセキュリティ 「よくわかる」のサンプルや解説では、入力値検証はほとんどしていません。しかし、入力値検証をしていないからといって即脆弱かというとそうではありません。徳丸本でも強調しているように、入力値検証はアプリケーション要件（仕様）に沿っていることを確認するもので、セキュリティ対策が目的ではないからです。 「よくわかる」の中で、私が見た範囲で唯一の入力値検証は、郵便番号のチェックをするものです。以下に引用します（「よくわ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
