クライアント向けにも自分向けにも便利。投稿画面のテキストエリア上部に思い通りの『クイックタグ』を追加する方法
エバーノートに書いておくとかアプリを使うとかいくらでも方法はあるというのに、手打ちで書いてました。なんという無駄な時間…ｗ 記述方法 エバーノートやアプリだとそれを起動する手間があるので、やはり投稿画面上にボタンがあるのが一番らくちん。functions.phpに以下のコードを記述すると、ワンクリックで好きなタグを好きな形式で挿入することができちゃいます。例として先ほどのdivやら何やらをクイックタグとして登録してみます。 functhions.php内 <?php //投稿画面にクイックタグを追加 function add_my_quicktag() { ?> <script type="text/javascript"> QTags.addButton('quick_code', 'コード', '<div class="code">\n<h5>テーマ内</h5>\n<pre><code
[報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ
先日、勉強会でAdobe Bracketsをはじめて触ってきました！ 私はST2に恋している身なのでそこまで興味はなかったのですｇげふんげふん！これ、使ってみたらなかなか良かったのですよ…！ なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet（Zen-Coding）のインストール方法を皆さんにご紹介したいと思います！！ というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。 こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…ｗ Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく
![[報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f002ec6f1c95cdefd60abc37e5ecc2b1adcba9c/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fadobebrackets.png)
[アプリ]注目の記事をまとめ読みできるiPhoneアプリ『FeedDrop』をリリースしました[作ってみた]
こんにちは、霙(@xxmiz0rexx)です！ 最近ロクにブログも書かずに何をしていたかと言いますと、水面下でいろいろな事に首を突っ込んで活動をしておりました。その中の1つを本日発表させて頂きます :) ユニットを組んで、iPhoneアプリを共同開発しました！！ 自由大学でiOSアプリの作り方を学んでから半年ほどが経過したでしょうか。 作る作ると言って全然X-Codeを起動する時間もなく年を越してしまったとある冬の日、 友人のデベロッパーさんと打ち合わせ後にアプリの話になったのがキッカケになりました。 「一緒になにか作りたいよね」 「いいね！おもしろそう！！」 「……じゃあいつやるか？」 「「今でしょ！！！！！」」 という会話があったかなかったかは置いておいてｗ やるなら今！！ってことで、そこから約1ヶ月ほどでアプリが完成いたしました :) アプリ名はFeedDrop(フィードロップ) 雨
![[アプリ]注目の記事をまとめ読みできるiPhoneアプリ『FeedDrop』をリリースしました[作ってみた]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f81ebc7aa6177bd98e44f56de07d0567b1104c3b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2F203df2f6e0371d0aa1d089835bbba0a1-540x315.png)
アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介
最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！ こちらは拡大レンズがついているので
備忘録：LINEで送るボタンの設置方法。aタグにはターゲット指定を。
最近公式にリリースされたLINEで送るボタンについてちょっと仕事で調べる機会があったので今後のためにメモします。 公式の設置方法｜LINEで送るボタン にて記述例をコピペしたところ何やら変な動き？ 記事上でLINEで送るボタンを押すと当然アプリが立ち上がるんですが、 LINEでの共有が終わったあとブラウザに戻ると、そこにはLINEのサイトが開かれていました。 まぁ何も不思議なことではなくて、公式にも ボタンタップ後、LINEが起動する前にWebブラウザが表示されます。 とあるようにそういう仕様なので、LINEで送るボタンのaタグにtarget=”_blank”を指定してあげればとりあえずはOKです。 記述例 Webサイトの場合 <a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahtt
話題のHTML5カルタ!!プレイした感想と新春★カルタ大会のイベント情報!!!!
最近スマートフォン案件が増え、HTML5と触れ合う機会も格段と増えてきた霙(@xxmiz0rexx)です。こんにちは。 さて、今回はHTML5を覚えたい！という方にピッタリのアイテム「HTML5KARUTA」と、わたしも着物でお邪魔する予定のビックイベント「HTML5KARUTA大会」のご紹介をしたいと思います！ WEB屋さんは要チェックですよー！！(∩*´꒳`*∩) 「HTML5KARUTA」とは HTML5KARUTA TLで話題になったのでご存知の方も多いと思いますが、みぞれのお友達であるWEBCRE8.jp の@glatyouさんが108つあるHTML5のタグをすべて使ったカルタを制作し、先日そのサイトを公開しました！ サイト内にはHTML5+CSS3で作られたWEB上で遊べるカルタと、実際に印刷して遊べるpdfデータが掲載されています！ 公開早々IDEA*IDEA さんやGIGA
メインマシンをWindowsからMacにした時に教えてもらった「Macではこれできないの？」→「できるよ」Tips
2011年7月にMacBook Airを購入して約1年半。 職場でもメインPCをWindowsからMacにして頂けたこともあって 段々と扱いに慣れてきた霙(@xxmiz0rexx)です。 今回はそんな私の「Windowsでできたアレ、Macではできないの？？」 という購入当初の疑問とその答えをまとめます。 まだMacに慣れていない人、もしくはこれから購入を考えている人はチェックしてみてください！ 1.保存しますか？「はい」「いいえ」をキーボードで WindowsではYとNでできたアレ。Macではどちらのキーを押してもうんともすんとも言いません。 おまけにタブキーを押しても無反応。 解決法 Macにもショートカットキーがありました！ 保存しない→⌘D キャンセル→esc 保存する→return これずっと悩んでいたので解決した時のスッキリ感がやばかったｗ 例えるなら「スゲーッ 爽やかな気分だ
Google Analytics APIを使って、プラグインに頼らずに記事のアクセスランキングを表示しよう［ wordpress］
こんにちは、霙（@xxmiz0rexx）です。 サイトにGoogle Analyticsを導入していることが条件ですが、APIを利用すればプラグインに頼らなくても記事のアクセスランキングが表示できることを最近知りました！色々カスタマイズもしてみましたので、以下に手順とサンプルコードをメモしていきます。 1：GAPI（GAPI – Google Analytics API PHP Interface）をダウンロード まずは下記のサイトからライブラリが入っているzipファイルをダウンロードします。 gapi-google-analytics-php-interface 2：example.report.phpの中身を編集 次に、ダウンロードしたzipファイルを解凍し、中に入っているexample.report.phpを編集していきます。 下記のサンプルは結構盛りだくさんなので要らない部分は外し
アプリレビューサイトとかに使えそう。カスタムフィールドに入れたURLをQRコードに変換させる方法。
スマートフォンアプリの紹介記事などで、ダウンロード用のQRコードが表示されているとそのまま端末からアプリをダウンロードできて便利なわけですが、APIとカスタムフィールドを使ったら思っていたよりも簡単にその仕組みを作ることができました。 参考にした記事など 何だかしばらくWordPressを触っていなかったら、もはや初対面みたいな、よそよそしい感じになってしまいまして、 WordPressで何が出来るのかまったく分からない記憶喪失状態になってしまったので、まずはひたすらググるところから始めましたｗ そこで見つけたのが以下の記事。 お手軽WordPress Tips：URLやサイズを指定出来るQRコードをショートコードで作れるようにする – かちびと.net ご質問頂いたのでついでに記事にします。 WordPressでURLとかサイズを指定出来る QRコードをショートコードで作成したい、 とい
ついに最終回！［自由大学］iOSアプリの作り方を学んできました！lesson５：チームを組んでアプリを作る！
こんにちは、霙です。 iOSアプリの作り方を学べる人気講座『アプリクリエイター道場』。 私が参加していた第８期もあっという間に最終回になってしまいました。 というわけで、これまで学んだことを噛み締めながら最後のレポートをしたいと思いますヾ(*´∀｀*)ﾉ 今回の講義内容 部品の使い方 グループワーク 情報収集のやり方 そんなわけで今回はいつもどおり部品の使い方を学んだあと、チームを組んでアプリ製作を行いました！ ルールは、今までの講義で習った部品を使うこと。実に最終回っぽい内容です！ ちなみに今までコミュ障すぎて他の生徒さんたちと会話することがほぼ皆無だった私ですが、 このグループワークでやっと皆さんと触れ合うことができましたｗ 自分から話しかけられない私には、このグループワークは個人的にとてもいい機会になりましたです :) グループワークで作ったアプリ はい。というわけで、各自３チームに
スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました
こちらもおすすめです！(2013.08.27)→『ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』 』 こんにちは、霙（@xxmiz0rexx）です。 スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。 コンテンツ量が多くてもメニュー分のスペースを考えずに構成できるのでかなり気に入っています :) FacebookやPathなどで使われているあのメニュー表示の動きをjQueryで簡単に再現できるプラグインです。 普段はCSSで非表示にしておいて、ボタンを押した時に┃＼( °Д°)三ｶﾞﾗｯと引き戸を開けたようにメニューが出現しますｗ ＊追記＊ ライセンスはMITなので商用サイトでも使用OKです！ 参考：PageSlide: a j
スマホでお絵かき♪ボールペンみたいで描きやすいペン先が透明なスタイラスペン「JOT」を買ってみたよ！
こんにちは！絵がド下手で、たまにアップしてはTLでdisられまくっている霙（@xxmiz0rexx）です。 絵はヘタクソですが、描くことは好きなので無駄に2本目のスタイラスペンを買ってみましたので記事にしますね！ ペン先の比較 今まで私が持っていたのはこちらのペン先がぷにぷにしたスタイラスペン。 暇な時に触るのがすごく気持ちいいペンなんですが、若干描きにくいんですよね。。 ペン先が太いので、このように着地点が見えないのです。 一方、今回購入したJOTはこのようにペン先が透明のプレートになっています。 画像のとおり、ペンの着地点が見えるので非常に描きやすいのです♪ JOTでいろいろ描いてみました♪ お気に入りのお絵かきアプリAdobe Ideasで描いてみましたよー！ Adobe Ideas – ベクトル線画とイラストレーション カテゴリ: エンターテインメント, 仕事効率化 すたーばっくす
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
Dropboxに保存したhtmlファイルをiPhoneで閲覧する方法メモ。
最近疑問だったことがやっと解決したので記事にします。 地味に悩んでいる人や、方法を忘れてしまう人もきっといると思うのでその時はこの記事を見て思い出してくださいｗ iPhoneで見られるようにする手順 1.Publicフォルダにhtmlファイルと画像など一式を置く 2.htmlファイルを右クリックし、パブリックリンクのコピーを選択 3.そのコピーしたURLをiPhoneのsafariで開く。これだけ！！ パソコンと同じノリで、iPhoneからも直接dropboxアプリからhtmlファイルを開いていたんですが、 どうにもCSSや画像などを読み込んでくれず、すごく悩んでいました。 safariからパブリックリンクを開けば良かったんですね！またやり方を忘れたらこの記事を見ようと思いますｗ 以上、霙でした！
WEBシステムのデザインについて今の会社を退職する前に私が後輩に伝えたこと
このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい
面白そう！今までにない発想の、モノでつながるSNS『i.ntere.st』に登録してみました
誰かが「欲しい」と思ってるモノ、「おすすめ」しているモノ。 人をフォローするのではなく、その人の「欲しい」「おすすめ」をフォローする。 今までのSNSとはちょっと違う、新しい発想のソーシャルサービス『i.ntere.st 』が面白そうなので、早速使ってみました！！ サイト紹介 i.ntere.st これまでは、知人をフォローして、その情報を共有するという形式となっておりましたが、今回のリニューアルでは、人のフォローという考えを無くし、人のコーナーをフォローする形といたしました。 これにより、これまでユーザーの皆様からご指摘を頂いていた、「興味のないモノが表示される」といった点を改善し、皆様に「大好きなモノだけ」が溢れ出すサービスに生まれ変わりました。 今回のリニューアルで従来の人から人へのフォローという概念をなくしたんですねー！ 興味をもったキッカケ 実は先日、渋谷co-baで行われたリニ
WordPress管理画面にオリジナルメニューを追加した時の手順メモ
前回もちらっとメモしたんですが、 もっと具体的な内容も覚えておきたいので改めて実際のコードとともに手順をメモしたいと思います。 オリジナルの管理画面を用意しておくと、クライアントさんがサイトの更新を行う場合に安心して更新をお任せできますｗ ゴールはこれ。 不要なダッシュボードウィジェット、左メニューなどをすべて非表示にし、 オリジナルで用意したヘッダー＆メニューを差し込みます。 デフォルトの管理画面は高機能な分、メニューがずらーーーっと並んでおり WEBに詳しくない方にとっては何が何だか分からないものですからね。 ここは一思いにばっさりと切り捨て、クライアント専用にやさしいシンプルな見た目の管理画面を用意してあげることで 大幅に間違いが減りますし、説明の時間も短縮できると考えてます。 ちなみに、上記キャプチャに表示されているメモは『Headache With Pictures』というプラグ
photoshop備忘録：何度でもかけ直し可能なフィルタ『スマートフィルタ』について
まだまだ知らないことって多いもので、ネットで配布されているpsd素材を勉強がてら解体していたところ 初めて「スマートフィルタ」なるものに遭遇しました。 CS3以降の機能なのかな、まったく知らなかったので使い方など調べてみましたのでまとめます。 スマートフィルタとは 後から数値を調整できるフィルタのこと。 「ぼかし」「ノイズを加える」などなど これまでフィルタというものは後からの調整は出来ないのが通常でしたよね。 しかしスマートフィルタを使えば直したいと思った時に再びフィルタメニューを開くことができるので 仕上がりが気に入らなければ後から何度でも修正が可能になります。 何だこれディ・モールト便利じゃあないか・・！ スマートフィルタの使い方 それでは簡単に使い方を書いていきたいと思います。 photoshopでのデザイン中、いつもならオブジェクトに直接フィルタを使用するところを、 スマートフィ
これはすごい！TLで話題にのぼった3D CSS Testerで私も3Dを体験してみた！
javascriptを使用せずCSSのみで画像を3D回転させる事ができてしまう時代が既に到来していたようです。面白そうなので早速試してみました！ 3D CSS Tester CSS3を利用して画像を3D回転させることができるジェネレーター。 横の数値を変更すれば即座に反映されます。 反映された3D回転は、コードが書き出されているので コピーしてそのまま使用することも可能です！！ 作ってみた ただ単に書き出されたコードをまるまるコピーして、画像を差し替えただけですが ちゃんと動いたことに感動しましたー！！ヾ(*´∀｀*)ﾉｷｬｯｷｬ ※CSS3のZ軸を用いた3D回転を使用しているため 非対応ブラウザの方には表示されなかったり止まって見えたりすると思います。とりあえずChromeかiPhoneで見て頂ければ動くかと。 参考：CSS transforms の利用 – MDN （FireFoxの対
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
