IEで別ページへのページ内リンクが動作しないバグと戦う

別ページのページ内アンカーリンクをよく使うのですが、IE11で動作しない現象が発生しました。(納品前夜。デバッグする時間は3日だった……)
環境はWordPressです。

リンク元のindex.html

 

リンク先のsubpage/

 

基本はこれで問題がありません。
しかしIEのみうまく動作しなかったのです!!××IE××
ページのリンクは動作すれども、目的のIDに飛んでくれないのです。
飛び先のページでアドレスバーにカーソルを置いてエンターを叩くと、想定通りの動作はします。謎。

このアンカーは非常にバグが多く、様々な解決方が見受けられました。

続きを読む

Mac上でAndroid標準ブラウザを立ち上げる方法

macでAndroidを動かす方法

前回Mac上でIEを動かす方法をご紹介しましたが、今回はmacでAndroidを動かす方法です。
今回もVirtualBoxを使用します。
Androidを動かす方法はたくさんありますが、webデザイナーの動作確認としては今回の方法がおすすめです。他は開発するツールが多く、動作が重いですからね。

以下のサイトで会員登録をして、アプリをダウンロードしましょう。
「trial」ボタンから情報を登録します。
https://www.genymotion.com/#!/

macでAndroidを動かす方法

できたらしい。macでAndroidを動かす方法

ここからアプリをダウンロードします。
https://www.genymotion.com/download/macでAndroidを動かす方法

よくわかんないけど、多分これをApplicationフォルダに突っ込みます。macでAndroidを動かす方法

アプリを立ち上げ再度ログインします。macでAndroidを動かす方法

ズラズラと端末が表示されるので、使用したいものを選びます。バージョンやデバイス名でソートできるので便利。macでAndroidを動かす方法

適当に選んでnextを押すと、端末のダウンロードが始まります。macでAndroidを動かす方法

さすがgoogle。Android v4でも崩れない。macでAndroidを動かす方法Macでも無償でIE、Androidの確認ができて、便利な世の中になりましたね。

MacでIEの表示確認をする方法

IE起動

Macで糞IEの確認をするのにWindows機やParallelsを購入して、立ち上げて、サーバーにアップして、間違えて、ローカル直して、サーバーにアップして、更新して………キリがありません。。。
そこで、Mac環境でIEをインストールして確認できる方法をご紹介します。

VirtualBoxをインストールする

無料で使用できる仮想環境VirtualBoxをインストールしましょう。

http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html?ssSourceSiteId=otnjp

VirtualBox

 

modern.IE

modern.IEからIEを落としておく。Win81のIE11にしました。7GB以上あるので、お茶を飲んで待つ。
modern.IE

解凍・VB起動

落としたデータを解凍する。Mac標準の解凍だとうまく解凍できないので
などを使用する。解凍VirtualBoxを起動し、解凍した.ovaファイルをダブルクリックしてVirtualBoxに追加する。VirtualBox

するとインポート画面が現れるのでRAMを1024以上に設定する。

「インポート」を押すとこの画面になります。お茶を飲んで待ちましょうインポート
左メニューからIE11を選択して、上メニューから起動ボタンをクリックしましょう。VirtualBox
この通り、純粋IEが動きました!!
IE起動
もう一度いいます。IEが動きました!!IE起動
webの記事にはsafariの開発モードでユーザーエージェントをIEに変えて、「Macの人はこれで確認しよう!」なんて書いてるのがが多く見られるけど、そんなんでIEのレンダリングが再現されるわけないですから。。。。。。。

User:IE User
Password:Passw0rd!

となります。

Photoshopスマートオブジェクト二倍書き出し時にボケる現象と戦う

Retina対応するために、Photoshopにてレイヤー名を200% hoge01.jpgとして二倍書き出しを行いましたが、ボケてしまいました。

できあがったファイル

 

で色々調べていくうちにわかったことは

  • 元画像をドロップして作るのは問題なし。「配置」と同じ。
  • スマートフィルター良くない!
  • スマートオブジェクトは当然必須!

今回はスマートフィルターが邪魔をしていました。

レイヤーラスタライズをかけてスマートフィルターを破壊適応してしまえばいいのですけど、それだとレイアウトと同じサイズが書き出されてしまうので良くありません。

なので以下の手順を踏みました。

続きを読む

NextGENが動かない!!過去のWPプラグインを入手する方法

写真:WordPress

NextGENをアップデートしたところ画像がアップロードできなくなる不具合に見舞われました。
ローカル開発環境で他のプラグインを外したところ見事動いた!
と思ったのですが、本番では動かず……。プラグインの再アップとかデバッグモードにしたりアップデートを待ってたりと時間をかけていたのですが、この方法で解決しました。 続きを読む

SassコンパイラPreprosの使い方

gulpやwebpack等プロジェクトで回していくと、nodeのバージョンの違いだとか、configがカオスになったりだとか、黒い画面が苦手だとか、納品間際にタスクがエラー起こして死んだりする問題があるわけで。
そういった人たちに向けて、GUIでのSassコンパイラはとても効果的だと思います。jsこねくり回しても結局できるファイルはテキストデータなんですから。
ざっと紹介すると以下の様なことができます。
  • エラー行の報告
  • ブラウザのライブリロード
  • 圧縮
  • ベンダープレフィックス付与
  • FTP転送
  • ファイル監視
  • ソースマップ作成
もうこれだけで必要十分ですね。
まずはここからダウンロード。
「Hello」と出てくるのでプロジェクトファイルを投げ込みましょう。
cssファイルにフォーカスを当てたところCSSnextってのが出てきました。こういうものらしいです。いまはまだいいや…。
SynkBrowsersで他のブラウザや端末での動作の同期ができます。普段はチェック外しててもいいかも。
 style.cssという名前のcssを作りたいのでコンパイルされるcssの名前を変更しましょう。
 上書きする。

 

準備ができたらscssを選択して右下の「Proccess file」をクリックしましょう。

できました!

 

ブラウザのライブリロードも非常に高速で。Gulpとかこねくり回してる暇があったらjsの基礎でも覚えたいです。