スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

少し前にWindowsのRubyでSassの環境を構築しました。
WindowsでRubyをインストールしてSassの環境を構築する
しばらく使ってみて、Sassで開発進めよう!という気にはなったのですが、手動でコマンドを実行しないといけない点や、ファイルごとにコマンドを実行する点、これを自動化できたらより作業が捗るだろうなと思い、Node.js + Atomの環境も試してみることにしました。

Atomは私が普段から使用しているエディタです。
Atomのプラグイン「sass-autocompile」を使えば、scssファイルを保存したと同時に自動でcssファイルにコンパイルしてくれるようです。
「sass-autocompile」はNode.jsとnode-sassを利用するプラグインなので、早速インストールします。

ちなみに、今回構築した環境は以下の通りです。

  • Windows 10 Home 64bit
  • Node.js 8.9.4 64bit
  • Atom 1.23.3

個人で管理しているサイトのCSSをSass管理に切り替えてみようと思い、Windows上にSassの開発環境を構築します。

これまで、過去のプロジェクトの失敗から、Sassの導入には抵抗がありました。
SassはCSSを効率よく管理するしくみであり、作業者がSassを理解していることが前提条件です。そのため、Sassについて知識が乏しい人がメンバーにいると、逆に作業効率が低くなることがあります。また、Sassで出力したCSSファイルをクライアントなどが直接編集したりと、どうしてもSassによるプロジェクト管理は難しいというイメージがありました。

しかし、最近ではSassをうまく利用したプロジェクトを見かけるようにもなったので、技術習得の目的で、個人サイトで導入してみようと思いました。

ちなみに、今回構築した環境は以下の通りです。

  • Windows 10 Home 64bit
  • Ruby 2.4.3-1-x64

※現時点で2.5がリリースされていましたが、公式サイトにあるように、まだ不安定要素があるので2.4系を奨励とあったので、2.4.3にしました。実は初めに2.5のインストールにチャレンジしたのですが、エラーが発生しSassインストールは失敗しました。。

Instagram APIを使って、投稿された写真を取得、表示してみたいと思います。

個人的には乗り遅れているInstagramブーム、単体の盛り上がりは感じていますが、それを活用したWebサービス事例などはあまり見かけないような気がします。
今回はその可能性を検証するため、Instagram APIの利用方法などを調べてみます。

アカウント登録

Instagram APIを利用するためには、まずInstagramアカウント登録が必要です。

Instagramアカウントがない場合は、公式サイトからアカウント登録します。
Instagram

Atomで作業を進めていると、「UTF-8」のファイルが何故か「windows1252」で開かれてしまうことがあります。

特に日本語を少しだけ含む場合に発生するケースが多いようです。
「少しだけ」というのが厄介で、本来UTF-8であるはずのその日本語部分がwindows1252で文字化けして表示されてしまいます。その上、そのまま気づかずに上書きしてしまい、展開してしまうという危険なケースも実際に起こりました。

以前はそんなことなかったのですが、最近は頻繁に発生しているような気がします。

解決方法について、普段は私は日本語ファイルに対応するためにauto-encodingというプラグインを利用しているのですが、その設定で回避できるようです。

ある日、Atomを起動するとフリーズしてしまいました。
Atom起動アイコンをクリックして、ウィンドウは表示されるのですが、フリーズしていて何も操作できません。

強制終了して再度起動を試みますが状況は変わらず、フリーズしたまま何も操作できません。

環境は以下のとおりです。

Windows 10 Home 64bit, Atom 1.13.x

少し調べてみると、どうやらフリーズする原因のほとんどはインストールしたプラグインパッケージのようです。
このようなときは、パッケージを一つ一つ無効にして原因を特定したほうがよいとのことです。

Windows 10でInternet Explorer 11を起動する方法です。

今頃ですが、私、Windows10デビューをしました。
仕事柄、古いOSやブラウザの対応に追われる日々なので、アップデートには慎重になっていました。
とうとうWindows 10をメインに使う日がやってきたのですが、恥ずかしながらそれまでIE11とEdgeは同じものだと思っていました。別物なんですね。。

それはそうと、Windows10をセットアップ直後、Edgeはデフォルトでアイコンがタスクバーに存在しますが、IE11がどうも見当たらない。

ある日突然、Excelがダブルクリックで開けなくなりました。
正確にはExcelのアプリケーション自体は起動しますが、保存したファイルが開きません。
Excelのメニュー「開く」や、Excel本体にファイルをドラッグすれば開くことができます。
WordとPowerPointは問題なくダブルクリック一発で開きます。

常に、ダブルクリック1 STEPで開かず、操作に2 STEP必要なことは、意外とストレスになるものです。

私の環境は以下のとおりです。

OS Windows 7 Professional 64bit
Office Microsoft Office 365 Business – ja-jp

いろいろと調べたところ、Office 2010がインストールされたままの状態で、Office 365をインストールし、その後Office 2010をアンインストールすると、問題が発生するようです。

解決方法としてはOffice 365を修復します。
「コントロールパネル」から「プログラム」⇒「プログラムと機能」を開き、「プログラムのアンインストールまたは変更」の一覧から「Microsoft Office 365 Business – ja-jp」を選択した状態で「変更」をクリックし、「クイック修復」を実行します。

office365-repair

修復には5分程度かかります。

修復完了後、無事、Excelをダブルクリック1発で開くようになりました。

SNSの恩恵を得るために、シェアボタンなどを設定することが当たり前になりましたが、それらSNSボタンをオリジナル画像などで設置するコードをまとめます。

以前は、TwitterのツイートボタンやFacebookのいいねボタンなどを中心に、押された回数を示すカウントをサイトのステータスとして表示するのが定番でした。
IE6など一部古いブラウザではうまく表示されなかったり、レイアウトが崩れたりと、四苦八苦したのをおぼえています。。。

時代は移り、最近では押された回数よりも、いかにしてSNSで共有してもらい、そこからのアクセス流入を期待する方向へと移行してるように思われます。つまり、「いいねの回数」といった指標より、どれだけ「シェア」の効果が得られるかが重要になってきています。
実際に多くのサイトでも、カウントを表示するための公式のボタンは使用されなくなり、サイトのデザインに馴染むようなオリジナルのボタンを設置しているのを見かけます。

また、一時期話題になったmixiボタンを見かけなる一方で、LINEボタンやLinkedInボタンを機会が増えるなど、とにかくSNSボタンのトレンドの移り変わりが激しいです。

ボタンを設置するサイトを運用する側からすれば、その都度、どのように設定すれば効果が期待できるのか、その動向を探るのが作業負荷となっています。
そこで、随時、最新の設置方法などをまとめて、更新していきたいと思います。

  • オリジナルボタンはテキスト・画像のどちらでも構いませんが、とりあえず公式ではなくオリジナルの画像設置を目標としています
  • 本サイト「http://helog.jp/」をシェアするサンプルを用意しています
  • 各URLに負荷するパラメータの値は、基本的にUTF-8でURLエンコードします

いまさらですが、Googleタグマネージャーを導入してみたいと思います。

これまではページ解析という意味では、アクセス数ぐらいしかみていませんでした。
しかし、ある程度見ていただける方、利用していただける方が増えてきたのもあり、その方々のためにも、少しでもよいコンテンツにしていけたらと思い、もう一歩踏み込んだアクセス解析をしてみようと考えました。

それこそ一般的なGoogle Analyticsのトラッキングコードを埋め込む運用だけでしたが、Googleタグマネージャーを活用すれば、イベントトラッキングの運用や、その他クッキーなどを利用した細かい解析もできるということで、とりあえずここでは導入だけしてみようと思います。

Googleタグマネージャーアカウントを有効にする

ここでは、既にGoogleアカウントを持っていることを前提とします。
ブラウザでGoogleにログインしている状態で、以下のページにアクセスします。
Google Tag Manager

初期状態だとアカウント作成画面が表示されます。
「アカウント名」は会社名、個人名や団体名、「コンテナの設定」はサイトドメインを入力して作成します。

Monthly Archives

Search