サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
studio-key.com
ドラッグ＆ドロップで複数画像をアップロードする 2017年05月23日 今更感が有りますしあちこちで紹介されていますが、とある案件で画像アップロードが必要になり、昔ながらの画像選択ボタンをと考えていたのですが、SNS等の利用経験があると画像はドラッグドロップで複数枚をいっぺんにアップロード出来るものだと知ってらっしゃる方も多く・・・プラグイン等も公開されてはいるのですが、企業の基幹システム系等、機密性を重視するプログラムではあまり使いたくは有りませんので、自作する事にしました。 ちなみに、FileAPI非搭載のブラウザは動作しません。まぁIE９以下ですが・・・そろそろIE10以上前提で書きたいですね・・・IE7で表示がおかしい！バグだ！っと指摘される事が未だにままあるので(泣 ドラッグ＆ドロップで画像をアップロードする サンプル 先ずはドラッグドロップで即画像をアップロードする簡単なサンプ
Google Material icons + 文字列で縦を揃える 2018年03月16日 Google Material Iconsという、WEB制作の現場でアイコンを使いたいときに重宝するサービスが有ります。例えばお問合わせボタンの横にメールアイコンを表示したい場合等にとても便利です。 サンプル 使い方は至って簡単で、GoogleのCSSを読み込ませ、ここからアイコン表示用のHTMLを取得するだけです。 <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <i class="material-icons">email</i> と、ここまではたくさんのサイトさんが解説しているのですが、実際の現場でリンク文字列の横にアイコンを配置してみると
jQueryデートピッカーの使い方を少しまとめました 2016年04月21日 システム案件を書いているとjQuery.datepickerを使うケースが割と多いのですが、だからと言って毎日書く訳でもないので忘れがちです。自宅サーバーに自分用虎の巻を登録するプログラムがあるのですが、ごちゃ～としているので少し纏めてみました。 セットアップ <link type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src
本来は有償フォントだそうです。 http://glyphicons.com 作者がBootstrapへ260個のアイコンを無償提供しているようで、このアイコンを使う場合は上記のサイトをリンクして欲しいそうです。 ロイヤリティフリーのプロ版でも$59なんで、Bootstrap以外のサイト用に買っておいてもいいですねこれ。 ただ、コード覚えるのも選んでコピペも面倒なんで、アイコンクリックしたらテキストフォームに入るようにしましたので、お使い下さい。
HTML上でカレンダーから複数の日付を選択したい 2015年02月25日 タイトル通りですが、今やっている案件で、運行日をカレンダーから複数選択させたいというものが有りまして、datepickerの類は使えないですし、UIもちゃんとしたいと思い、書いてみました。 サンプルは送信すると選択した日付を表示しますのでお試しを。 サンプル javascriptはこんな感じです。 設定 $(function(){ $('.mycalendar').cehckcalendar(); }); カレンダーはtableなので、それ関連のCSSを少し書く必要が有りますが、デフォルトはこんな感じでPOSTすると選択した日付が取得出来ます。 カレンダーを複数月に渡り表示したい といった事も可能です。 サンプル $(function(){ $('.mycalendar').cehckcalendar({ 'star
data-toggle="tooltip" data-placement="{left,top,bottom,right}" data-original-title="{text}" これはjQueryPluginなのでjQueryコードを書く必要が有ります。 $(function () { $('[data-toggle="tooltip"]').tooltip() })
jQueryでメールフォームをノンリロードで処理する 以前同じエントリーを公開していましたが、今見るとあまりに稚拙！なので、一端削除して書き直しました。また、今回は自作プラグインぽいものを使い、より簡単に作る方向で解説していきます。 まず、入力チェックにはjquery.validationEngineを使います。 詳しくはこちらで解説してますのでご参考にどうぞ。 自作したプラグインぽいものはこちらからどうぞ めんどいから全部ちょうだい！って方はどうぞ 各ライブラリーやCSSを読み込みます validationEngine.jquery.css" rel="stylesheet" type="text/css"> src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> type="text/jav
項目をcol-sm-2、フォームパーツをcol-sm-10としています。 お名前のようにテキストフォームのサイズを変更したい場合はform-inlineをclassに加え、sizeで調整します。 好みですが、デフォルトだとフォームパーツが大きく感じるので、input-smで小さくしています。 あと、col-sm~には余白が無いのでフォーム同士が上下でくっついてしまいます。 サンプルではstyle~で指定していますが、col-sm-10に対して余白が出来るようCSSを上書きすると良いかもです。
jQueryでボタンを押した時に100%になるようにしてるだけなのですが、アニメーションしてくれるようです。 数値が決め打ちなら良いかもしれません。
STUDIO KEYが自分で使う為のリファレンスとして作成しています。 文中の表現などは個人的な解釈が多く含まれますので、必ずしも公式サイトの説明をネィティブに翻訳・補足している訳では有りませんのでご了承下さい。 また、このサイト自体をBootstrapで作成していますので、掲載しているサンプルはタブレットやスマートフォン端末で確認、或いはブラウザを縮めるなどで実際に効果を確認出来ます。
レスポンシブでシンプルなイメージスライダーを作ってみる 2015年02月28日 配布レベルに調整したものを以下で公開していますのでどうぞ！ https://studio-key.com/jquery-image-slider/ 画像をスライドするイメージスライダーがたくさん公開されていて、どれも素晴らしいものばかりです。CMSだとプラグインも豊富ですし導入も簡単ですが、これが仕事となるとそうもいきません。例えばコーディングだけを依頼されるケースです。Illustratorで作成したデザインを頂き、それを起こすケースで「ここはスライダー使って下さい」と指示されると、それは自分で組み込む事になります。 そこで色々とプラグインを探す事になるのですが、どれも高機能だったり余計な機能が多くてカスタマイズが大変であったりなど、なかなかシンプルなものが手に入りません。あと、シンプル過ぎてレスポンシブで無
画像の一部を拡大して別枠に表示する 2014年09月16日 画像の一部を別枠に拡大表示する ショッピングサイトなんかで見かける、写真上の枠を移動し、その部分を拡大して表示するものを作ってみました。 写真は茅野愛衣さんです。えーと、好みのタイプでして…拾った画像なんで問題あれば差し替えます… サンプル１- 2倍 サンプル 2 -3倍 Flash使ったりなど、方法は色々あると思うのですが、作成したものはjQueryを使ったものです。やっている事は割と単純で、ドラッグする枠の左と上からの位置を取得し、倍率を掛けたものを右の枠の背景画像 background-position へ指定します。ドラッグする度にpositionが変化するので、リアルタイムに動いているように見えるって感じです。 ブラウザ対応 IE6がバツ。それ以外は大丈夫なようです。 画像の準備 仕様的には何倍でもいけますが、元画像の大
表示・非表示を切り替えます。例えばヘッダー画像をPC用、タブレット用、モバイル用と用意しておき、それぞれ表示させるケースなど。 visible - モニターが当該のサイズになると表示 hidden - モニターが当該のサイズになると非表示 大変失礼だけど、非常に判り難い 例えば、このサイト上部にあるテーマ変更はタブレットサイズになると隠れるようにしてます。 その為に指定しているのは visible-lg visible-md これだと自分でタブレット以下では非表示にするというコードを書いた方が一発でいけますね。
jQueryでスマフォアプリっぽいチャットを作ってみました[更新] 2015年01月24日 jQuery チャットに関して jQueryチャットはパソコン・スマートフォン・タブレットなどの各種ブラウザで動作するチャットシステムです。LINEなどのコミュニケーションアプリに出来るだけ近づけるよう、スタンプ機能や画像アップロード機能などを備えています。 2015年1月24日おえかき機能付きを作っています サンプル 通常版 SQlite版 ROOM 1 SQlite版 ROOM 2 通常版とSQLite版の違いに関して 通常版 ログをテキストファイルに保存し、一定数になると古いログから削除されていきます。 SQLite版 名前の通り、ログをSQLiteデータベースに保存します。１つのjQueryチャットで複数のチャットルームを作成する事が出来ます。また、通常版に比べて機能が増えています。SQLi
jQuery+非同期通信でスマフォライクなチャットを作る その２ 2014年08月17日 2015年7月9日追記 : jQueryチャットの高機能版の記事を書いていますので合わせてどうぞ Sqlite版 https://studio-key.com/646.html お絵かき版 https://studio-key.com/1018.html 以前、jQueryでチャットを作る記事を書いたのですが、jQueryチャットというキーワードで来られる方が割と多くびっくりしています。LINEなどがある現代ではブラウザチャットなんて過去の遺物だと思ってましたので。 いつかもうちょとマシなものをと思っていたのですが、このお盆中の深夜、ふいに書きたくなり、朝まで掛かって新しいものを作りました。 2014-08-18追記 ちょっとスタンプ機能を付けてみました。素材はhttp://iconhoihoi.oo
$(window).scrollをトリガーとしたイベント制御 2014年10月02日 スマートフォンなどで、画面の下端まで行くと次のデータをロードする仕組みが有りますが、そんなjQueryプラグインを作っていた際に、次のデータをロードするイベントが重複してしまうという事態に陥ったので、少し考えてみました。 画面下端まで行くと次のデータをロードする サンプル [1] サンプルはブラウザをスクロールし、下端まで行くとLI部分を下に追加していくものです。下端に到達する度に追加されるので、無限になが～くなります。固定されたヘッダーにその回数が表示されます。 jQuery(document).ready(function(){ var list = $("#list").html(); $(window).scroll(function (e) { var $window = $(e.current
フォームを伴うHTMLコードを書いていると、どうしてもバリデーション(入力値の妥当性確認)が必要になります。 HTML5になると、フォーム属性である程度はカバー出来ますが、全てのブラウザがHTML5に対応し、かつ利用者の多くがこれの恩恵を受け、かつ対応出来ないブラウザを利用している方を切り捨てる時代になるにはまだまだ数年掛かります。 バリデーションの方法は大きく分けてPOST後とPOST前の二種に分かれます。 POST後のバリデーションは送信された際に、PHPやCGI側で入力内容をチェックし、エラーならメッセージを表示させるなどです。 厳密にチェックするならばこれが一番ですし、エラーメッセージなどデザイン部分も色々と工夫する事が出来ます。 ただ、簡単なメールフォームでいちいちメールアドレス形式かどうかを確認する為だけにPOSTし、エラーメッセージを表示するプログラムを書くのは面倒です。 ※
外部サイトのRSSを取得する 2015年02月14日 新規のホームページ制作をWordPressでというケースなら、ブログもそこで書けますが、既にアメブロなんかでブログを書いていらっしゃるケースで、その一覧を独自ドメインのホームページへ表示したいといった要望は割と多いです。 ブログはRSSフィードが公開されてますので取得は簡単ですし、そういったライブラリーもたくさんあるので、それを使うって手もあるのですが、私的にあまりごちゃごちゃとファイルを読み込みたくないので、自前で取得しているのですが、その方法をご紹介。 外部ブログという事で、アメブロのスタッフさんのを取得してみます。 サンプル RSSフィードの情報を取得する url_proxy.php https://studio-key.com/Sample/jquery/rss/url_proxy.php <?php $url = 'http:
お問い合わせフォームなどの確認画面をページリロード無しで表示する 2014年08月28日 確認画面を既存のHTMLを使って表示する お問い合わせフォームなど、POSTした後に確認画面を表示し、入力内容を確認して貰ってから送信するという形式のフォームを見た事があると思います。そのまま送信されてしまうフォームも有りますが、入力内容を確認出来ないのはちょっと不親切です。 また、確認画面は出るのだけど、Javascriptのアラートだったり、表組とかページデザインなど無視して真っ白なページに確認画面を出すようなフリーCGIなど、これもあまりスマートでは有りません。 今回ご紹介する方法は、jQueryを使い、フォーム部分のコーディングを活かしつつ入力確認画面を出す方法です。 サンプル 必須マーク付けてますが、バリデーションは行ってません。入力チェックに関しては最後に参考例を掲載します。 formのH
jQueryでタップやスワイプなどのスマートフォン操作を取得する＋イメージスライダーのサンプル 2014年09月15日 スマートフォンでも使えるスライダーを作りましたので宜しければどうぞー タップ、スワイプ、指を離すという動作を取得する jQueryにはスマートフォンのタップなどを取得するタッチイベントというものが有ります。ところでタップとタッチってどちらが正しいのでしょうか…よく迷います。 touchstart : タップしたときに発生 touchmove : スワイプしたときに発生 touchend : タップした指を離した時に発生 サンプルはiPhoneやAndroid等、タッチパネル搭載端末でご覧下さい。全ソース見たい方はこちらから jQuery(document).ready(function(){ /* * タップ、スワイプ、指を離した時のイベントハンドラ */ $("#tou
jQuery非同期通信でPHPから値を受け取る – 初歩の初歩の初歩 2014年08月18日 昔CGI(Perl)で掲示板なんか作って勉強していたときに、初歩的な掲示板が作れたら、後はそれに肉付けすれば何でも作れるはずだと理解しました。非同期通信に関しても、ユーザーアクションなどをトリガーにPHPと通信を行い、コールバックを受け取るという極々シンプルな事を理解すれば、後は肉付けをしていけばいいのだと思います。 サンプル 1 https://studio-key.com/Sample/jquery/10/01.html 送信された値に現在日時をくっつけたものを受け取ります。 javascript jQuery(document).ready(function(){ //ボタンを押したら処理開始 $(document).on('click','#button',function(){ var
Jquery+PHPで簡易チャットを作る 2014年03月07日 こちらで新しいjQueryチャットの記事を書きました。宜しければどうぞ！ パソコンを始めた当時はWEBチャットが盛んで、毎夜遅くまで遊んでいました。最近はSNSやLINE、Skypeなどが有りますので、もうそう需要は無いと思うのですが、ちょっと作ってみました。 サンプル ダウンロード date/chat.logのパーミッションを777へ 今回作成したものは、どちらかと言うとスマートフォン向けになっています。LINEやSkypeと同じように、下部に投稿フォームが有り、ログが下へ埋まっていくスタイルです。HTML上で動きますので、デザインなどはご自由にどうぞ。 chat.js /* * スマートフォン向け 簡易チャット * * https://studio-key.com/ * Copyright(c)2013 STUDIO K
//$("#button").click(function(){ //これペケ $(document).on('click','#button',function(e){ // クリックで実行 2014-07-24 修正 if( $("#name").val() && $("#email").val() && $("#str").val() ){ if(!$("#email").val().match("^[0-9A-Za-z._\-]+@[0-9A-Za-z.\-]+$")){ $('#error').html('メールアドレス形式で記入して下さい'); return false; } var data = $("#form").serialize(); //送信されたデータ $('#form').html('<img src="../lib/loader2.gif" />'); //ロ
Open Source PHP Script Download 商用向けのPHPスクリプトを無償配布しています。 LICENCE - The MIT License (英)(和) 著作権は放棄しません。コピーライトの削除をされたい方は事業主会員サービスをご利用ください。 重要なお知らせ 現在配布中のものは以前のライセンスのままとなっておりますが、基本的にはMITライセンスが適用されます。 今後のアップデートで随時ライセンスの記述変更を致します。
WordPress用オリジナルテーマの作成・ホームページ管理やその他CMSアプリケーションの利用、 従来のHTMLによる作成、お知らせのみを更新するWEBアプリケーション開発等、様々なご要望にも柔軟にお応え致します！
このページを最初にブックマークしてみませんか？
『北海道苫小牧市のホームページ制作 STUDIO KEY』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
