ういすぷのブログ
ういすぷの記録帳
タグ「JavaScript」が付いた記事
( 36 件)
-
ファイルの形式を枠線の中にドラッグ＆ドロップすることで、調べることができるサービスです。ここにファイルをドロップしてくださいここに結果が表示されます#dropZone {min-width: 400px;height: 200px;border: 3px dashed #aaa;display: flex;justify-content: center;align-items: center;co [...]2025.06.22 -
JPGE（画像）ファイルに保存されているEXIF（Exchangeable image file format）情報を表示するサービスを作ってみました。JavaScriptだけで動くようにしましたので、サーバにはデータは保存されません。EXIFは、携帯電話やデジタルカメラなどで撮影した際に、画像のサイズや時間、場所、機種情報、明るさなどがファイルに保存されます。画像を表示させただけでは中身を見るこ [...]2023.07.03 -
ブラウザのお気に入りに設置することで、ちょっと便利なWebライクをおくれる「ブックマークレット」用のJavaScriptを、ブックマークレット用に変換するサービスを作ってみました。サイトはこちらです。https://app.tree-web.net/make_bookmarklet/使い方は簡単で、ブックマークに表示する「名称」と動作させるための「JavaScriptソース」をフォームに入力し、「 [...]2021.08.21 -
/::: ; ':/. _ ` -√ . :- | :' ,, ; __',,,,,"-------++++++" [...]2019.01.18 -
ちょっとTwitterで身内で話題になって作ったサービスです。真ん中の『^o^』を押すとちょっとアクションがあります。↓↓↓ こちらでお試し頂けます！ ↓↓↓直接ページを表示する場合は、こちらのアドレスまで。https://media.tree-web.net/diary/watashi/連打にも対応しています。こちらは実際に使ってみた動画です。Youtubeでもご覧頂けます。https://yo [...]2018.11.08 -
ミクダヨーの顔を押す（タップ）すると、ダヨーが喋ります。ミクダヨー ダヨー。何となく作ってみたヨー。多分スマホとかで動くはずヨー↓↓↓連打してもダヨーダヨー↓↓↓https://media.tree-web.net/diary/dayo/使い方顔を押す（タップ）してください。□ 関連記事・にゃ〜〜ん！・ぱんぱかぱ〜〜〜ん 集中線（放射線）撮影用背景・くるくる回す CSSメーカー・ブラウザで作るQR [...]2018.10.14 -
写真撮影用の集中線（放射線）が作れるWebサービスを公開しました。Adobe Illustratorでちゃちゃっと作れちゃえるのですが、いちいち起動するのもあれだし、なんだかだるいのでWebサービスにしてみました。サービスのページはこちらです。https://app.tree-web.net/panpakapaaan/ウインドウを最大化して使うと便利かなと思います。オマケで、線の数を変更することが [...]2017.11.23 -
CSSを使って要素を回転させることができますが、そちらを直感的に作成出来るサービスを公開しました。次の様な回転するモノを作ることができます。まわるよ〜.curucuru1{animation: CURUCURU_SPIN1 5s linear infinite;}@keyframes CURUCURU_SPIN1 {0% {transform: rotate(360deg);}100% {tran [...]2017.11.10 -
ちょっと遊びです。以前よりちょっと遊んでみたいなと思いながら作ってみました。だいぶオリジナル要素があります。なにせ、JavaScriptを使っているので、セキュリティがどうとかそういうのが邪魔しちゃいます。それでも、ソコソコのモノが出来たんじゃないでしょうか。ふふっ□ Thanks作成する上で参考にしたサイトの一覧です。jQuery.eachを使って時間差でアニメーションをつける方法（あらかぜ手帖 [...]2017.10.24 -
QR コードを手軽に作りたくなり、ブラウザ上で作ることができる「 QR コードメーカー」を公開しました。こちらは、JavaScript ライブラリである jQuery とプラグイン jquery.qrcode.js を利用しています。モダンブラウザでのみ利用できますので、ご了承ください。□ QR コードの作り方１）QR コードメーカーへアクセスします。QR コードメーカー２）フォームに文字を入れま [...]2017.07.03 -
ffmpeg を使って動画変換を行なう事が多いのですが、その変換を行なうためのオプションを選択して、バッチファイルを作成出来るようにするサービスを公開しました。サービスは次のURLになります。https://app.tree-web.net/ffmpeg_op/オプションにつきましては、「ffmpegの使い方」のサイトを参考にしています。http://tech.ckme.co.jp/ffmpeg. [...]2017.06.19 -
少しずつ修正とかしていた『「RTFree」用バッチ作成機』についてですが、一つ制限を解除しました。いままで、3時間だけのダウンロードでしたが、こちらの制限を外しました。サービスはこちらです。「RTFree」用バッチ作成機実は、時間設定を12時間に間違えて行なっていたところ、3時間の制限を超えてダウンロードすることが出来ました。試しに9時間の生放送がある番組をダウンロードしましたが、無事にとれている [...]2017.01.22 -
こちらのサービスは、以前紹介していた『全角英数字を半角英数字へ変換する「変換機」』の改良版となります。参考URL全角英数字を半角英数字へ変換する「変換機」を作りました。今回は、カタカナも半角へ変換出来るようにしました。通常は全角のままですが、「半角カナ」にチェックを入れるとこで、カタカナも変換いたします。□ 変換フォーム□ 使い方フォームに変換したい文字列を入力してください。お使いのパソコンや端末 [...]2017.01.14 -
半角英数字と記号を全角英数字と記号に変換するWebサービスをリリースしました。フォームに入力すると、JavaScriptを利用してその場で変換します。□ 変換フォーム□ 使い方フォームに変換したい文字を入力してください。テキストエリアですので、ある程度の長文まで対応できます。半角から全角に変換することが必要な事があったので作りました。せっかくなので公開しました。以前、全角から半角にする『全角英数字 [...]2017.01.10 -
CSSで文字や画像を点滅させることができますが、速度などを見ながら作成出来る、点滅メーカーを作ってみました。出来たソースをコピペするだけで利用できます。なお、FirefoxやChrome、iOS10のsafari（iPhone）でも問題無く動作したため、「ベンダープレフィックス」とよばれる「-moz〜」や「-webkit」を付与していません。↓↓↓こちらから設定できます。0.1s単位で5sまでの速 [...]2017.01.04 -
ランダムな英数字を生成する「パスワードメーカー」を作ってみました。こちらは、パスワードなどで利用できる、8〜32文字までで構成された半角英数字からなる文字列をランダムに出力します。特徴としては、半角なのか、数字なのか大文字、小文字なのか…判別がしにくくなる「I」「i」「O」「o」「L」「l」を含みません。また、必ず英数字の組み合わせになります。英字だけ数字だけの組み合わせにはなりません。スライダー [...]2016.12.20 -
バーコードを手軽に作れないかなと検索していたところ、ブラウザ上で作れるのを見つけました。jQueryのプラグインを利用していますが、JavaScriptだけで実現できるなんて、なんてお手頃なんでしょう。早速プラグインを使って作ってみました。下のフォームに数字を入力し、利用するバーコードのコード（JANとか）をポチポチ選ぶと、下の方に表示されます。今回利用したプラグインは「Barcode coder [...]2016.12.09 -
ちょいちょいスマホサイト（一部PCなどの大画面用）ページで見かける三本線のメニューボタンを止めました。こちらはハンバーガーメニューと呼ばれています。パンとお肉を挟んだ形がハンバーガーに見えるからだと思います。大手サイトでも採用されていますが、最近では否定的な意見を多く見かけますし、以前のデザインに戻すサイトも出てきました。例：apple.comすでにハンバーガーでもなくただの二本線。イコール「＝」 [...]2016.12.07 -
radiko関連のソフトウェア「RTFree」で利用するバッチファイルを作成するWebサービスを作ってみました。JavaScriptで動作します。※ 「RTFree」がうまく動作しないため、バッチファイルを使うことができません。ご了承ください。そのため更新は停止していますが、そのまま残しております。あくまでもニッチもニッチ。個人的に利用するように作っています。日付入力が間違い安かったりしたので、選 [...]2016.12.04 -
入力したテキストを元に、JavaScriptの貼付けるWebサービスを作ってみました。単純に、入力したテキスト（HTMLタグなどを含む）を、JavaScriptのソースとして出力する物です。次のURLからご利用できます。https://app.tree-web.net/peta_tag/□ 使い方・「変換する文字列」にテキスト（HTMLソース）を入力します。・変換ボタンを押します。・「変換結果」に [...]2016.11.16 -
jQuery のファイルやマップファイルをダウンロードする必要があり、公開されている全ファイルのダウンロードリストを製作してみました。jqueryのマップファイル[jquery.min.map]というファイルは、Google Chromeでデバッグしている時にjQueryの階層へアクセスします。特別無くてもいいのですが、サーバには404エラーログが残ります。jQuery公式サイトには、jquery [...]2016.11.15 -
ブログのデザインを少し変えてみました。そこまで大きな変化ではないのですが、現在3列（カラム）の構成ですが、そのうち真ん中の部分を少しいじりました。先日までカレンダーがあったところに、オススメの一覧とカプセルトイ、ミク関連の情報を載せました。そのしたには、最近投稿された記事を載せました。今回の更新に合わせて、一番右側の列を綺麗にしました。これで、だいぶ見やすく、整理されたんじゃないかと思います。リス [...]2016.11.07 -
ボタンを押したら「にゃ〜ん」って鳴る。それだけです！こう言うページ（ソフト/サービス）も面白いかな。連打も出来ますよ！直接ページへアクセスする場合は、こちらのURLからとなります。詳細とか、考え方とかJavaScript、jQueryを利用して実現しています。また、HTML5の<audio>タグを利用して音声・音楽ファイルの再生を実現しています。オーディオファイルは、都度ロードするので [...]2016.10.18 -
ちょっと欲しくなったので、JavaScriptでBASE64に変換する物を作ってみました。JavaScriptで変換していますので、ブラウザの影響を受けますが、サーバへアップロードなどは行なわれません。□ 使い方「参照」ボタンからファイルを選択するか、ボタンの上にドラッグ＆ドロップしてください。（FirefoxまたはChromeのみ）暫くすると変換するコードが出力されます。後は、コピペ（コピー＆ペ [...]2016.10.16 -
ブログのデザインを少し変えてみました。今まで、テキストだけが新しい投稿記事順に並んでいたところに、画像を追加してみました。ちゃんとレスポンシブするようにも加工しています。テキストからテキスト+画像となったので、だいぶ見やすいのではないかと思っています。少しでも、アクセスしやすくなるといいな。もう少し替えたいところもあるので、追々やっていきます！実際に利用したHTMLとサンプルソースを添付します。□ [...]2016.08.04 -
今年のゴールデンウィークは、長い日とだと4月29日の祝日(昭和の日)から5月8日までお休みするかなと思います。また、4月24日からお休みを取られていたら2週間ほども長期休暇に！そんな、ゴールデンウィークが待ち遠しいため、タイマーを作ってみました。https://app.tree-web.net/gw/期間中に入ると少し遊びも入れてみましたので、残り日数の確認にご利用ください！□ 関連サイトhttp [...]2016.03.19 -
表題のとおり、文中の改行をカットするWebサービスを公開しました。改行の他、タブスペース、2つ以上の半角スペースは削除するようにしました。ただただ、それだけのものです。それでもタブなどを削除して、一行にしたい事が多々あるので作ってみました。□ 改行カッターサービスページ：https://app.tree-web.net/lb_cut/使う事が限られますが、よろしければどうぞ。□ 関連記事・「まだ2 [...]2016.03.04 -
たまにしか必要にならないのですが、手動でやるのも億劫になったため、全角英数字を半角英数字に変換するWebアプリケーション（サービス）を作りましたのでご案内いたします。※ 2017年01月14日に改良しました。表示されていますのは、改良版となります。※ 詳しい利用方法は、こちらの「全角英数字を半角英数字へ変換する「変換機」を作りました。」をご参照ください。JavaScriptで動作し、リアルタイムで [...]2015.12.12 -
「ういすぷのそのとき日記のブログ」ですが、今まで画像をクリックすると新しいタブもしくは、ウインドウで表示していましたが、その場で拡大表示するようにしてみました。JavaScriptで画像のリンクタグを処理しているため、読み込みタイミングにより、その場で拡大表示されないことがありますが、操作性は向上したのではないかなと思います。楽しくて、フィギュアの写真を多く紹介している記事を開き、クリック、クリッ [...]2015.09.12 -
レスポンシブデザインにしている当ブログですが、メニューを設置してみました。こちらは、JavaScriptでメニューを作成していますが、HTMLソース内からメニューを作るようにしています。画面サイズを小さくするか、モバイル端末（スマホなど）でアクセすると表示するようにしています。iPhone（iPhone 4S)PC/タブレット系表示されている画面を横にスライドさせてメニューを表示させているのと、メ [...]2015.06.26 -
ブログの画像読み込みのタイミング処理に、jQueryのプラグイン「Lazy Load」を利用してみました。何も考えずに利用するには、Lazy Loadに対応させたIMGタグのHTMLソースへ変更しなくてはなりませんが、出力されるHTMLを変更することなく、jQueryでIMGタグを修正しつつ、Lazy Loadに対応しました。このjQueryプラグインの効果は未知数ですが、スクロールさせると、フェ [...]2014.02.24 -
本当に、少しの少しの更新ですが、ページのトップへ戻るボタンを設置しました。ボタンは、少しスクロールしたら表示するようにしたのと、スクロールはアニメーションさせました。jQueryを利用していますが、ソースを一文貼り付けたら実装出来るようにしました。簡単！今度はスマホ用にメニューでも設置しようかとおもいます。何も考えなければ直ぐに設置できるけれど、ソースを変えずにうまいことやろうかなって感じです。ま [...]2014.02.19 -
昨日の夜頃から、Facebookのシェアボタンが上手く動作しないようになりました。どうやらJavaScriptの処理が正しく行なわれていないようです。そこで、回避策が一つあります。以下の様に、Facebookのシェアを行なうプログラムへ、URLエスケープ処理をした値を指定し、新しいウインドウで表示させると、上手く動作することを確認しました。この処理はJavaScriptを利用していませんので、ほと [...]2012.07.18 -
ネットを回っていたらJavaScriptで動くマリ○を見つけました。結構良くできています。もちろん最初のクリ○ーにやられるのはオヤクソク！ボタン説明：スタート：Enterダッシュ/フラワー：Aキージャンプ：SキーJavaScriptでここまでできるとは、思いませんでした。なかなか懐かしく、面白いですよ。※ JavaScriptで動作するため、PCかJavaScriptの利用できるクライアントでなく [...]2009.01.18 -
先日ブログにしました、「Flickr画像検索」のブログパーツの機能に用いた、フェードインからフェードアウトするスライドショーのJavaScriptをご紹介します。 このスクリプトは、簡単に設置できます。注意点として、画像を読み込む際に一列に全ての画像が表示されるため、(JavaScriptを切るとわかりやすいです。)表示するサイズを固定し、はみ出た部分をスタイルシートで「overflow:hid [...]2008.03.26 -
本日FlickrのWeb APIを利用した画像検索アプリケーションを公開しました。 このアプリケーションは、Flickrに登録されている素敵な写真をシンプルに検索できるようにしたものです。 また、おまけの機能としてFlickrから取得した情報で、ブログパーツを作ってみました。ブログのアクセントにいかがでしょうか。○ Flickr画像検索○ Flickr画像検索 -ブログパーツ-ちなみにブログパー [...]2008.03.25