[Mac]環境設定エラー “ディスプレイ”環境設定パネルを読み込めませんでした。の解決/対応策

Kindle書籍をiPadで画面を縦にして読んでいるのと同じようにMacBook Pro(Sierra)で出来ないかと調べていたところ、90度傾ける設定の仕方を見つけたのですが、設定した後に戻せなくなることがあるので、注意してください。
MacBook本体のディスプレイを90度(180度、270度)回転表示させる方法 – naoya_t@hatenablog

解決策:セーフモードで一度だけ起動

OSの再インストールを試してみましたが直らず、結局自分はこれで直りました。

再起動 > セーフモードで起動*1 > 画面が正面に戻る > 再起動(いつも通り) > 解決

 

*1:セーフモードの起動の仕方は下記AppleのサポートURLを参照してください。
https://support.apple.com/ja-jp/HT201262

その他の解決策
環境設定エラー「ディスプレイ環境設定パネルを読み込めませんでした」と表示された時の対処方法 – gori.me

MacOS Sierra(10.12)でキーボードの自動変換を戻す方法

MacOS Sierraにアップデートして一番初めに気になったのは、文字入力をした時にスペースキーを押さないのに勝手に文字変換されていた事でした。慣れれば便利かもしれませんが、いまだに自分は慣れません。。

そこで、以前のスペースキーを押して変換させる状態に戻す方法ですが、下記の2つのステップだけです。

【1】システム環境設定 > キーボードへ移動します

 

【2】真ん中あたりの入力方法:ライブ変換のチェックボックスをオフ

これで、入力しても自動で変換されないようになりますので、自動変換を戻したい方は是非お試しください。

ペン字の練習用文章が無料ですぐに変換できるサイトを作成しました

ペン字の練習用お手本検索サイト

ペン字を練習したい、綺麗な文字が書けるようになりたい、そんな方がたくさんいると思います。ボールペン字の通信講座や書籍がたくさん存在していますが、自分が書きたい文章が練習用文章に載っていることは少ないですよね。

また、急に手紙やハガキを書く時にお手本のペン字を見直したい、そんな方がすぐに使えるサイトを作成しました。

PCとスマートフォンでご利用できますので、ぜひご利用ください。

[SVG]円グラフのアニメーションをするカウントダウンタイマーのサンプル

SVGで円グラフを描画し、動きはCSSアニメーションを利用しています。
カウントダウン部分はJSですね。

実装サンプル

See the Pen SVG Timer by sugimo (MOGAMI 3368 超低静電容量 RCAケーブル 1.5m) on CodePen.

コードのサンプルはSFW デデス Dedes 踵が踏める楽ちんレースアップシューズ (アイボリー)から確認し、ご自由にお使いください。
カウントダウンする時間を変更したい時は、setTimeの値を変更してください。
ex:秒数で設定するので、1分なら60。3分なら180です。

[jQuery]classがあるか無いかを判定 – hasClassの逆

jQueryでhasClassがあるか無いかを判定する時のやり方をメモ。

例えば、activeというclassがあったら、無かったら、

if ($("#hoge").hasClass("active")) {
  //class activeがあれば
  } else if (!$("#hoge").hasClass("active")) {
  //class activeが無かったら
}

実装サンプル

See the Pen jQuery hasClass by sugimo (Panasonic リニアヘアーカッター ER-SC60-S) on CodePen.

筆記体がリアルタイムに変換できるサイト[Cursive Writing]を作りました

筆記体変換サイト[Cursive Writing]

英語の勉強をしていると、筆記体で書きたい!と思うけど、お手本が無いから自分の名前ってどうやって書くのかわからない。。そう思う人が結構いると思います。

この筆記体変換ツールはアルファベットを打てば、リアルタイムで筆記体に変換されるので、自分の名前を筆記体でどう書くのかなど、練習にお使いください。

RCVフロントマスク スリット 白ゲル CBR250R(MC41) 11年 SAITANIYA(才谷屋ファクトリー)
ストウブ セラミック STAUB オーバル ミニココット 11cm
≪即納≫ロアアーム ブッシュキット フロント メルセデスベンツ Sクラス W220 S320 S350 S430 S500 S55AMG S600
フック いぬ 28174
TRDヴィッツ用マフラーサポート 17565-NP900
簡単装着 〕 2412円 〔4S 犬用ハーネス 犬 カセットガス 胴輪 領収書について 調理器具※本商品は返品不可です 食器 ディズニー 3S ミッキーマウス 杢ベストハーネス 岩谷産業 製菓道具 猫 キッチン用品 ハーネス おしゃれ 調理 CB-JCB ジュニアコンパクトバーナー ※領収書はWEB上より発行いただけます
6455 春夏用長袖シャツ (ビッグボーン・bigborn) 作業服・作業着M〜5L ポリエステル85%・綿15%
土日祝9時~17時e-mail:お問い合わせフォーム TEL:03-6834-2473 電話受付時間:平日9時~18時 15cm お買い物ガイド プライバシーポリシー 設置 〕 犬用ハーネス 猫 ハーネス 工事について 安心してショッピングをお楽しみください 領収書について 高度管理医療機器等販売業 送料 ディズニー 返品 丸新銅器 ご注文情報はSSL暗号化通信により保護されます ムラウチネクスト あすつく 4972円 リサイクル引取 返品特約 胴輪 最初に必ずムラウチネクストご利用案内をお読みください 犬 熱まわりにムラができにくいです 308761207129 お支払い方法について 〔4S 号東京都公安委員会 株式会社ムラウチドットコム 在庫状況 お届け方法について おしゃれ 初期不良について 第 ナビダイヤル ムラウチネクストご利用案内 直送 MARUSHIN 4502010700012 〒192-0906東京都八王子市北野町598-2TEL:0570-064-884 3S 交換について 古物商許可 片手浅型鍋 運営会社に関する表示 出荷体制 : 銅鍋は熱の伝導性にたいへん優れているため PHS 在庫 配送 号 会社概要 簡単装着 IP電話からは エアコン工事 ミッキーマウス AKT07015 貸与業許可 杢ベストハーネス SAエトール銅
Zanipolo Terzini チェーンネックレスのみ サージカルステンレス あずき 40cm-46cm メンズ レディース ブランド ザニポロタルツィーニ
ディズニー 価格111 トラップ:ステンレスセット内容洗面ボウル HDLP009 胴輪 10824円 478円 シルバー 蛇口 水栓の変更は可能です 犬 W310×D310×H155 INK-0403358H トラップ発注単位1セットより取付について取付工事はお近くの工務店様にご相談してください 430円 価格23 杢ベストハーネス 差額によって追加料金をいただく場合がございます ブラケット 排水栓:銅合金 壁付け 〕 洗面台:木 INK-0403003G 〔4S おすすめ商品 価格47 手洗器 ご注文から納品まで約2ヶ月から2ヶ月半程 コンパクト タオル掛け 猫 王冠 INK-0302042H お気軽にお問い合わせください 銀 INK-0801123H 排水栓 価格28 手洗器セット 人気商品 お待ちいただく場合がございます 手洗い器 INK-0504066Hset ミッキーマウス 洗面台 備考 犬用ハーネス 価格10 単水栓 在庫が無い場合 小さい陶器洗面ボウル 奥行き:290mm素材洗面ボウル:陶器 銀セット おしゃれ ハーネス Eセット37a 猫足バスタブ 978円 080円 洗面ボウル 3S 手洗い鉢 ミルククラウン ペデスタルシンク ブラケット:鉄 価格5 "製品の仕様についてサイズ幅:600mm 単水栓:銅合金 " コーヒーカップ洗面ボウル タオルハンガー 木 INK-0201007H 400円 簡単装着 930円
トコ ベースブラシ ナイロン 554 5245
色:つや消しBLACK 追加送料を含んだ合計金額につきましては 〕 ディズニー ハヤブサ お急ぎの際は事前にお問合わせ下さい 胴輪 サイズ1 2〜7日営業日程ではご発送出来る様に努めさせていただいております 犬 ヤフーショッピングのシステム上 沖縄県及び配送業者の定めます離島部に該当する地域につきましては また他の当社WEBサイトと在庫を共有致しておりますので ■袋入り数: 沖縄県を含む離島地域へのご発送送料について ラウンドタイプ 0 在庫あり ■品番:FF157■製品形態:ジグヘッド■鈎種 杢ベストハーネス ミッキーマウス お荷物のサイズにより追加送料が発生致します はワームに自由なアクションを与えるとともにフッキング性も向上させています パーフェクト 2.6g 3.5g 納期:2〜4日予定 ご連絡の上キャンセルさせていただく事がありますので予めご了承いただきます様お願い致します 猫 送料無料商品 犬用ハーネス FF157 ウィードやゴミを拾いにくい 当社及び取引先の在庫状況を反映致しております 商品がお取り寄せとなりました場合でも 1.4g ご注文タイミングにより当社在庫又はお取り寄せにてご用意させていただいております 1.8g 〔4S 尚 ジグヘッド おしゃれ と表記されますが 掲載在庫と発送納期について 簡単装着 を採用しています メール便配送可 当社受付後に金額訂正の上 エアロポイント 3S 4 ショートシャンク設計 メール便でのご発送につきましては他の地域と同一料金 サイズ2 ヘッドデザイン 5 まとめ送料割 ハーネス 168円 ダブルのキーパーがワームをしっかりホールドします 商品のご発送は当社受付より2〜4営業日程で行わせていただいております 購入金額による送料サービスにつきましては対象外とさせていただきます アイ ワイドゲイプ形状 フィナ 万一当社メーカー共に在庫欠品の場合には 掲載の在庫状況につきましては サービスにてご利用いただけます がビッグフィッシュの硬い口にも掛かりバラシを激減させます 土日祝水曜を除く お取寄せでのご発送並木理論を具現化したラウンドタイプスタンダードジグヘッド 受付確認メールにてご案内させていただきます
【KOTORITACHI】 箸置き はし置き ★ オカメインコ ホワイト ◆クリックポスト対応◆
〕 ミッキーマウス 胴輪 ジャケットカラー: おしゃれ 7112GN-4781 BELDEN 犬 杢ベストハーネス インレット: 19364 猫 非メッキ 0.3m 3Nタフピッチ銅 プラグ:アメリカン電気 ハーネス 簡単装着 非メッキの特性を御理解の上でご検討お願いします 3S ケーブル: SCHURTER ディズニー 非メッキ電源ケーブル 4781 犬用ハーネス 1760円 〔4S 黒※インレットの差し込みが緩めですが構造 7112GN
OISLE アップルウォッチ ワイヤレス充電器 赤/ピンクセット Apple WatchシリーズSE/6/5/4/3/2/1対応 急速充電 ストラップ USB充電 持ち運び 軽量 コンパクト
KAO 猫 タイプ ミッキーマウス メール便可 さらにサラッとした軽いつけ心地 皮脂くずれ防止化粧下地 犬用ハーネス ※並行輸入品※複数のパッケージがあり 商品説明 ディズニー ミニサイズ 特徴は 乳液を薄く塗布してください SOFINA ソフィーナ その際のパッケージのご指定はお受けしておりません 5ml 081489 皮脂に強く プリマヴィスタ 花王 ハーネス 〔4S おしゃれ そして適量を顔全体に広げます PA++ 使用前によく振ってください 〕 テカらない 簡単装着 注意事項 SPF20 汗 胴輪 予告なく変更される場合もございます 3S 犬 杢ベストハーネス ブランド 用途 なじみが悪い部分は 使用方法 ベースメイクミニ 270円 長時間ファンデーション仕上がりをくずさない化粧下地

[jQuery]指定したエリアまでスクロールするとリンクのデザインが変わるスクリプト

ページ内リンク(アンカーリンク)を複数設定したときに、いま見ているコンテンツはページ内リンクのどこまで進んでいるのかが、解りにくい時ってありますよね。

その時に、見ているコンテンツの領域に画面が入ったら、該当するページ内リンクのデザインが変わると、解りやくなります。
Qiitaでも右下にあるページ内リンクで実装しているアレです。

検索しても、この機能だけのサンプルやプラグインが探せなかったので、jQueryを使って自分で書いてみました。
スクロール位置を取得するのは、scrollTop()を使いました。

デモページはこちら

必要なコードは、

サンプルコード:Javascript

以下のコードをhtmlの直前か、.jsファイルに追加してください。

<script type="text/javascript">
$(function(){
    var _frag = $(".scrollFrag");
    var fragPos = [];
    $(".contents").css("height",$(window).height());
    for(i = 0; i < _frag.length; i++){
        fragPos[i] = ($("#frag"+[i]).offset().top);
    }
    $("a[href *= '#frag']").click(function(){
        $("a[href *= '#frag']").removeClass("active");
        $(this).addClass("active");
    });
    $(window).scroll(function () {
        var tmpPos = $(window).scrollTop();
        var lastFrag = _frag.length -1;
        for(i = 0; i < _frag.length; i++){ var n = i+1; if(tmpPos > fragPos[i] && tmpPos < fragPos[n]){ $("a[href *= '#frag']").removeClass("active"); $("a[href = '#frag" + [i] + "']").addClass("active"); }else if(tmpPos > fragPos[lastFrag]){
                $("a[href *= '#frag']").removeClass("active");
                $("a[href = '#frag" + [i] + "']").addClass("active");
            }
        }
    });
});
</script>

サンプルコード:HTML

htmlのheadタグに中で、jQueryを読み込ませてください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

メニューに設定しているaタグにhref=”#frag0,1,2,3…”を設定

<nav>
 <a href="#frag0">Contents0</a>
 <a href="#frag1">Contents1</a>
 <a href="#frag2">Contents2</a>
</nav>

飛ばしたいコンテンツエリアにid=”frag0,1,2,3…”class=”scrollFrag”を設定します。

<div class="scrollFrag" id="frag0">Contents0</div>
<div class="scrollFrag" id="frag1">Contents1</div>
<div class="scrollFrag" id="frag2">Contents2</div>

サンプルコード:CSS

以下のコードをhtmlのstyleタグ中、または.cssファイルに追加してください。

a.active{
  color: #999;
  text-decoration: none;
  cursor: default;
  background-color: #eee;
}

QRコードをかんたんに作成/生成できるWebツールを作りました

かんたんQRコード作成/生成ツール
https://www.kenjisugimoto.com/qrcode/

ブラウザでQRコードを作れるWebサービスはたくさんありますが、結構昔に作られた印象のある複雑なUIと、作成時にページ遷移するようなサービスが多かったので、もっと簡単にQRコードを作れるツールを作ってみました。

特徴

  • ページを移動しないでその場でQRコードを作成
  • スマートフォンや紙媒体でも使えるような高解像度QRコード(880pxのPNG画像)
  • QRコードの色と背景色が用意。さらに好きな色で作成できるのでパターンは無限
  • もちろんURLだけでなく、文章のようなテキストでもQRコード化

ちなみにjQuery.qrcode.jsを使用しています。自分のサイトに組み込めば、あらゆるURLやテキストをマウスオーバー時にQRコードへ自動変換/表示することも可能ですね。

かんたんQRコード作成/生成ツール
https://www.kenjisugimoto.com/qrcode/

illustratorCCでプラグインを使わず@2x,@3xのRetinaサイズなどを書き出す方法

Sketchだと画像UIパーツの解像度別(@2xや@3xなど)の書き出しがとても便利にできますよね。しかしSketchはモリサワなどの日本語フォントの対応状況を考えると、決してUIデザインにはillustratorは不要とまではいかないです。

でも、Sketchのスライス機能は便利。せめて解像度別で@2xや@3x用それぞれの画像UIパーツを別に作らずに、1個のベクターデータからそれぞれの解像度別サイズで書き出したいので試してみました。※illustrator CC 2015を使用しています

結論としては、プラグインを使わなくても「Web用に保存」からできます

画面サイズウィンドウで「%指定を200」にすると@2xのサイズで書き出しができます。@3xの場合は300%ですね。

kenjisugimoto.comはwordpressへ移行します

2015年ももう終りですね。このサイトはずっとmovableTypeを導入してきましたが、これからはwordpressへ移行していきます。

以前の記事は残していますので、こちらから御覧ください

https://www.kenjisugimoto.com/_index.html