WebTips

Ruby on Rails 入門のための個人的メモ(1)

Ruby は、あまり記憶がない随分昔、何かの折にちょっと触ってみた程度には見知っており、まつもとさんという方が開発された国産の言語というものです。 で、Ruby on Rails ですが、WEBアプリ開発に特化(でもないか?)したフレームワークということであれば…

パーティションテーブルを消してしまった/TestDiskの使い方

VAIO VGN-NW71FB という2009年発売の古い PC に Plamo Linux, Ubuntu, Windows10 を入れてテスト用にしたりしているのですが、Ubuntu の調子が悪く、入れ直すかといろいろやっているうちにパーティションテーブルを消してしまったようです。 ちょっとばかり…

iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない

iPhone で、iframe を position:fixed にした場合の挙動に苦労しています。 前記事: iPhone で iframe を fixed にする場合の問題 問題整理 iOS アップデートでさらに挙動が変化 position:static で表示し上までスクロールさせる 問題整理 問題を整理します…

iPhone で iframe を fixed にする場合の問題

はてなブログ(当サイト)に Google Forms でお問い合わせフォームを作ろうとしているのですが、iframe をポップアップで表示する際に iPhone で引っかっています。 Googleフォーム自体は、すでに別記事で完成していますのでリンクで済ませればいいんですが…

はてなブログのホームを他の記事と違うデザインする/ cms-style(7)

はてなブログを Wordpress 風に! > cms-style 記事一覧 はてなブログをどうやって当サイトのデザインにしているかを書いています。cms-style(7)まできましたが、役に立つようなことを書けているかどうか自分ながら微妙ですね(笑)。 で、これまではサイ…

はてなブログにお問い合わせフォーム Google Forms

はてなブログにお問い合わせフォームを作ろうと思いググりましたら、やはり欲しいと思われる方が多いようで結構ヒットします。 「Google フォーム」の記事が多いですね。 やってみました。 Google フォームにアクセスする フォームを作成する メールアドレス…

【まとめ】Chromeでの日本語変換がおかしい件、Chrome Canaryもだめ

問題整理 Chrome Canary で試してみるも しばらく Firefox に避難か? 問題整理 現在、Chrome での日本語入力の際に、変換キーを押した後の変換中の文節カーソルが移動しません。問題がこれだと確認するまでの経緯が次の記事にあります。 問題山積みのわが W…

Chromeのフォーム入力で日本語変換の文節移動のカーソルが表示されない件

記事のタイトルの意味が分かりにくいと思いますが、こういうことです。 www.imuza.com 上の記事で、「Chrome がキーアサインを横取りしているのではないかという件」に、「Google日本語入力のキーカスタマイズが無効にされ」ると書いた件、原因がわかりまし…

フィッシング詐欺注意!2016 年年次訪問者調査 (Obu) Chrome: ユーザー調査

このサイトに書いているつもりが別サイトでしたので転載です。 @半径とことこ60分 こんなサイトに誘導されました。フィッシング詐欺ですね。 いかにも胡散臭いアドレスです。 http://0tpzz.exclusiverewards.unship.xyz/ ググってみますと1年ほど前から出…

Dropbox の Public フォルダが 2017/3/15 で終了するようです

Dropbox からこんなメールが来ています。 平素より Dropbox をご利用いただき誠にありがとうございます。Dropbox では共有機能の改善に日々取り組んでおります。Public フォルダを共有方法として最初に導入して以来、Dropbox では安全な共有とチームとの共同…

Dropbox を Plamo Linux に同期させる

Plamo Linux でも Dropbox を使おうとインストールしました。ググればたくさんヒットしますが、公式のヘルプ通りにやればOKでした。 Install - Dropbox デーモン dropboxd インストール インターフェイス dropbox.py インストール デーモン dropboxd インス…

CSS3 の display: flex がスゴイ! はてなブログのカスタマイズに活用!

CSS3 の Flex レイアウトをご存じですか? 当サイトでも、過去記事、 www.imuza.com で紹介しているのですが、Flex レイアウトとは、これまでレイアウトに floatを使っていた場面で使用できるプロパティです。今回、はてなブログのこんなところにも使えると…

Sass/css ファイル作成自動化とクリック一発でコンパイル自動監視

www.imuza.com Sass をインストールできましたので、開発環境(大層?)を整えます。 scss ファイルの変更を監視する –watch オプション 自動化するバッチファイル ショートカットでクリック一発 scss ファイルの変更を監視する –watch オプション .scssファ…

Sassインストール/gemアップデートでエラー、AddTrustExternalCARoot-2048.pem.がNot Found(解決)

CSS メタ言語 LESS は、Joomla!のテーマやはてなのサンプルテーマ「Boilerplate」でも使われてしますので、ここしばらく使っていたのですが、Bootstrap4 が Sass 一本になったということもありますので Sass を使ってみようと思います。環境は Windows10 で…

【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成)

(2016/9/6)プロフィールページ(/about)のエラー修正(可読版参照) (2016/12/4)記事の上下に表示可能な改訂版があります はてなブログの読み込みが重い理由のひとつは、ソーシャルボタンがiframeで読み込まれているからです。以下5回の記事で、hatena…

【はてなブログ高速化5】 Google+のシェアボタンをカウント付きで自作する

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 はてなブログのソーシャルボタン軽量化、最後の Google+ です。 これも他のボタンと同じように、Java…

【はてなブログ高速化4】ツイート数付きツイートボタンをオリジナルでつくる(素の javascript 付き)

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript - IMU…

【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 「【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する」の…

【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 前記事の「【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする」…

【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする

(2016/9/6)完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む(完成) - IMUZA.com」にあります。 はてなブログの読み込みが重い(遅い)のは、ソーシャルボタン群やブログカードに iframe を使ってい…

DirectWrite を無効にできない Chrome52 で Mactype を使う

MacType を入れているのに Chrome の文字が汚くなってしまった! MacType が効かない場合 「MacTypeでDirectWriteの設定を変えるパッチ」を入れた場合 ユーザスタイルシートで text-stroke を追加する MacType を調べても問題がありませんのでどうしたのかと…

ツイッターのアカウントの取り方がわからない!

これは(以下)、私がツイッターのアカウントの取り方を知らないということか? ツイッターのアカウントを取ろうとして、 このフォームの「呼び名(ニックネームも可)」にある文字(言葉)入れて、携帯の番号、パスワードを入れて「アカウント作成」をクリ…

Flexbox = IE9 を捨てさえすればレイアウトが圧倒的に楽になる

はてなブログのテーマストアで公開しています「Hyperspace - テーマ ストア」(当サイトと同等)では、通常メインコンテンツの下に表示され、CSS でサイトブロックとして右側に持ってくる場合が多い BOX2 を左サイドに持ってきています。 省略形ですが、ソー…

スクリプトなし :target でアニメーションをスタートさせる

スクリプトなしでアニメーションをスタートさせるトリガーに、:hover や :checked はよく使っています。 たとえば、公開中のはてなブログのテーマでは、:checked を使ってモバイルのハンバーガーメニューのトリガーにしています。 とことこ with Menubar - …

ホバーエフェクト :hover をスマホでどう実現するか?

ホバーエフェクトでググれば、かっこいいアニメーションのものがたくさんヒットします。 ただ、スマホなどタッチデバイスの場合、a 要素にエフェクトをつけても、エフェクトが始まる前にリンク先に飛んでしまいます。他の要素にエフェクトを付けて、そのエフ…

はてなブログテーマ hyperspace=クロスブラウザチェック

今回、クロスブラウザという点で決定的な問題となるのは、CSS では、 viewport calc flexbox transition transform Javascript では、 LocalStrage, SessionStorage あたりです。 Chrome, Opera, Edge(Windows)は問題なし Firefox では、line-height に ca…

はてなブログテーマ=対応ブラウザはどこまでにすべきか?

どこまで旧式ブラウザに対応するか、主に IE, iOS-Safari, Android の話になるのかと思いますが、結構悩ましい問題です。 などと、はてなブログテーマ hyperspace を作るうえで迷っていたのですが、あらためて「はてなブログテーマ制作の手引き」を見てみま…

はてなブログテーマ hyperspace がなかなか完成しない=のは、flexbox, viewport, calc などの対応状況のせい

はてなブログテーマ hyperspace 、ほぼ完成しているのですが、古い android や iOS Safari へ対応が出来ていませんので、運用に二の足を踏んでいます。 現在、それらのブラウザになんとか対応させようと鋭意努力中で表示が乱れていますが、デモサイトはこち…

CSSでホバー(マウスオーバー)エフェクト=スライドして詳細表示、クリックでリンク先へ移動

はてなブログのトップページは、記事をいくつか表示して、タイトルをクリックすると各ベージへ飛ぶという、いわゆる標準的なブログ仕様になっています。 当たり前なんですが、ちょっと寂しいと思うこともあり、トップページだけはもう少し変化をつけたいとか…

iPhone の safari のユーザーエージェントは何だ?

はてなブログのテーマをつくっているのですが、モバイルでは navigation-panel をアイコンのクリックで左からスライドさせようとしています。 hyperspace の検索結果 - IMUZA.com で、その位置は、片手持ちでも操作しやすい下がいいだろうと、fixed の botto…

CSS拡張メタ言語 LESS で calc が使えない件(解決)

たとえば、 height: calc(100vh - 80px); として、コンパイルしますと、 height: calc(20vh); となってしまいます。 ググりましたら答がありました。 css3 - Disable LESS-CSS Overwriting calc() - Stack Overflow height: ~"calc(100vh - 80px)"; とすれば…

iPhone の脱獄に失敗した!

iPhone5s iOS9.1 の脱獄に挑戦したのですが、見事に失敗。結局、リカバリーモードから復元するはめになり、iOS9.3 に強制的にアップグレードされてしまいました。 脱獄の手順 失敗手順(笑) 文鎮か!?とビビる リカバリーモードで復元 脱獄の手順 「iPhone…

Googleドライブの pdf をスクロールなしで html に埋め込む(レスポンシブ対応)

pdf ファイルを html に埋め込む必要が生じ*1、以前は何かビューワを入れたように記憶しているのですが、それも面倒ですので、今回は Googleドライブの pdf ビューワを利用することにしました。ただ、問題はクロスドメインになりますので、iframe で埋め込む…

Chrome リモートデスクトップのリモートサポート(共有)は10分でタイムアウトする

「Chrome リモートデスクトップ」はむちゃくちゃ便利ですが、ホスト、クライアント共に同じアカウントでログインしない「リモートサポート」では、ホスト側でその都度続行を選択しなければ、10分でタイムアウトしてしまいます。 これはセキュリティ上の仕様…

Yahoo! API ルビ振りの精度 と はてなブログ五十音順インデックスその後

Yahoo! API を使って「漢字仮名交じり文」を「ひらがな」に変換する はてなブログのタイトルにふりがなを振り、php 配列に格納する はてなブログの記事の五十音順タイトル一覧を作る の三記事で、はてなブログの五十音順タイトル一覧を作ってきたのですが、Y…

はてなブログの記事の五十音順タイトル一覧を作る

はてなブログのタイトルにふりがなを振り、php 配列に格納するの続きです。 タイトルにふりがなが付きましたので、ふりがなでソートして書き出せばいいのですが、インデックスをどうするかです。450記事もありますと「あ行」「か行」では1ブロックが多くな…

はてなブログのタイトルにふりがなを振り、php 配列に格納する

Yahoo! API を使って「漢字仮名交じり文」を「ひらがな」に変換するの続きです。 はてなブログの記事は、ダッシュボード > 設定 > 詳細設定 > エクスポート で MT形式のテキストファイルに書き出せます。これは一度エクスポートするとそのデータが保存されて…

Yahoo! API を使って「漢字仮名交じり文」を「ひらがな」に変換する

別ブログ「そんなには褒めないよ。映画評」でミニシアター系の映画レビューを書いているのですが、続けているうちに500本くらいになっていますので、タイトルの五十音順で検索したり、一覧で見ることは出来ないかと考えてみました。 まず、今後のことを考え…

【Windows10】ネット接続が不調、頻繁に切断の件は、無線LAN親機の不調が原因(多分、解決)

【Windows10】ネット接続が不調、頻繁に切断、Windows ソケットレジストリエントリが不足(未解決)は、どうやら無線LANの親機の不調だったようです。 BUFFALO の WZR-HP-G301NH を使っているのですが、スマートフォンやタブレットでは切断の症状が出ていま…

CSS ホバーエフェクト(:hover)で画像の上に文字を出す

下記リンクの別ブログで映画のレビューを書いているのですが、そのトップ画面についてご質問をいただきましたので方法をまとめました。 そんなには褒めないよ。映画評 このサイトは、はてなテーマストアで公開している「Simple Responsive with Menubar」を…

OCN モバイル ONE =(成功)MicroSIM を NanoSIM にハサミでカットしてみる

スマートフォンは、一年ほど前から MVNO にしています。外出は自転車を使うことが多く、スマートフォンは使えませんので、結局ほとんど Wifi で問題ないということに気づき変更したのですが、案の定全く問題ありません。 で、その SIM は MicroSIM なんです…

「続きを読む readmore,seemore」をちょっぴりオシャレに=はてなブログ

トップページ( page-index )に複数の記事を表示する場合、「続きを読む( Readmore )」を入れたりしますが、はてなブログの場合、デフォルトですと通常リンクのままですのであまり目立ちません。これですね。 で、以前どこかで文字が徐々に消えていく Rea…

Xampp の Apache が起動しない=知らないうちに IIS(の機能?)が動いている

Thinkpad E420 に Xampp をインストールしましたら、Apache が起動しません。 pid4 が port80 を使っていると出ています。4 なんてシステムっぽいよねと Xampp の Netstat を見てみましたら、案の定 System と出ています。 誰だ、勝手にウェルノウンポートの…

Chrome の DNS キャッシュが消えない

某サイトで .htaccess に rewrite ルールを書いてリダイレクトの設定をしていたのですが、どうしてもうまく行きません。 何度見返しても間違いがあるとは思えません。事実間違っていなかったのですが、ふと、他のブラウザでやってみるかと、firefox や Edge …

Chrome & Firefox + Mactype に関するメモ

MacType を入れても Chrome や Firefox で効果がない場合があります。 今回、Win10 にアップグレードやらクリーンインストールやらしているうちにブラウザを新規インストールするはめになり、あれやこれやググるのも面倒になりましのでそのまとめです。 Chro…

phpMyAdmin 環境保管領域が完全に設定されていないため、いくつかの拡張機能が無効になっています。を消す

xampp で phpMyAdmin を立ち上げた時に「phpMyAdmin 環境保管領域が完全に設定されていないため、いくつかの拡張機能が無効になっています。」と警告が出ます。 それを消す方法です。 この警告は、Linux サーバ構築時に経験していますので、理由はわかってい…

GoogleアカウントとGmail=クッキーを消しても Google アカウントからログアウトできない

Gmail はログインする時、デフォルトで「ログイン状態を保持する」にチェックが入りますよね。デフォルトをオフにする設定を探したのですが見つかりません。あるのか、ないのか、あれば教えていただきたいのですが、オンの状態でログインし、そのままブラウ…

Chrome の右上ユーザーアイコンがどうしても消えない人へ

Chrome は右上に人型のアイコンが表示されますが、それを消す方法です。 バージョンは忘れましたが、以前にもこの件は話題になり、私の場合、chrome://flags の「新しいプロフィール管理システム」を無効にすることで消せたのですが、今回の「44.0.2403.89」…