サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Switch 2
www.kara-full.com
facebookページのウォールを取得して表示するサンプル – CODEPEN facebookのウォール(タイムライン)を取得して自分のサイト内に貼り付ける方法をまとめました。 コードとサンプルはCODEPENにまとめてあります。 【1.facebookページのID取得】 まずはウォールを取得するfacebookページのIDを取得してくる必要があります。 各facebookページに付与されている固定アドレスを覚えておきます https://www.facebook.com/固定アドレス それを以下のアドレスに貼り付け実行します。(wwwをgraphに変える感じ) http://graph.facebook.com/固定アドレス そのページに飛ぶとfacebookページ情報が入った以下の様なコードが表示されているので、その中のidをメモっておきます。 { "about": ... "loc
SUPERBOX、Thumbnail Grid、least.js 以前twitterや当ブログのブックマークまとめで紹介したものですがjQueryプラグインでGoogle画像検索風のギャラリーを使いたいところがあったので使用感含めて比較したのをまとめてみました。 どれもiPhone、Androidに対応されていて、jQueryは現在最新の1.10.1で確認しています。 SUPERBOX サムネイル Superbox 【使用スクリプト】 ・jquery.js(1.10.x系でも動作) ・superbox.js(min : 4KB) 【サンプルコード】 <div class="superbox"> <div class="superbox-list"> <img src="サムネイル画像" data-img="拡大画像" alt="画像名"> … </div> </div> 【ライセンス】 M
以前使ってたofficeが流石に古くて現在の4桁のofficeファイル(.xlsxや.docx)が開けなかったので1,2年程前にOffice for Mac2011にしたんですがエクセルが洒落にならないぐらい重い。 1セル動かすのにも数秒待ったり、スクロールしたらレインボーボール(読み込み中に出てくるアレ)が出てくる始末。このままではとてもじゃないけど仕事にならないので一時的ではあるけど改善策をご紹介。 今更ですが久々にエクセル立ち上げた時にファイルの場所を忘れたりするので備忘録的に。 やる内容としては簡単(でも毎回やるとなるとメンドイ)、エクセルの初期設定ファイルを消すだけ。 エクセルファイルを開いて何か重いなと思ったら、とりあえずエクセルを落とします。 完全に落ちてから以下のファイルを消します。 [ユーザー名] - [ライブラリ] - [Preferences] - 「com.micr
Macs Fan Control – control fans of any Mac & Boot Camp! CRYSTALIDEA Software 前回の記事でiMacのHDDをSSDに換装しましたが、HDDに付いていた温度センサーのケーブルを付けてないせいか、どれぐらい回せばいいのかわからず常にMAXで回転します。 調べてみたところいくつかのブログではセンサーをホチキスの針などで通電させるといった物理的手段をとってる所がありますが、今は便利なことに無料のMacs Fan Control。というファンを制御するアプリがあるのでこれを使いましょう。(ちょっと怖いし…) このアプリは素晴らしいことに各センサーの温度を元に回転数を制御してくれる機能もついてます。 ダウンロードしてインストールする手順はいつも通りですが、Mountain Lionからセキュリティが厳しくなったのかAppleに
Coda 2 アイコン 先日iMacをSSDに換装してOSから全てセットアップしなおしたので、これを機に自分のWebの制作環境のセットアップをまとめておきます。 サイト制作にあたってオーサリングソフトは8割Coda2、2割Deamweaverといった感じでなので、今回はCoda2とプラグイン周りになります。(Dreamweaverは昔作ったサイトの更新作業などに使うぐらい) Coda2のインストールは普通のアプリのインストールと同じなので割愛します。 他のアプリについてもそうなんですが環境設定も基本あまり弄らないので大したことはしてませんが、変えたのは以下ぐらい。(デフォルトを忘れたので変わってない所もあるかも) 【Coda2 環境設定】 [一般] 分割ウィンドウ:左(縦分割) サイドバーの位置:右 [エディタ] デフォルトの改行コード:Windows タブコードの幅:2 エディタのフォン
Create Recovery Mediaディスクの作成 昨年末に購入したThinkPad X121eのバックアップを今さらながら取ろうと思ったら、やり方がいくつかあって混乱したのでメモっておきます。 自分の場合、Macがメインの作業環境になっているので正確には行ったのはバックアップ というよりもリカバリーディスク(工場出荷状態に戻す為)の作成方法になります。 比較的新しいThinkPadを持ってる人は知ってるかと思いますが、ThinkPadにはLenovo ThinkVantage ToolboxというバックアップやWindowsのアップデート、環境設定などをまとめて管理できるアプリが入っています。 で、バックアップを取るにはWindowsのバックアップを使う方法とこのThinkVantage ToolboxにあるThinkVantage Rescue and Recoveryを使う方法
Google Chrome 少し前までGoogle Chromeをメインブラウザとして使っていたんですが、Ironを使ってみたらユーザーにとってはChromeとまるで違い(Googleに情報を送信する機能などが削除)がなかったので乗り換えました。 機能やUIも一緒で拡張機能もそのまま使えるのでChromeの同期設定をそのまま引き継いで簡単にセットアップできたんですが、いくつかの拡張機能がインストールされてませんでした。おそらくChrome Web Storeに登録されているものだけが同期されるんじゃないかと。 で、いくつか手動で入れてたんですが既に配信を止めていてネット上に見当たらないのがあったので、どこかのフォルダ内にあるんじゃないかと、それを取ってくれば使えるんじゃないかと思って調べてみたら既にインストールされている拡張機能をパッケージ化して取り出す方法があったのでメモメモ。 まずは拡
iPhoneやAndroidでGoogleMapのリンク先を開くと現在のブラウザ(もしくは標準のブラウザ)で開いてしまうので、これをブラウザからでなくGoogleMapアプリから開くようにHTMLで指定する方法を備忘録メモ。 iPhoneユーザーの方は問題ないかと思いますが、自分のようにiPod touchを使ってると性能の低さからブラウザからGoogleMapを開くとレスポンスが悪い上に、ストンストン落ちるのです。これでは困ると言う事で、指定方法があるんじゃないかと調べてみたら案の定ありました。えっ、今更!?と思うかもしれませんが、えぇ、今更です。 指定方法は簡単!GoogleMapのリンク先にクエリ(q=*****部分)を追加してあげるだけ。 href="http://maps.google.com/maps?q=*****" これの*****部分を指定の名称(会社名や施設名など)や住
タイトルにはiPhoneと書きましたが、自分はiPhone持ってません。4,5年前のMotorola携帯を未だ使ってます。でもiPod touch(第2世代後期)を持っているのでいつiPhoneに乗り換える事になってもスムーズにできるようにWi-Fi経由で色々設定済みです。 先日の孫さんの義援金100億円騒動もあって周りでさらにiPhoneユーザーが増えそうなので(実際周りに増えてるので)、GoogleのメールやカレンダーなどをiPhoneに丸っと同期させる方法を聞かれた時や自分自身の備忘録。メールに関しては以前書いたIMAP化しておくと更に便利です。 なので今後聞かれたら「続きはWebで!」って答える予定。 【1.iPhoneにGメールアカウントを設定する】 iPhoneのホーム画面の「設定」-「メール/連絡先/カレンダー」-「アカウントを追加…」からGメールアカウントを追加します。 i
最近ではスマートフォン対策されたサイトが増えてきており、自分もスマホ対策を行ってます。 そんなスマホ対応していてiPhone(正確にはiPod touch)で確認してみたら特定のエリアだけ文字サイズが妙に大きくなっている現象があり、ちょっと(実際にはかなり)ハマったので備忘録的メモ。 メディアクエリを使ってウィンドウサイズによってスタイルシートを分けてるんですが、PC環境とiPhoneを縦で見ると問題ないのに何故か横にした時だけフォントが大きくなるという現象が発生。 cssを色々書き換えてもどうしても直らずレイアウトから変えなきゃいかんのか…と悩んでいたら、どうやらiPhoneでは自動でフォントサイズを調整してくれる機能があるらしいです。で、それを解除するにはCSSのbodyにでも以下を加えるだけ。 -webkit-text-size-adjust: none; これで無事解決。 でもAn
以前jQueryプラグインを使ってスクロールバーをカスタマイズする方法を書きましたが、2010年9月に書いただけに情報も古かったので、紹介したjScrollPaneのバージョンアップ版に加えてjScrollbarとfleXcrollの2種類のカスタムスクロールバーのプラグインも合わせて比較してみました。タイトルにjQueryプラグインと書きましたがfleXcrollだけは単体で動作するのでjQueryは必要ありません。 ちなみにjQuery本体のバージョンは1.5.2を使ってます。 一先ず一番問題となるIEに対応しているかチェックしてみましたがどれもIE7どころかIE6にも対応してました。素晴らしい!以下にそれぞれのスクロールバーの特徴を上げておきました。 jScrollPane ・jQuery以外にjquery.mousewheel.jsが必要。 ・好きなIDやクラス名に対して設定可能。
jQuery Touch Swipe Slider イメージ 現在KARA-FULLのトップで使っているスライダーはjQueryベースで拡張性の高いSliderKitというのを使っているんですが、スマートフォン対応を考えるとちょっと使いにくさを感じたのでスワイプ(フリック)などの動作に対応したTouchSwipeというタッチデバイスをベースにイメージスライダーを作成しました。 俗にいうjQueryプラグインってやつです。 このTouchSwipeの便利なところはタップやスワイプだけでなく2本指でのスワイプにも対応しているという点です(使ってませんが)。ただあくまでこのプラグインはタッチデバイス用のプラグインなのでスライダーなどの機能は自分で作る必要があります。 という訳で作ったのがコチラ。 Demo:jQuery Touch Swipe Slider – jQuery animation
以前、PhotoshopデータをFlash読み込み時に色が変わる対策について書きましたが、書いた数日後に非常に楽な方法を見つけました。一連の流れとしては 1.スクリプト(jsx)を使ってpsdをpngに書き出し 2.Flashコマンドを使ってライブラリに読み込んだアイテムを自動振り分け 3.Flashコマンドを使って自動リンケージ設定(ActionScript用に書き出し) といった感じ。あらかじめphotoshopで結合したりレイヤー名を指定しておく必要はありますが、かなり手間が省けるのでオススメです! 何で今頃かというと単純に書くのを忘れてました。技術ネタはかなり時差があるときがあるのでその編はご容赦下さい…。むしろもっといいのがあるよ!ってのがあったら教えて頂けるとコレ幸い。 【1】スクリプト(jsx)を使ってpsdをpngに書き出し とりあえず以下のページからExportAllLa
久しぶりの技術系ネタの記事です。 Flashだとスクロールバーまで好きなように作れるけど、HTMLだと標準のスクロールバーでどうもサイトのデザインと合わなくてダサいと思う事があるかと思います。 そんな訳でリサイズに対応したウィンドウ全体のスクロールバーのカスタマイズをjQueryプラグインのjScrollPaneを使ってサンプルを作ってみました。 完成サンプルはこんな感じ。 サンプル jScrollPane自体は結構古いスクリプトなのでjQuery1.2.6を使ってますが最新の1.4.2でも問題なく使うことが出来ます。一応ちょいちょいバージョンアップがされているようですしね。 他の多くのサイトでも載っているので、普通に設置する所までは割愛します。 以下のサイトにサンプルコードが載っているので参考にしてください。 要素のスクロール|jQuery plugin|Ajax|PHP & JavaS
Belkin AV360 Mini DisplayPort コンバータのパッケージ 引越しに備えて荷物を減らすべくBelkinのAV360 Mini DisplayPortコンバータを購入しました。 今Windowsに使ってるディスプレイが間に合わせで買った(なのに8年も使った)CRTディスプレイ(ブラウン管)なので奥行きがあるわ、重たいわでかなりスペースを取るんです。 そこで折角買った27インチサイズのiMacをフル活用すべく外部ディスプレイとして使えないか調べて出てきたのがコレ。 コレの素晴らしい所はHDMI出力さえあればiMac(MiniDisplayPortがあるもの)を外部ディスプレイとして使えるというところ。 iMacを外部ディスプレイにする方法を調べてみるとDVIアダプタやVGAアダプタでできるのでは?というのが結構出てきますが、これはMiniDisplayPort → DV
仕事でお問い合せフォームを使う代わりに、メーラーを件名を決めうちで立ち上げる事で対応して欲しいという事があったので、よく知られているリンクに対してmailtoにsubjectを追記して対応したんですが、その際に文字化けしてちょっと手こずったのでメモ代わりにその対策を書いておきます。 制作環境はMacで、HTMLのエンコードはUTF-8です。 この環境下で以下のようにメーラーが立ち上がるようにした所、 <a href="mailto:[email protected]?subject=件名">お問い合せ</a> Macでは問題なくメーラーに件名が表示されましたが、Windowsで確認した所、件名が文字化けしてました。そこでコチラを使ってsubject部分をShift-JISにエンコードした所、今度はMacで文字化け。そりゃそうだ。 おそらくHTMLのエンコードをShift-JISで作成すれば問題ないで
MacのSSD状況 ご無沙汰しております、当ブログの管理人4410です。 習慣というものは恐ろしいものでつけるにはものすごく時間がかかるくせに、ちょっと離れると初めてやるかのように億劫になってしまいます。まさか約3年ぶりの投稿になるとは…。 3年ぶりの挨拶はさておき、本題です。 ここ最近さほど大きなファイルを入れているわけでないのにドンドン残りストレージ容量(HDDやSSD容量)が減っていることに気付いたのでその対応方法の備忘録です。 上のキャプチャが対応前の状況。こうなるともはや仕事どころではありません。 続きを読む MacのHDD・SSD容量の確保(Adobe CC利用者向け) Anitype Anitype フォントに様々なアニメーションを付けてコードも公開できるサイト。 なんとなく見てても楽しいし、モーションのネタ探しや技術的な勉強にもいいです。 シンプルなデザインに脈動するエフェ
サイト管理にMAMP PROを使ってみた 以前MAMPを使って複数サイトを管理する方法を書きましたが、iMacに新しく環境を作っているのでこの際だからMAMP PROを導入してみました。 試用期間中使ってみてよさそうだったら購入しようかと思ってます。 しかし海外サイトから買った場合、どうやって領収書を貰えばいいんだろう・・・。 メールのコピーとかクレジット明細だけで経費として落とせるかな? というわけでとりあえず公式サイトからMAMPをダウンロードしてきます。 MAMPもMAMP PROも一括りにされているので落としてくるものは同じです。「Dowlnloads」ページの[Download: MAMP & MAMP PRO 1.9]からダウンロードしてきます。 ちなみにMac OS 10.6でMAMP PROをダウンロードしようとしてる人は最新版の1.9だとバグがあるようなので前バージョンの
MacではMAMPをインストールする事でローカルでWebサイトの開発環境を構築する事ができますが、デフォルトでは1つのドキュメントルートしか設定できないので、何とか複数設定して複数のサイトをルートパスから参照できんもんかなぁと調べてみたらわかったのでメモ。 初めに言っておくとMAMP Proを導入すればあっさり解決できます。 しかもGUI操作でわかりやすく、簡単に。 でもお金がかかります。有料なんですねー。残念ですねー。 出来る事なら無料で済ませたいと言うのが貧乏クリエイターのSaGa。 WindowsでWeb開発を行ってた時はポートを変えて複数のテストサイトを管理してたからMacでもきっとできるはず!できないわけがない!! とりあえずやりたい事はこんな感じ。 1.複数のドキュメントルートを設定してブラウザ上からルートでアクセス。 例) /Users/ユーザー名/www/testsite1
このページを最初にブックマークしてみませんか?
『www.kara-full.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く