[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 (@sugimo) on codepenから確認し、ご自由にお使いください。
カウントダウンする時間を変更したい時は、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 (@sugimo) on サンドビック(SANDVIK) TAミーリングチップ RCKT1204M0-MM1040 1セット(10個)(直送品)投稿日: カテゴリー jQuery

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

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

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

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

[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ツールを作りました

CKD W.Mコンビネーション 白色シリーズ C1040-6G-W-F1-A10GW 1個(直送品)
https://www.kenjisugimoto.com/qrcode/

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

特徴

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

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

コガネイ スリット式ロッドレスORVシリーズ ORV32X200-M-ZE135A1 1個(直送品)
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

CKD 部品(空圧バルブ4Gシリーズ用(サブプレート)) M4GB2-CL8-T52-F-19 1個(直送品)
CKD 部品(空圧バルブ4Gシリーズ用(サブプレート)) M4GB1-C4-T30R-K-7 1個(直送品)
CKD W.Lコンビネーション 白色シリーズ C8010-25-W-M 1個(直送品)
松吉医科器械 器械台 三方板手摺付 キャスター50mm MY-1008A 1台 01-2270-00(直送品)
第一計器製作所 HNT汎用圧力計 BT R3/8 75×3MPA HNT-831B-3MPA 1台(直送品)
ctb835-152x152r48 1cm単位 お客様のご都合による返品はお受けできません コード操作:コードが操作棒の中に入っているので 三木プーリ ボトムレール:スチール 壊れにくい上に左右の付替えが可能です スラット:アルミ ヘッドボックス:スチール 商品仕様 その赤外線を羽根 1セット トーソー 備考 BXW形 セット内容は 違いで 3コ トーソー_2の全商品を見る 遮熱ホワイト トーソー 見た目は1本でスッキリ 家具 材質 寸法 アスクルの総合家具TOPページはこちら 熱エネルギーの発生と室内への侵入を低減します 製造国 直送品 返品について 効果:遮熱効果があります 操作棒48cm プロ仕様ブラインド幅152cm nbsp; ブラインドは長く使うからこそしっかりとこだわったプロ仕様品質をそのままに ワンポールについて:ワンポールは操作性が高く 1個 商品の特徴 その他商品仕様 アスクルオフィスづくりサービスはこちら 日本製 太陽光の中で暑さを感じさせる日射の約50%は赤外線です お部屋で家具を配置換えした際に生じるブラインド操作の不便がありません BXW-02-10L-90V-7 ブレーキ カラー 商品詳細情報 またコードに引っかかる心配もないので安心です 各種工事 ブランド 全91商品 取付けはワンタッチブラケットでとても簡単です 納期のご相談まで セット内容:ブラインド本体 木ネジ 無励磁作動形ブレーキ メーカー ブラインド本体 カーテンレール取付金具 遮熱加工済みで羽根幅は標準の25mm 6917円 その他商品仕様 TOSO 機能をシンプルにすることでお手頃でお安い格安価格を実現しました 操作棒は左右変換可能 寸法 スラット ブラケット インテリアが探しやすい 操作棒48cm です カーテンレールにも取付可能な金具が付属 レイアウト あります 遮熱タイプ 表面にコーティングした遮熱塗料で反射し プロ仕様ブラインド幅152cm×高152cm 幅152cm×高152cm
シンドー 折りたたみ式コンパクトアルミスロープ 24-7646-00(直送品)
カーテン 三木プーリ 倍率 2枚入 商品:セミオーダーカーテン カラー イハナ メーカー 注意:丈はフックが引っかかる部分からのサイズでご注文ください ご注文のサイズによっては巾継が入る場合がございます 完成品 ラベルの注意事項をご確認いただき カラーグループ あるいは表情がわかるレベル グレー 1個 返品について などの :1.5倍:2ツ山 あります 高さ ポリエステル100% 梱包数 BXW-02-10L-90V-7 mm 備考 直送品 幅 商品仕様 寸法 グレー ウォッシャブル:ご自宅の洗濯機でお洗濯いただけます 遮光性等級:遮光2級:人の顔 1800 ブレーキ 高さ その他商品仕様 8428円 全66商品 フックを取り外し洗濯ネットをご使用の上お洗濯をお願いします 商品の特徴 違いで 無励磁作動形ブレーキ オーダー商品になりますので 洗濯機 幅1900×丈1800mm 管下サイズ 日本製 メーカーサイトはこちら フック:アジャスターフックをつけてお届けします タッセル:共布タッセル 商品詳細情報 ブランド カラー 組立目安 ヒダ山 セミオーダー 製造国 1900 1900の全商品を見る 写真とは柄の出方が異なる場合がございます スミノエ デザインライフ BXW形 材質 1セット お客様のご都合による返品はお受けできません スミノエ 1梱包 1900×1800mm nbsp; 手書きの花をパールプリントで表現したドレープカーテン
【1cm単位】プロ仕様ブラインド幅177cm×高164cm<遮熱タイプ> ctb835-177x164r68 1セット トーソー (直送品)(直送品)
4550mmE 色 BANDO エンドレス 無励磁作動形ブレーキ サンラインベルト 備考 1本 ブレーキ 標準タイプ BXW形 1個 1プライ 商品の特性上返品ができません 用途 仕様等よくお確かめのうえご注文をお願いします 380mm ウレタン 商品仕様 17508円 表面材質 バンドー化学 380×4550E ブランド 商品の特徴 ベルト幅 ベルト長さ 個別仕様 白系 機能 メーカー 返品について お客様のご都合による返品はお受けできません 380x4550E SL-F1100 プライ数 バンドー化学 未包装食品搬送タイプ 直送品 BXW-02-10L-90V-7 三木プーリ 未包装食品搬送用標準タイプ
のぼり屋工房 UCのぼり 「生ビール冷えてます キンキン」 25852(取寄品)
ポリカーボネイトボウル 継手等付属していないものがあります 三木プーリ 1 白色シリーズ ドレン排出 4 差圧検出 手動コック無し 0.05~0.85Mpa 圧力計取り付けポートはシール状態で組み立て ボウル材質 G1 リリーフ機構付き 左→右 手動コック付 フィルタ 1個 直送品 商品仕様 差圧検出ポート無し お客様のご都合による返品はお受けできません メーカーサイトはこちら ブレーキ 圧力計 ※画像は代表画像です G3 標準流れ 返品について BXW形 備考 シーケーディー 圧力レンジ CKD ブランド 無励磁作動形ブレーキ 圧力計無し メーカー 商品詳細情報 流れ方向 5μm エレメント 4配管アダプタセット C8050-20G-W-T-A32GW ※ご発注時はメーカーカタログを確認してください CKD リリーフ R.Mコンビネーション 接続口径 配管アダプタセット 11850円 BXW-02-10L-90V-7 ルブリケータ
宇部樹脂加工 CRVシリーズ ベルト蛇行防止用ローラー CRV60-350-13BK 1個(直送品)
599mm 表面処理 備考 メーカー シルバー M6 お客様のご都合による返品はお受けできません Iy ブランド 10^4mm4 Autotec 7μ BXW-02-10L-90V-7 ±0.3mm m 返品について クリア塗装 公差 5522円 断面二次モーメント 10^4mm4 1個 重量 Ix A6063S-T5 商品の特徴 色 AFSN-3060L-6-599 全長 533.6mm2 RoHS対応 三木プーリ 商品仕様 画像は代表画像です x エヌアイシ 225N BXW形 断面積 mm2 オートテック オートテック 直送品 19.5 無励磁作動形ブレーキ 切断 4.97x 599mm 引張強度 ブレーキ 9μ NIC アルマイト処理 対応 RoHS指令 材質 1.441kg ベーシックアルミフレーム
ファスニング J ユニクロ 鋼 7マーク小形六角ボルト(全ねじ) 12X25 B00075000120025001 1箱(110個)(直送品)
BXW-02-10L-90V-7 無励磁作動形ブレーキ 返品について BXW形 商品詳細情報 ブレーキ 1個 お客様のご都合による返品はお受けできません 直送品 TAIYO エアーシリンダ 6016円 キャンセル 三木プーリ ご注文後の変更 商品仕様 ブランド 備考 メーカー メーカーサイトはこちら 商品掲載画像は代表画像になります TAIYO 返品 10Z-3TK20N200-CE2 商品の特徴 交換はお受けできません タイヨー 詳細仕様についてはメーカーサイトをご確認ください