サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
blog.diimo.net
ページや記事作成時に、自動でデータを取得したいなーと思う事などよくあります。大手のWebサービスのデータベース情報や、掲示板などのデータを共有して使う事が出来るのがWebAPIサービスで、アプリケーションキー発行だけで無料で使えるものが色々あります。と、いうわけで便利そうなものをまとめてみました。 APIの概要 「RestAPI」では、クロスドメイン間でのリクエストに対応するため「jsonp」を使ってGETリクエストによる通信を行っています。jsonpはAjax通信のため、javascriptで記述したり、PHPのcUrlによるリクエスト処理が可能です。アプリケーションIDを発行し、GETリクエスト用パラメータを生成して通信を実行します。 OAuth認証を使うケースでは、シリアルキー(一般的にpublicと、private)を発行して、サーバー間で通信を実行します。リクエスト単位でトークン
GoogleMapsAPIを使ってGoogleMapを埋め込む際、経度と緯度の情報が必要になります。わざわざ1つ1つ手動で取得するのは大変なので、住所文字列からGEO情報を取得します。後でGoogleMapにバイアスをかけて情報を得たり、マーカー(ポイントフラグ)を地図上に配置したり、ストリートビューと組み合わせて使うなど色々便利です。この記事は、PHPでGEOの情報を取得した時の覚書きです。 Google Geocoding API公式ドキュメント GEOを使用する際のルール Googleの規約で、GEOを使う際は1日1,500回までという上限が定められています。同ipから1500回までのアクセスが許可されている、という事です。Google Maps API Premierに登録(アクセス数に応じて課金方式)すると、1日あたりの上限が10万回になります。また、GEOを使ったデータ取得を行
Drag&Dropは、jQueryUIのサポート機能を使って実装します。dropは単体では使いません。drag機能と組み合わせて使用します。指定したブロック要素(ドラッグアイテム)を特定のエリアへドラッグした際、何かイベントを発生させたり計算したりする際に使います。 javascriptファイルのロード 「jquery.js」「jquery.ui.core.js」と「jquery.ui.widget.js」「jquery.ui.mouse.js」の4つが必須です。jQueryUIの1.8以降は、draggableファイルとdroppableファイルが分かれているので、Draggable機能を使う場合は「jquery.ui.draggable.js」、Droppable機能を使う場合は「jquery.ui.droppable.js」もロードします。Drag&Dropの機能はほとんどがjava
jQueryUIで使えるアイコンクラスの一覧表です。アイコン画像は、サードパーティ製のものを使う事も出来ます。サードパーティ製のアイコンを使う際は、アイコンに対応したスタイルシートなどを用意して、ui-icon-●●●によって変更できるようにする必要があります。 基本的なアイコンの配置 アイコン画像は、ウィジットのクリックエリアとして使用されるli要素や見出し(h1~h6)の中に、空のspanタグなどを記述し、ui-iconとui-icon-アイコンの種類というクラス名を使って設定出来ます。デフォルトでは横並びに配置されていないので、自分でスタイルシートを調整してfloatを行います(display:blockが設定されているため)。各アイコンのサイズは16×16pxです。 ウィジットにアイコンを追加 <div class="ui-widget ui-helper-clearfix ui-
wordpressのコメントフォーム、記事出力時のスタイルシートや、アウトプットに関するカスタマイズするためのヒントです。通常コメントは管理画面の各投稿画面から「コメントを有効にする」をチェックする事で有効にします。また、管理画面の「ディスカッション」メニューから、コメント階層やコメントの表示設定を設定できるため、フォームと出力もそれに応じてカスタマイズしていきます。 記事のループエリア外でコメント出力 1つの記事に対して投稿されたコメントを出力するためには次のように記述します。 <?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); endwhile; // コメントが投稿されていれば出力(単純な出力のみ) if(have_comments()){ wp_list_comments(パラメータ配列
ページ単位で、「この記事へのつぶやき」ボタンを設置する方法です。GETを利用してtwitterAPIからデータを取得します。twitterAPIの公式サイトでコードを取得してそのまま利用するよりも、少しだけ詳細な設定ができます。 自作ボタンを設置する場合は、aタグ等を使ってリンクを貼ります。twitterが提供するシェアボタン画像を利用する場合は、aタグを記述した後に、javascriptでtwitterが提供するwidgets.jsを読み込みます。(省略しますがiframeを利用した設置も可能です) ♦ シェアボタンのURL: https://twitter.com/share ♦ ハッシュタグボタンのURL: https://twitter.com/intent/tweet?button_hashtag=ハッシュタグ ♦ リプライボタンのURL: https://twitter.com
jQueryUIのウィジット概要です。カスタムダウンロードの方法と、テーマの利用方法について解説しています。jQueryUIは「jQuery」をベースに、スタイルシートで外観を調整し、javascriptでイベントを管理してインタラクティブなUIを作成するための機能を持っています。ウィジットは「ui.core.js」「ui.widget.js」「ui.mouse.js」「ui.position.js」の4つのファイルを中心に、固有の機能を持ったウィジットファイルをロードして使用します。(version1.8以上)一番簡単な方法は、全部のUIファイルとテーマ用スタイルシートをダウンロードして一括でロードする方法だと思いますが、個別ロードにも対応しているためサイトパフォーマンスを考慮するか、好きな方法で使うと良いと思います。 ダウンロード 公式サイトから、カスタムダウンロードを行います。htt
† カテゴリー一覧 HOME Ajax (10) jQueryMobile (1) jQuery (1) jQueryUI (9) CMS (4) wordpress (4) WEBサービス (5) オンラインツール (1) ソーシャル関連 (4) WEBプログラミング (2) APIサービス (2) PHP (2) スマートフォン (1) その他 (1) メモ (1) コーディング (2) CSS3 (2)
facebookページに「いいね」「友達にすすめる」ボタンを掲載するための方法です。iframe版、facebookJavascriptSDKをロードしたHTML5版、XFBML版(facebookが提供する独自タグ)の3種類の方法で設置できます。公式サイトでコードを取得して、指定されたソースコードエリアにタグをそのままコピー&ペーストするだけです。 facebookの「JavaScriptSDK」はfacebookに関する様々なアプリケーション機能を提供するもので、スクリプトが読み込まれた後、FB.initで初期化を行い、各API機能(ウォールへの投稿、ウォールデータの取得、ユーザーデータに関する情報の取得、ログイン情報の共有など)を利用する事が出来るようになります。全ての機能を利用するためには、facebookアプリとして登録したappIdが必要になりますが、ソーシャルプラグインの利用
jQueryにも様々なプラグインがありますが、jQueryUIを使ってユーザーインターフェースを作成する方法をご紹介します。まとめて1つのパッケージとして使ったり、個別にダウンロードして必要な機能だけを使い分けすることもできます。また、カラーテーマを使って適用スタイルを自作したり、元々あるスタイルテーマを後から少し変更して文字色だけ変更するなど、テーマサポートが充実しています。 WordPressの場合、WordPressインストールディレクトリ » wp-includes » js » jquery » uiの中にjQueryUIのminファイルが格納されています。スタイルシートだけ用意すればすぐに使う事が出来ます。 jQueryUIの基礎パーツ
※サイズは一般的なものを目安にしています。 デバイス単位でのスタイルシート設定 CSS3で設定可能になった、MediaQueriesを使ってスタイルシートの読み込みを設定していきます。閲覧デバイスの横幅、解像度、アスペクト比による指定など様々な方法が設定できますが、「device-width」(閲覧デバイスの横幅)による分岐が一般的のようです。 デザインを考える前に、コーディングについて考えておきます。最初からWordPressテーマに対応したコーディングやSEO対策をしようとすると、metaタグなどがゴチャゴチャしてわかり難くなるので、後から考える事にします。まずは、ベースとなるブロックの配置と、画像などのレイアウトだけを考えて、ベースデザインを作っていきます。 ポイント テーブルタグは出来るだけ使わない ブロックサイズの横幅が変更されても縦に配置できるように、position:’fix
このページを最初にブックマークしてみませんか?
『blog.diimo.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く