いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
何が変わったか（概要） jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。 なお、jQuery 3.0での特に大きな変更点は、次のとおりです。 バージョンの1本化 Deferred機能が「Promises/A+」仕様に準拠 非推奨のload、unload、errorを削除して、onメソッドに統一 カスタムセレクタの高速化 既存コードからの移行 既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
Bootstrap テンプレートは使うべきではないと思う - ボクココ
最近のはてぶITカテゴリーにしょっちゅう出てくるデザイナー向けBootstrap テンプレート。ペラ１のサイトのコードとDEMOが付随しているので文言を変えるだけで簡単にクールなwebサイトを作ることができる。例えばこんなまとめサイト。 商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ | コリス 読んだ人はきっと、「今後作るときはこういうのですぐ作れればいっか！」みたいな感じではてぶ登録するんだろうけど、実際にやってみた身としては逆に効率が悪くなった。なのでこういうのは使うべきではないと思っている。 その唯一の理由。 ちょっと変えるのが大変 最も大きな理由はこれ。自分でCSSを組み立ててないのでどんなCSS設計になっているかを理解するのに時間がかかり、逆に時間が取られるというオチ。 数ページ分くらいなら自分で一から組み立てていったほうが早かったと
blog.ishinao.net
キューエンジンとして、beanstalkdを使うんで、 yum install beanstalkd service beanstalkd start とかやってbeanstalkdをデフォルト設定で動かしておく。 Laravel 4のapp/config/queue.phpで、 'default' => 'beanstalkd', に変更する。beanstalkdを使うには追加でライブラリをインストールしておく必要があるんで、composer.jsonのrequireに、 "pda/pheanstalk": "2.0.*" を追加して、composer updateしてインストールしておく。 これでbeanstalkdコネクタを使ってキューを使う準備OK。 キューを使うサンプルとしては、単純なDBカウンタを作ってみる。 事前準備として、app/config/database.phpを書き
LaravelでOAuthを利用してTwitter、Facebook、Googleアカウントでログインを実装
LaravelでOAuthを利用してTwitter、Facebook、Googleアカウントでログインを実装 「OAuth wrapper for Laravel 4」を利用してOAuthを実装 情報流出のニュースが世間を騒がせている昨今、ログイン機構をOAuthに限定するWebサービスも増えてきました。 セキュリティ対策の難しさを考えれば、小さなWebサービスが取る戦略としては妥当なものかもしれません。 私の作成した「GOいけん（ゴーイケン）」もOAuthに限定しようかと考えたのですが「タブーに縛られない意見を投稿する」という目的から考えて、SNSアカウントを使いたくないという方もいるかと思い、通常のログイン機構も残しました。 目次 OAuth wrapper for Laravel 4の導入方法 Facebookアプリの設定 新規登録用のコントローラーを作成 ログイン用のコントローラー
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
XHTML5で実体参照を使う方法
HTML5にはXHTML版の記法も用意されていて、XMLが好きな人でも書けるようになっています。が、色々見ていたら「実体参照が使えない」という問題があるようで。。 「<」(<)とか「&」(&)とかの実体参照はXMLの基本仕様に入ってるので問題ありませんが、「」(©)や「≫」(»)、さらには空白( )など、追加の実体参照はXHTML5では使えません。 なにせこの辺の特殊文字はDTDに書かれてるので、外部DTDを指定しないXHTML5では構文エラーになってしまうのです。 そんなわけで、これらの文字を使いたいときは「©」()のように、エンティティコードを直接指定して書くことになります。うおお面倒くさっ！ XHTML5 移行メモ 必死の Web ハッカーへの推奨事項: <、>、&、"、' を除き、名前指
XHTML5と文字参照 - 血統の森+はてな
結論から言うと、XHTML構文で名前文字参照（HTML4で言うところの文字実体参照）は使用を避けた方が良いかもしれない、と言う話。、リテラルに文字を書いたほうがよい（どうしてもというなら、数値実体参照で）、というお話。 適当にぐぐって見つけたページ（XHTML5で実体参照を使う方法 - 泥のように）が大体合っていますが、微妙に舌足らずな気もするので一応メモ。もっとも、webでXHTML5を使うことは滅多にないと思うので、もっぱらEPUB3のリーディングシステム（≒WebKit？）でどうなるのか、ぐらいしか思いつきませんが。 なお、XMLについてはよくわかっていないので全然あさってなことを書いているかもしれませんのであしからず。 本題に入る前にまず文字参照（Character references）のおさらい。HTML4では、 文字実体参照（Character entity referenc
location.href （Javascript）と $_SERVER['HTTP_REFERER']; (PHP)
この記事は1年以上前の記事のため、内容が古い可能性があります。 PHPで $_SERVER['HTTP_REFERER']; を実行すると、リンク元のURLを取得することが出来ます。 これを利用するとダイレクトアクセスを防いだり、どこから飛んできたのかを調べることが出来るのですが、Javascriptの location.href = "リンク先URL"; で飛んでこられると、取得できない場合が有ります。 どういう場合かというと、「IE8以下」の場合。 またお前か・・・ 素直に「a href="リンク先URL"」を使うか、formのsubmit、PHPの「header("リンク先URL");」などの方法で飛ばすことにしましょう。 最近はIE9やFirefoxでチェックしてしまうので、見落としがちになってしまいます。注意せねば。
![location.href （Javascript）と $_SERVER['HTTP_REFERER']; (PHP)](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a89bb7bfbc7863ce7f9331fbdfb0e2b2d2e64ad/height=288;version=1;width=512/https%3A%2F%2Fnandani.sakura.ne.jp%2Fwp-content%2Fplugins%2Fwp-ogp%2Fdefault.jpg)
Bootstrap4の主な更新点 - Qiita
こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
APIを探そう。国内外のインデックスサービスまとめ | NTT Communications Developer Portal
APIとAPIを組み合わせてマッシュアップサービスを作ろうと思った場合、まず自分が欲しいデータを提供しているAPIを探す必要があります。今回はそんなAPIのディレクトリを提供しているサービスをまとめて紹介します。 PublicAPIs 執筆時点で5,330のAPIから検索ができるAPIインデックスサービスになっています。名前やAPI名などを入れることで、新しいAPIの登録申請もできるようになっています。 PublicAPIs | Directory of public APIs for web and mobile API For That 検索、ソーシャル、ファイナンスなど約20のカテゴリに分かれて登録されています。約300種類くらいのAPIが登録されています。 API For That | An API Directory Zapier IFTTTのビジネス版と言った雰囲気のサービスに
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
サーベイの回答完了までは約6分。ワールドワイドウェブの使命を継続して推進していくために、あなたの意見をお聞かせ下さい。 安定した基盤上で、次世代のウェブテクノロジーを構築 Read below what W3C Members have to say about HTML5 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コ
HTML5とCSS3を職として身につけたい人が最初に読んでほしいオススメの本 -HTML5+CSS3の教科書
HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。 HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何？ といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。 書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。
jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。 １．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ
Geo for Bootstrap, a Timeless Theme by Divshot
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
