晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

ホームページ、Web作成

Googleマップの詳細かつ広い範囲の地図を印刷する方法。

Googleマップで広い地域を印刷しようとすると、詳細部分が分からなくなる。 詳細な地域の情報を維持したまま広い範囲の地図を印刷する方法を考えた。 以前はGoogle Maps APIを使う方法もあったが、現在APIキーなしで無課金で使用することが難しくなっている…

任意のサイトの写真で宙玉(そらたま)写真が作れるサイトを作ってみた。

昨日、JavaScriptで宙玉(そらたま)写真を作れる「SORA-TAMA Transform (Fish-Eye)」を試してみた。 この機能を、写真のアップロードではなく、任意のサイトの写真のURLを直接指定して使えるものを作ってみた。 http://ok2nd.890m.com/soratama/get.php 以下…

JavaScriptで宙玉(そらたま)写真を作れる「SORA-TAMA Transform (Fish-Eye)」を試してみた。

先日、宙玉というものの存在を知った。 レンズの前に透明な玉を置いて写真を撮ると、独特の不思議な写真が撮れるというもの。詳しくは、以下を参照。 ラップフィルムなどを使って作る方法が紹介されているが、実際に自分で作るのは難しそうということで、探…

水滴や波紋を表現するJavaScriptスクリプトを試してみた。

暑い夏が続くので、涼しげな(?)水滴や波紋を表現するJavaScriptスクリプトを試してみた。 一つ目は、「rainyday.js」。 窓ガラスに雨の水滴が付いていくような効果を与える。以下のサンプルでは、キーボードの1~9を押すと水滴のイメージが少し変わるよう…

Webサイト作成:無料レンタルサーバー

実際に自分で使っているWebサイト作成のための無料レンタルサーバー一覧。 さくらインターネットは、無料ではないが月額515円で、PHP、MySQLが使えてSSLも無料で使えるし、日本国内では老舗の部類なので安心して使えている。 SSLが無料で使える通常の無料レ…

Yahoo! JavaScriptマップAPIで作成した地図サイトをGitHubのWebサーバーにコピー。

Yahoo! JavaScriptマップAPIで作成したサイトをGitHubのWebサーバーにコピーしてみた。正常動作している。 ≪2nd マップ (Yahoo)≫ https://ok2nd.sakura.ne.jp/y-map/ ↓↓↓↓↓≪2nd マップ (Yahoo):GitHubサーバー≫ https://ok2nd.github.io/ymap/index.html

HTTPSが無料で使えるWebサーバーとしてGitHubを使う。

HTTPSが無料で使える無料のWebレンタルサーバーを探したが見つからない。 Google Drive、Dropbox、Yahoo!ボックスなどをWebサーバーとして使う方法があったらしいが、いずれも現在は使えなくなっているらしい。 現在、使えそうなものとしてGitHubがある。と…

無料版はてなブログでスマホのCSSをJavaScriptを使ってカスタマイズする方法。成功せず。

無料版はてなブログでは、スマホのデザイン(CSS)を設定で一律に変更することができない。レスポンシブ対応のテーマを使えばできるが、そうでない場合、CSSを設定できない。 詳細設定で、headにJavaScriptを追加できるので、JavaScriptを使ってCSSを追加する…

シンプルなHTMLカレンダー。Google Calendar API v3で祝日表示。PHPコードサンプル。

先日作成したスマホ&PC用検索ポータル「2nd Sch」にカレンダー表示のため、シンプルなHTMLカレンダーを作成。 祝日表示に「Google Calendar API v3」を使用。ただ、祝日は当年の前後合わせて3年分しか取得できないようだ。 ミニカレンダーでは、祝日の日付の…

備忘録:JavaScript、jQuery スニペット

JavaScript、jQueryのよく使いそうな基本的(基礎的)スニペット。 // スマホ判別 if (navigator.userAgent.match(/(Android|iPhone|iPad|iPod|Mobile|Windows Phone)/)) { // スマホ、iPad } else { // PC 他 } // DOMがロードされて操作・解析が可能になった…

HTML(TABLE)クリッカブルマップ「日本地図」を作成。スマホ対応。

HTML(TABLE)で、クリッカブルマップとしての日本地図を作成。(昔、作ったものを手直し) スマホを想定して、縦長画面の時は都道府県名を縦書きにして画面内に収まるようにした。スマホ画面を横位置にした場合の縦が狭い画面にも対応。 一部のAndroidスマホ…

現在地のYahoo天気予報「雨雲地図」とWindy.com「雨、雪予測地図」を1画面に。

Yahoo天気予報「雨雲地図」とWindy.com「雨、雪予測地図」を1画面にしたWebページを作成。 現在地を中心とした地図を表示。 ≪Yahoo雨雲+Windy.com≫ https://ok2nd.sakura.ne.jp/y-map/w.html ≪スマホ画面≫ ≪パソコン画面≫

スマホ用検索ポータル「2nd Sch」をPC用にカスタマイズ。「Windy.com」3画面付き表示等。現時点、12時間後、24時間後の天気(雨・雪・風)図を同時に並べて確認できる。

【2018/7/10全面的修正】 スマホ用検索ポータル「2nd Sch」を、パソコンで開いた時用にカスタマイズ。ある程度の大きさのディスプレイのパソコンを想定。 初期画面のリンク先を増やした。Gmail、Yahoo乗換案内、駅探他。リンクは適時変更。 「Windy.com」の…

スマホ用検索ポータル「2nd Sch」を作成。Google Suggest API、Yahoo雨雲地図、Windy.com付き。

スマホのGoogleやChromeの検索画面を開くと、やたらとニュースや検索履歴が表示される。シンプルな検索画面が欲しくて、スマホ用検索Webページを作成した。 Google以外に、価格.com、アマゾン、ヨドバシカメラの検索ボタンを付けた。 Google Suggest APIを使…

(YOLP) Yahoo! JavaScriptマップAPIで複数地点マーカー地図を作成。

Google Maps APIを使ったWebサービス/サイトが、APIキーなしでは使えなくなったので、先日、簡単な地図を作成したが、今回、複数地点マーカー地図を作成した。 現在地やマーカーからのルート表示(徒歩または車)ができる。 ≪Yahoo! マップAPIを使った地図≫ …

(YOLP) Yahoo! JavaScriptマップAPIで地図サイトを作成。

Google Maps APIを使ったWebサービス/サイトが、APIキーなしでは使えなくなったので、YOLP(Yahoo! Open Local Platform):Yahoo! JavaScriptマップAPIで簡単な地図サイト「2nd マップ (Yahoo)」を試しに作成してみた。YahooマップAPIもAPIキー(アプリケーシ…

「Google Maps API」がAPIキーなしでは使えなくなった。地図がグレーアウト表示になる。

「Google Maps API」を使ったWebサービス/サイトが、APIキーなしでは使えなくなった。「Google Maps API」の課金方法の変更に伴うもので、今まではAPIキーなしでも月間アクセス数が少ないサイトでは利用できていたが、APIキーが必須になった。なおかつ、API…

Flickrで、フォトアルバムを作成。

このブログに載せている写真の一部を、Flickrのアルバムに登録してみた。 Flickrは、アップロードする写真のサイズ制限がなく、無料で1Tバイトまで利用できる。 ≪晴歩雨描 フォト≫ https://www.flickr.com/photos/2ndart/albums/ 写真は、以前自分で作成した…

写真を正方形にトリミングする方法。画像処理しないでCSSのみでトリミング。

写真・画像をサムネイル表示する場合など、正方形にトリミングしたい場合がある。画像処理ソフトでトリミングする方法もあるが、Webブラウザで表示するのが目的なら、写真・画像はそのままでCSSでトリミングすることができる。imgタグに「object-fit: cover;…

このブログ「晴歩雨描」をHTTPS化。

2月22日から「はてなブログがHTTPSで配信できる仕組みの提供を開始した」との事だったが、ようやく本日このブログ「晴歩雨描」も変更可能になったので、HTTPS化した。 設定方法の説明には「ダッシュボードから設定画面にアクセスします」とあるが、HTTPS設定…

新年あけましておめでとうございます。

新年あけましておめでとうございます。 以下は、今から8年程前に作ったページ。作ったといっても、ネット上にあったJavaScriptとアイコンを組み合わせただけ。 http://ok2nd.starfree.jp/tools/snowstorm/newyear.html JavaScriptは以下から。 アイコンは以…

「8cm×12cmの小さなアート」作品追加(#346-#351)

「8cm×12cmの小さなアート」に作品を6個(#346-#351)追加。 パソコンで作成してプリントアウト。HTML5のCanvasにJavaScriptで乱数を使って長方形の棒の色と角度を変えて描画した。 《8cm×12cmの小さなアート》 https://ok2nd.sakura.ne.jp/art/?p=10

はてなブログのトップページを記事一覧ページに変更

はてなブログのトップページを記事一覧ページに変更してみた。参考にしたのは、以下のページ。 有料の「はてなブログpro」なら、基本機能でトップページを記事一覧に設定できるが無料版ではできないので、JavaScriptを使う。 やることは、URLがブログのトッ…

Webサイト「誕生花,花言葉」

随分昔に作ったWebサイト「誕生花,花言葉」。カレンダー形式で、誕生花を写真付きで表示する。花の名前をクリックするとGoogle検索。花の写真をクリックするとGoogle画像検索。 PC用では一覧形式にして、花の名前や花言葉で検索できる。「→Wiki」をクリック…

FC2ブログからはてなブログへの引越しは簡単だった

以前からFC2で運用していた「中級プログラマの自宅でPHP ブログ」を、はてなブログに引っ越した。 移行方法は、以下の記事を参考にした。この記事に書いてある通り、とても簡単で何の問題もなくあっさり完了した。 このブログ「晴歩雨描」とは別に新規ブログ…

「8cm×12cmの小さなアート」サーバー変更。

「8cm×12cmの小さなアート」のサーバーを変更。新しいURLは以下。 ■ 8cm×12cmの小さなアート https://ok2nd.sakura.ne.jp/art/ ■ 8cm×12cmの小さなアート(無限スクロール版) ※ 無限スクロール版は、最新の作品から逆順に表示するように変更。 https://ok2nd.…

カラーをランダムに変えてアート作品

「8cm×12cmの小さなアート」の作品#262から#270は、HTMLで四角ボックスや丸●を並べて、ランダムに色を変えて偶然できたパターンをそのまま画像キャプチャしただけ。 作品用に作成したページを以下に置いておく。リロードする度に色が変わる。色のパターンは…

物体落下シミュレーションphysicSketchを使ってアート作品

「8cm×12cmの小さなアート」の作品#260は、物体落下シミュレーションphysicSketchを使って作った画面をキャプチャしただけ。 physicSketchは、あんどうやすしさん作成のJavaScriptライブラリ。 http://d.hatena.ne.jp/technohippy/20110308#1299593240 作品#…

Infinite Scrollを使った無限スクロール版「8cm×12cmの小さなアート」

無限スクロールを実現するJavaScript「Infinite Scroll」を「8cm×12cmの小さなアート」で試してみた。 https://ok2nd.sakura.ne.jp/art/infinite/ <div id="contents"> <div id="gallery"> <a class="img"><span style="background-image: url('../thumbs/a001.jpg')"></span></a> <a class="img"></a></div></div>

Google Maps API V3ギャラリーマップ改修

Google Maps API V3を使って作成したギャラリーマップを少し改修。 マップを挿入する<div>の上に、ボタンなどのメニューエリア<form>が付いていると、マップ<div>の高さをheight:100%にした場合、ブラウザウインドウから上下が少しはみ出た状態になり、スマホで見る場合など</div></form></div>…