drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。 そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&ドロップを手軽に実装できるようにします。 drag-dropの使い方 drag-dropのコードです。onDrop/onDropTextメソッドを定義するだけでファイルやテキストデータが取得できます。 window.remove = DragDrop('body', { onDrop: function (files, pos) { var names = file
AMP ページにアナリティクス コードを設定する方法
A/Bテスト 5 Ads Data Hub 1 AdSense 5 AdWords 19 AdWords 連携 21 AMP 4 Analytics 1 Analytics 基本 5 API 2 BigQuery 11 Cookie 1 CPA 1 DCM 1 DFP 3 DoubleClick 11 DoubleClick Campaign Manager 1 DoubleClick for Publishers 3 e コマース 2 Firebase 8 Firebase Analytics 4 Firebase 向け Google アナリティクス 2 ga.js 2 GA4 12 GACP 18 GCP 1 Google Ads 1 Google Cloud Platform 1 Google Consumer Surveys 2 Google Insights for Search
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
知らないと損!?Remote Debuggingが個人的にすごかった件。
小ネタです。 Androidを使いこなしている人や制作者にとっては知ってて当然らしいのですが、Androidを使い始めて1ヶ月半の自分にとっては目からウロコでしたよ。 ChromeでAndroidのデバッグができるモバイルをベースに制作する案件が多い方でこの設定を行っていない人はやった方が良いです。 Remote Debugging on Android with Chrome Googleがちゃんと紹介してくれていました。USBをつないで設定すれば、Androidのchromeで開いているページをPCのChromeと同期してDevelopper Toolsで表示してくれるようになります。以下のようなイメージです。 右がPCで少し切れていますが、Developper Toolsが開いているのがわかります。 設定は簡単まず、以下の条件が必要です。 Chrome 32以上Android 4.0
Evernote APIを利用してログイン機能を実装してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのまろCです。 FacebookやTwitterといったWebサービスと連携してログインするサービスが増えていますね。 今回は、Evernoteでのログインを実装してみましたので、ご紹介したいと思います。 環境 Web上で使う場合、フロントエンドだけでは完結できなかったので、サーバーサイドをnode.jsで実装したいと思います。 OSはCentOSを使用し、nmvでnode.jsを入れ、フレームワークはexpressを使用します。 node.jsのインストール 今回は、今話題のio.jsを使いたいと思います。 nvm上ではnvm ls-remoteをするとインストール可能なnode.jsのバージョンが表示されますが、その中にio.jsも含まれています。ちなみに、node.jsをインストールする場合は、のびすけの記事に役立つものが多いです。 io.jsとは
Codeigniterで独自のバリデーションを作成する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ひろゆきです。 今日は、Codeigniterで独自のバリデーションを作成した際のメモ書きを残したいと思います。 Codeigniterはデフォルトである程度簡易的なバリデーション機能をForm_validationクラスにもっていますが、入力された値がDBに登録されているかどうかなど、ちょっと複雑なバリデーションに関しては自作するしかありません。（当たり前ですが……） 普段なら以下のようなコードで、必須チェック、数字チェック、長さチェックなどを行いますが、ここでさらに、test_idがDBに登録されている値かどうかをチェックしたい場合があります。 $this->form_validation->set_rules('test_id', 'テストID', 'required|numeric|max_length[9]'); ※trimなどは今回は省略しています。 そんなときは以
WordPressのカスタムフィールドを利用して、過去記事の公開日時を自動で変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 今回はWordPressで既に公開されている記事の、公開日時を変更する方法をご紹介します。 過去の日時に変更するのであれば、該当する記事に設定されている公開日時を編集するだけです。しかし、未来の指定日時に公開したいとなると、どのようにすればいいでしょうか。 ※いずれにしても注意しなければいけないのは、記事詳細のパーマリンク設定に年月を含んでしまっている場合です。その場合は、公開日時を変更するとURLも変更されてしまう可能性があるからです。 公開済みの記事の日付を未来に変更する場合 既に公開している記事の公開日時を未来に変更すると、どうなるのでしょうか。 残念ながら、日時を変更した瞬間に非表示状態になり、サイト上から一旦削除されてしまいます。 その後、通常の予約投稿のように、指定した日時になれば再びサイト上に表示されますが、これはあまり好ましい動作とは
gulp.jsとBrowser Syncで快適なWordPress開発環境を手に入れる
Browser Sync のインストール まず、BrowserSyncをダウンロードします。BrowserSync をダウンロードにはnpmコマンドを使用します。npmコマンドを使用するための設定については、はじめての gulp.js！Mac で CSS ファイル、JavaScript の圧縮を行おう gulp-css-sass-268を参考にしてください。 BrowserSync の動作確認 BrowserSync のインストールが完了したら動作確認しましょう。BrowserSync を起動するためには、以下のコマンドを実行します。これで、cssディレクトリ配下に保存されている CSS ファイルが変更される都度、ブラウザがリロードされます。
IFTTT から Blog の更新を自動で画像付きツイートするためにフィードを少し直した件
この Blog が更新された時、IFTTT から自動的に自分の Twitter アカウントに 「画像付きツイート」 を投稿するための IFTTT レシピと、投稿に意図した画像を使ってもらうためにフィード側で行った修正についてまとめました。 この Blog を更新した際、IFTTT から自動的に自分の Twitter アカウントに投稿するっては昔からやっていたんですが、ちょっとそのツイートを画像投稿と合わせた、所謂 「画像付きツイート」 にしようと思って、やってみた件について書いてみたいと思います。 画像付きツイートってのは、Twitter に画像をアップロードして、それへのリンクもついたツイートのことですね。なので記事へのリンクとあわせて、ツイート内に URL が 2つ入ることになります。 具体的には下記みたいなやつ。 Blog更新 -> SVG のフォールバックは結局 Modernizr
Google Maps APIをコピペで使い倒せ！Web初心者でもカスタマイズできるgmaps.js | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。 最近はひさしぶりに浅草をランニングして健康オタクを気取っています。 さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特にGoogle Mapsを呼び出しているものが多いですね。 そこで今回は、そのGoogle Mapsをカンタンに導入できるgmaps.jsを使ってみたいと思います。コピペで試せるので、JavaScriptが得意ではないデザイナーやコーダーの方にもおすすめです。 http://hpneo.github.io/gmaps/ gmaps.jsはGoogle Maps APIを使いやすくしてくれるライブラリです。 そのメリットは大きく3つあります。 1. シンプルなコード 記述方法がとてもカンタンで、通常のGoogle Maps APIよりも分かりやすいソースコード
:checked擬似クラスでチェックボックスに連動して要素を表示させる方法
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 １．はじめに 次のようなチェックボックスがあるとします。 そして、チェックボックスのチェックに連動してテキストフィールドを表示（または非表示）させるものとします。 このような制御を行いたい場合、次のようなjQueryを書けば実現できます（よりエレガントな書き方はあると思いますが）。 <script> $(function(){ $('input[type=checkbox]').click(function() { if ($(this).prop('checked')) { $('.bar').show(); } else { $('.bar').hide(); } }); }); </script> <div class="foo"> <input id="foo" type="c
jQueryを使用して指定したハッシュタグのつぶやきを取得する
Posted: 2010.12.11 / Category: javascript / Tag: jQuery, json, Twitter, 正規表現 Twitterのつぶやきを表示しているWebサイトがだいぶ多くなってきた昨今。イベントサイトなどでは特定のハッシュタグのつぶやきを表示するといった使い方もされているようです。 ということでこの記事ではjQueryを使用して指定したハッシュタグのつぶやきを取得して表示してみます。 Twitterのハッシュタグを検索し取得するURI Twitterからはさまざまな形式でデータを取得できますが、jQueryを使用するならjson形式が便利です。 ハッシュタグを取得するURIは下記です。 http://search.twitter.com/search.json?q=%23[ハッシュタグ名] [ハッシュタグ名]は取得したいハッシュタグ名に置き換え
jQueryでCSSアニメーションを実行させる方法｜BLACKFLAG
以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】」と題して、 CSSアニメーションの実行パターンをいくつか紹介しましたが、 アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が 簡単でいろいろとこの先使えそうだったので紹介してみます。 構成としてはCSS側でアニメーション設定をしておいて jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで その要素に対してアニメーション制御をする形になります。 例えばHTMLには 以下のようなidを付けたdivを用意して、 ◆HTML <div id="action"></div> CSS側では 以下のようにアニメーションをセットします。 ◆CSS #action{ top: 0; left: 0; width: 50
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
