2012年 12月 の投稿一覧

eclipse + phonegapで日本語が文字化けして直したメモ

Androidアプリを作りたいなと思い立ち、使ったこともないecripseと格闘している真っ最中です。
俺です。

実機でアプリをテスト起動する所までなんとか行ったのですが、起動した所で日本語が文字化け。
文字バケーション。

思ったよりハマってしまったのでメモする。

まず、先にほぼ結論に近いチェック項目。
文字コードはWEBエンジニアらしくUTF-8を前提に進める。

  1. ecripse自体の文字コードの設定はUTF-8になっているか。
  2. ファイル自体の文字コードはUTF-8になっているか。
  3. metaのcharsetはUTF-8になっているか。

ecripse自体の文字コードの設定はUTF-8になっているか。

これは以下のサイトが解りやすかった。

テキストファイルの文字コード

ファイル自体の文字コードはUTF-8になっているか。

characode

以外と抜けてしまうファイル自体の文字コードの設定。
画像は秀丸エディタの設定。

metaのcharsetはUTF-8になっているか。

<meta charset="UTF-8">

1と2を試しても文字化けが直らず最終的にこれに気づいて文字化けが直った。

phonegapで生成されるアプリは、webブラウザが内臓されていてブラウザによって描画されるということを理解して

いなかったのでなかなか気づくことができなかった。

先は長そうだ。

wordpressに公式のLINEで送るボタンを設置する方法

本日ついに、LINE公式「LINEで送る」ボタンがリリースされました!

早速、設置してみたのでやり方を記しておきます。

まずは、LINE公式から画像をダウンロードします。(ページ最下部)

WS000001

LINE公式

設置方法|LINEで送るボタン

line_send

メディア > 新規追加

line_send2

ダウンロードした画像を解凍して、使いたいボタンの画像をメディアに追加します。

WS000000

 

画像の編集画面から、アップロードした画像のURLをコピペします。

 


<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

先ほどコピペした画像のURLを、[ボタン画像のURL]の部分にコピペします。

WS000002

[ボタン幅][ボタン高さ]は適切なサイズが↑の様に記載されていますので
合わせると綺麗に表示される様です。


<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://sugerich.com/blog/wp-content/uploads/2012/12/linebutton_36x60.png" width="36" height="60" alt="LINEで送る" /></a>

以上を踏まえると私のサイトですと、こんな感じのコードになりました。

facebookアプリから勝手にタグ付けされない設定をする方法

よく勝手にタグ付けされて怒ってる友達や、困ってる友達を見るのでiphoneやandroidから設定する方法をメモします。

facebook-tag1

メニューから「プライバシー設定」をタップ

facebook-tag2

「タイムラインとタグ付け」の「設定を編集」をタップ

facebook-tag3

「あなたがタグ付けされたコンテンツをタイムラインに掲載するかどうかを確認する」の「編集」をタップ

facebook-tag4

「タイムライン掲載の確認をオンにする」をタップ

facebook-tag5

「完了」をタップで終わり。

ただ、注意点としてはあくまで自分のタイムライン上に表示するかどうかだけをコントロールできる物です。

タグ付けした人のタイムライン上には表示されます。

完全にタグを削除したい場合は、タグ付けした本人に依頼する必要があります。

以下の記事が分かりやすかったです。

Facebookの「写真のタグ付け」を編集削除する方法 2012.5版

PC版の設定方法は、ライフハッカーさんの記事が分かりやすいかと思います。

Facebookでの「写真のタグ付け」を承認制にする方法

 

 

ちなみに、この設定をした後にタグ付けされると登録しているメールアドレスに以下の様なメールが届きます。

facebook-tag6

 

「投稿を確認」からタグ付けされた写真やチェックインを承認することが出来ます。

facebookグループの通知をオフにするやり方

最近facebookで勝手にグループに追加されて、どうでもいい投稿通知が大量に届いてハゲそうだったので設定しました。

パソコンから設定する場合

fb_group

左下のグループの一覧から通知をオフにしたいグループにマウスを持って行きます。

そうすると、鉛筆のマークが出るのでそこから「設定を編集」をクリック

fb_group2

プルダウンから「オフ」を選択して「変更を保存」をクリックして完了です。

スマートフォンのfacebookアプリから設定する場合

fb_group3

設定したいグループのページに移動してから、グループ名をタップ。

fb_group4

スマートフォンのロゴをタップ。

fb_group5

プッシュお知らせオフ」をタップして完了。

スマートフォンはandroidですが、iphoneでも同じ設定の仕方でいけるはずです。

「jQuery HighchartsTable」 の使い方

jqueryを使ってtableを簡単にグラフ化してくれるプラグイン「jQuery HighchartsTable」を使ってみました。

「jQuery HighchartsTable」を使えば、以下の様なグラフをtableから簡単に生成してくれます。

WS000015
WS000016
WS000017

「jQuery HighchartsTable」のusageでは、以下の様にファイルを読み込めば使えると記述されています。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.highchartsTable.js"></script>

3つのファイルを読み込む必要があります。

jquery本体はいいとして、「highcharts.js」と「jquery.highchartsTable.js」の二つをダウンロードしなければなりませんがこの二つは別々の場所からダウンロードします。

highcharts.jsのダウンロード

jquery.highchartsTable.jsのダウンロード

ここでちょっと罠というか、スペルミスがあって実際にダウンロードされるファイルは jquery.highchartTable.js なのに対し読み込む記述のサンプルは

<script type="text/javascript" src="jquery.highchartsTable.js"></script>

と記述されています。

jquery.highchartsTable.js

」が抜けているのでファイル名を jquery.highchartsTable.js に変更してあげましょう。

サンプルを以下に用意しました

jQuery HighchartsTableのサンプル

詳細は以下から

jQuery HighchartsTable

以下のサイトを参考にさせて頂きました。

テーブルをグラフに変換してくれるjQueryプラグイン

google analyticsで、自分のアクセスを除外する一番簡単な方法

それは、ブラウザにプラグインをインストールすることです。
以下、google chrome を使用している場合。

Google アナリティクス オプトアウト アドオン

「Google アナリティクス オプトアウト アドオン」にアクセス
WS000008

chromeに追加をクリック
analytics

「追加」をクリックでインストール完了
WS000010

自分のgoogleアカウントでchromeを同期している場合は他の端末からアクセスしても除外されているはずです。(未検証)

また、chrome以外のブラウザにも(Firefoxならアドオン)が用意されている用なので
同じ要領でインストールすれば良いでしょう。
同じパソコンでも、異なるブラウザでインストールする必要があるので注意です。

Google アナリティクス オプトアウト アドオン

スマートフォンからwordpressの記事の更新をしてみる。

わー、すごい。
Androidからも、記事更新できるのねん!

2012-12-13 13.51.02

Chromeブラウザから、投稿してます。
流石にやりづらいですが、なんとか出来るレベル。

せめて、Nexus7くらいだったらやりやすいんだろうな・・

twitter bootstrap関連の便利なサイトまとめ

WS000003

ノンデザイナーな自分がweb開発に最早必須になっている「twitter bootstrap」 そんな twitter bootstrap を更に便利に使うためのサイトを自分のメモがてらにまとめてみようと思います。

2013/01/13 Bootstrap Tour を追加しました。

twitter bootstrap の基礎(ドットインストール)

WS000011

youtubeを使ってプログラミングを懇切丁寧に教えてくれる ドットインストール さんの「twitter bootstrapの基礎」レッスンです。

そもそも、twitter bootstrap ってなに?って所から初めてくれるのでプログラミング初心者の方に最適です。

自分も手っ取り早く学びたい時には、色々なサイト調べるより解りやすいのでよく利用させて頂いてます。

twitter bootstrapの基礎

 

twitter bootstrap の便利なコードスニペット集「Bootsnipp」

コードスニペットとは、簡単に言うとコピペで使えるサンプルコードの事です。

↑こんなボタンのパーツや

こんなメニューリストも

コードスニペットをコピペで出来ちゃいます。

twitter bootstrap の機能全てを使いこなすのはなかなか難しいと思いますがここからインスピレーションを得たりするのにも役立ちそうですね。

bootsnipp.com

twitter bootstrap と組み合わせて編集フォームをカッコよくする「Editable for Bootstrap」

twitter bootstrp を拡張して編集フォームのユーザビリティを上げてスタイリッシュにしてくれます。

jQueryとBootstrapを読み込んで・・

	<link href="path/to/bootstrap/css/bootstrap.css" rel="stylesheet" /><script type="text/javascript" src="path/to/bootstrap/js/bootstrap.min.js"></script>

ダウンロードしたbootstrap-editableのファイルをプラグイン的に読み込むだけ

	<link href="path/to/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" /><script type="text/javascript" src="path/to/bootstrap-editable/js/bootstrap-editable.min.js"></script>

ダウンロード&詳細は以下からどうぞ

Editable for Bootstrap

twitter Bootstrap と組み合わせて見出しを装飾できるcss

作者の方も仰ってますが twitter bootstrap は便利なんだけど意外と見出し(h1タグなど)の装飾が無いんですよね。

このエントリーはデザインができない自分にとってはとてもありがたかったです! 画像には一部しかありませんが、提供して下さっているcssを読み込めばかなりの数の見出しのパターンが使えますのでとってもオススメです。

使い片などの詳細は作者の方のブログが分かりやすいので参照してください。

twitter Bootstrap で見出しを装飾したい

twitter bootstrap の過去のバージョンをダウンロードできる「Bootstrap History」

 説明の必要も無いくらいそのままですが、twitter bootstrap の過去のバージョンを網羅してダウンロードすることができます。

特に、1.2.0、1.4.0、2.0.0辺りは大きく変更があるので元ファイル欲しいなーとか過去のバージョンの方が使い安かったなと言う場合には重宝するので覚えておいて損はないと思います。

Bootstrap History

モックアップをcacoo的に作れる「Div Shot」

今回、紹介するサイトで一番凄いなと思ったオンラインツール。

もっと早く知っていれば・・

左がbootstrapのモックアップ画面で右にタグの名前がズラリ。
WS000007

例えばbuttonタグをドラッグして
WS000004-001

右のモックアップ画面にドロップすると・・
WS000006

buttonが出来た!
divshot5

更にHTMLファイルをダウンロードして使うことも可能。
WS000001

Div Shot

twitter bootstrapでサイトツアーを実装できる「Bootstrap Tour」

WS000008

↑こんな感じでサイトの使い方を説明する時に便利なやつです。

イメージが沸かない方はデモを参照。

デモ

ダウンロードはgithubから

ダウンロード

使い方詳細は以下から

使い方詳細

blog始めました。

忘れっぽい性格なので、仕事で得たwebの知識や気づきを書き残したいと思います。

このサイトは さくらVPS + wordpress で構築しています。

wordpressの運用は初めてなので、使いながら覚えてノウハウ記事を書けたらいいなーとも思っています。

宜しくお願いします。