はてなブログをスマホで閲覧する場合、テーブルが横にはみ出てしまうことがある。レスポンシブ対応含め一般的なデザインテーマでは横スクロールできない。 これを、横スクロールできるようにする最も（？）簡単な方法。 ネットでよく見られる方法は、<table>を<div>で囲</div></table>…

このブログのデザインテーマをレスポンシブ対応のMinimalismに変更。 変更にあたって行った作業の備忘録。 １．レスポンシブデザインにチェック デザイン ⇒ スマートフォン ⇒ 詳細設定 「レスポンシブデザイン」にチェックを入れる。 ２．スマホも記事一覧の…

2018年夏頃より、Google Maps APIを使ったWebアプリを使用するためには、APIキーが必須になり、APIキー取得のためにはアカウントにクレジット情報の登録が必須になった。 旅行先などで行きたい場所をマーキングしたオリジナルのGoogleマップを作成し、旅行先…

以前、「桜名木マップ」を「Google Maps API」を使って作成したが、APIキーなしでは使えなくなったので、「桜名木マップ」をGoogleマップのマイプレイスで作成し直した。 【作成手順：備忘録】 １．緯度経度や名前などの入ったCSVファイルまたはExcelファイ…

以前、「日本三百名山マップ」を「Google Maps API」を使って作成したが、APIキーなしでは使えなくなったので、「日本三百名山マップ」をGoogleマップのマイプレイスで作成し直した。 ↓ 「Google Maps API」版の三百名山マップ。

先日作成したHTMLカレンダーで使っているGoogle Calendar API v3の祝日表示が、2019年の即位の礼を含む10連休に対応している。 ≪ミニカレンダー：2019年1月から1年分≫ https://ok2nd.sakura.ne.jp/index/sch/calendar/?y=2019

先日試した「画像比較ツールTwentyTwenty」を使って、主な箱型コンデジの画質を比較できるページを作成してみた。 画像は、「Imaging Resource」のものを借りている。 任意の2つの機種名をプルダウンで選択して、比較できる。 ≫≫≫ デジカメ画質比較 by Imagi…

画像比較JavaScriptツール「TwentyTwenty」を試してみた。 TwentyTwentyを使うと、2つの画像を重ねて表示して、中央のバーをスライダーで動かしながら画像比較できる。 画像は「Imaging Resource」の「G7 X Mark II」と「RX100 VI」の写真を借りている。 ≫≫≫…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このブログに載せている写真の一部を、Flickrのアルバムに登録してみた。 Flickrは、アップロードする写真のサイズ制限がなく、無料で1Tバイトまで利用できる。 【後日追記】Flickrに枚数制限が付いた。写真は1000枚までとなった。 ≪晴歩雨描 フォト≫ https:…

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

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

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

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