休職中にしていることうつ病と診断されて休職中の身です。 休職中にやつていることは、 散歩で１日20000歩 読書(小説) ブログ 人と話すのはしんどいけど、話さないと社会復帰が出来なさそう。 他に何をすれば良いのか増田からアドバイスが欲しい。
スクエアなグリッドレイアウトを実装できる「jquery.square.js」 – bl6.jp
jquery.square.jsは、スクエアなグリッドレイアウトを実装することができるjQueryプラグインです。レスポンシブに対応し、いろんなデバイスから最適なレイアウトで閲覧できます。シンプルで美しいグリッドレイアウトを実装したい人は要チェックです。 以下、jquery.square.jsの実際のデモページになります。 デモ デモページでは、スクエアなアイテムがグリッドレイアウトで綺麗に並べられています。レスポンシブにも対応していることから、ブラウザ幅を縮小・拡大していくとそれに合わせて最適化されます。 アイテムはほとんどが同じサイズのものが多いですが、いくつか異なるサイズのアイテムも表示されています。異なるサイズでも綺麗なグリッドレイアウトになるように配置されています。 ブログのトップページや企業の新着情報など、応用次第で使いどころはいろいろありそうですね。 各アイテムはこんな感じで
Event Organiser - WordPressプラグインのイベント管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 東京では月1,000を超える技術系イベントが開催されています。そうした時に必要になるのが集客ページですが、技術系であればconnpassが最も使われています。他の分野であればPeatixやEventRegist、EventBrite、Meetup.com、Doorkeeperなども使われています。 もし独自ですべてを管理、運用したいならばEvent Organiserを使ってみても良さそうです。WordPressプラグインのイベント管理システムです。 Event Organiserの使い方 右側のカレンダーにイベントが出ます。 これからのイベント予定もサイドバーで確認できます。 カレンダー。 イベント詳細。 予約したり、お金の支払いもできます。 開催場所について。 iCalenda
Node.php - PHPでnodeアプリケーションを動かす MOONGIFT
PHPのレンタルサーバは数多いですが、nodeが使えるサーバはあまり多くありません。実用的なレベルでPaaSを使おうと思うとそれなりにお金もかかるでしょう。レンタルサーバでnodeを動かすのは難しいでしょうか。 その答えの一つがNode.phpです。PHPでnodeを動かす、そんな無茶なプロジェクトです。 Node.phpの使い方 インストールしているところです。 Node.phpはコマンドを使ってLinux用のnodeをバイナリダウンロードします。そして管理者モードだとnpmでライブラリのインストールもできます。そしてstartでサーバを立ち上げ、PHPとnodeを通信させるというチャレンジングなプロジェクトになっています。 執筆時点でαレベルのプロジェクトで、利用は自己責任でとなっています。試みとしては面白いですが、実用においてはご注意を。 Node.phpはPHP製のオープンソース・
HEML - HTMLメール用のサブセット記法
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本はかつてテキストメールばかり使われていましたが、ようやくHTMLメールが普及してきています。セキュリティ上の懸念も殆どなくなり、カラフルだったり装飾ができるというメリットに注目が集まっています。 そんなHTMLメールをすべてのデバイスに適切に配信できる形にしてくれる、それがHEMLです。 HEMLの使い方 HEMLはHTMLのサブセットのような記法です。 右側にあるのがごく基本的な形式です。 マーキーを流したりできます。 生成後のHTMLは右側のようになっており、ブラウザの互換性を維持できるようになっています。 カラムを用いるようなデザインも簡単に作れます。 HEMLの記法に沿って記述することで、各種ブラウザやスマートフォンアプリに対応したHTMLメールができるようになります。
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
入力された結果を検索表示するjQueryプラグイン・PHP検索フォーム「AJAX Live Search」 – bl6.jp
AJAX Live Searchは、Google Autocomplete機能と同様に入力された結果を検索して表示するjQueryプラグイン・PHP検索フォームです。ボックス内に何かテキストを入力すると、それに合う結果を検索して表示してくれます。 以下、AJAX Live Searchの実際のデモページになります。 デモ デモページには「Type to start searching …」と表示されたテキストボックスが設置されていて、ここに何か文字を打ち込むとそれに合うデータを検索してきて表示してくれます。 例えば、「a」という文字を入力してみるとたくさんの候補が出てくるのを確認できるかと思います。 デモでは候補が5件ずつ表示されるようになっていますが、左下から表示件数を変更することができます。All、5、10の3つから選択可能で、全部表示させたい場合はAllに設定すればOKです。 また、
【WordPress】wp_is_mobile()でPCとスマートフォンで表示を切り替える方法【条件分岐タグ】 | Handy Web Design
WordPressには条件分岐タグという便利なものがあって、これをうまく使うとデバイスによって表示の出し分けをすることができます。 今回紹介するのはその条件分岐タグを使って、PCとスマートフォンで表示を切り替える方法です。 条件分岐タグ wp_is_mobile() wp_is_mobileという条件分岐タグを使うと、スマホからのアクセスかどうかを判別することができます。 jQueryのif文のように「スマホからのアクセスだった時、そうじゃない時」の両方の処理がかけるので、PCとスマホそれぞれの表示の出し分けをすることができます。 条件分岐タグは他にもたくさんありますが、wp_is_mobile()はそのひとつです。 wp_is_mobile()はこんな時に便利 PCとスマホで表示の出し分けができると、例えばこんな時に便利です PC・スマホで別々の広告の表示をわけたい PC・スマホでメニュ
シンプルでフレキシブルなローディングマスクプラグイン「busy-load」 – bl6.jp
busy-loadはシンプルでフレキシブルなローディングマスクを実装することができるjQueryプラグインです。CSSや画像、fontawesomeなどを活用したスピナーを表示させることが可能です。シンプルながらも、優れたカスタマイズ性の高さが魅力的ですね。 以下のページからbusy-loadの実際のデモ動作をチェックできます。 デモ デモページでは、CSSや画像によるローディングマスクをはじめ、Fontawesome、Custom、Sizing、Text、Animation、Classesに分けられた各サンプルがたくさん設置されています。 これだけ豊富なタイプがあれば、自分好みのローディングマスクも見つかりやすそうですね。自サイトやイメージに近いものを、デモに触れながらじっくり探してみてはいかがでしょうか？ どのタイプもローディング時はオーバーレイがコンテンツ全体にかかり、その中央にロー
絶対に挫折しない！オープンソースソフトウェア「Docker」入門編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ヤスタカです。 今回は『 Docker 』の最終回、docker compose のお話です。 前回は docker file を使ってコンテナを作るところまでできたと思います。 「コンテナには php と apache と mysql を入れてひとまず環境は整ったのに、これ以上なにするの？」と思われるでしょうが、実は前回の締めでも触れたとおり、ひとつのコンテナにあれもこれもインストールした環境というのは汎用性が低くて使いづらいのです。 たとえば「 apache じゃなくて nginx を使いたい」「 mysql じゃなくて postgreSQl を使いたい」「 php じゃなくて ruby を使いたい」。そんなときにひとつの Docker file をあれこれ編集して作るよりも、ruby コンテナ用 docker file, nginx コンテナ用Docker file, p
レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ
2017年11月16日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 ↑私が10年以上利用している会計ソフト！ 1. Chart.js 公式サイト｜サンプル｜ドキュメント｜GitHub Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか？手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応！どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。 Chart.jsの読み込み まずはファイ
らくらく在庫連携プラグイン | 【公式】Welcart |SEOに強い！初めてでも安心の無料ネットショップ作成ツール
※まだ確定していない場合は、予定のドメイン（サブドメイン）をご記入下さい。 例）www.example.com
次のイベントまでのカウントダウンをメニューバー上に表示『Cal>Next』 | Macの手書き説明書
2017年11月21日 カレンダー.appで登録したイベントで、24時間以内かつ直近のイベントのタイトルと残り時間をメニューバー上に表示するアプリです。 イベントまでの残り時間を常に意識していたい人向け。
絵文字に変換できるテキストを絵文字に変換『Emojify』 | Macの手書き説明書
2017年11月21日 テキスト入力ウィンドウをホットキーで呼び出し、そのウィンドウ内では任意のテキストを絵文字に変換できるアプリ。 既存のテキストを絵文字混じりのものにして分かりやすく華やかにしたいときに便利そう。 こういった系統のアプリには珍しく日本語にも対応してくれているのが嬉しいところ。 絵文字に変換できるテキストは赤く表示されますので、その文字をクリックすると候補が表示されるか、一つしか候補がないテキストは自動的に変換されます。 変換した絵文字をクリックすると、元の文字に戻せるので何度でも編集できます。 これまで説明してきたように、一単語ずつ変換することもできますし、テキストを選択して右クリックからのサービスメニューを利用すると一括で自動で絵文字に変換できます。
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
量子ニューラルネットワークのクラウド公開に対する量子コンピュータ研究関係者の反応（11/22更新）（11/24更新）
量子ニューラルネットワークの報道とプレスリリースを受けて。 システムがクラウド公開されるのは11月27日を予定。（プレスリリースより） QNNクラウドシステムへのリンク https://qnncloud.com
「穴あきバケツの成長モデル」の話｜深津 貴之 (fladdict)
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 第三回はこの絵。「穴あきバケツの成長モデル」のお話。 サービスの成長を「バケツと水」に例える様々なビジネス指標の中で、「継続率」こそが最重要だと考えている。売上よりも、PVよりも、DAUよりも、「継続率」がもっとも尊い。 そんな継続率を大事にしつつ、サービスを着実にグロースさせるモデルが、「穴あきバケツの成長モデル」だ。 このモデルは非常にシンプルだ。一言で表すと以下のようになる。 「サービスとは穴の空いたバケツであり、マーケティングという蛇口から新規ユーザーを流し込んでいる」 ・バケツ: サービス。 ・蛇口: マーケティグ等の流入経路 ・蛇口からの水: 新規流入ユーザー ・溜まった水: アクティブユーザー ・バケツの穴
プロジェクターを使うと子供がすごいスピードで朝の身支度をするようになった - ソレドコ
こんにちは、石川と申します。普段はデイリーポータルＺというサイトで編集をやっております。 今回はプロジェクターを使って「子供のお着替えを爆速化する方法」を紹介させていただきます。 子供を抱える家庭にとって朝は修羅場じゃないですか。 時間がない中で、超高速で朝食・歯磨き・着替え・持ち物の準備等をこなす必要があり、僕の場合は自分と子供2人の3人分です。この修羅場ぶりはよく「戦場」等と比喩されます。そんな戦場の様子を写真でごらんください。 読書熱心なのはいいことですが、着替えを中断していま読まなくてもいいのではと思うのと、あとよく見ると左にいる次男は室内で長靴を履いてますね。就学前にしてもう学級崩壊です。 しかし戦場というにはちょっとのどかな風景ですよね。そうなんですよ。僕は戦場なんですけど、当の子供たちは大抵ゆっくりのんびりと人生を謳歌しています。言い方を変えると「やる気なし」。 このギャップ
俺は空手やってて結構ガタイがいいんだが そのせいか、付き合ってる女が高..
俺は空手やってて結構ガタイがいいんだが そのせいか、付き合ってる女が高確率で虎の威を借る狐状態になる 一緒に歩いてると、周りのカップルを威嚇するかのようにガンくれるなんてのは定番で 友達だか姉妹だかが浮気されたから、相手の男を殴ってくれとか言ってきたのもいた 俺はおまえのポケモンじゃねーんだよ、と まあ、格闘技ファンとか強い男が好きとか言う女にはこんなのが多い で、そんな女らと別れた後、新しく好きな相手ができたんだが 俺がモタモタしてる間に他の男と婚約していた それはそれでしゃーねーやと思い、お祝いを言いに行ったら 社員食堂で女友達相手に婚約者の年収を大自慢している彼女がいた そんときの顔といい口調といい、ベクトルは違えど俺が嫌になるほど見てきた 虎の威を借る狐そのものだった なんだ、こいつもかよ、と 恋人に自分の能力を絶賛され、頼られるのは男として嬉しいが せめて品ってやつを身に付けてほ
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
HTMLをそのままPDFにできるPHPライブラリ TCPDF | バシャログ。
こんにちは。sagaraです。現在携わっているPHPのプロジェクトで、領収書をPDF出力する処理があって、 どういうプロセスで生成しているのか見てみたところ、 PDF作成ライブラリ TCPDFを使用していました。 というわけで、今回はPDFを作成するライブラリについてのお話です。 PDFを作成するライブラリ HaruPDF PDFlib（商用） FPDF TCPDF といったものがあります。上記のうち、HaruPDFとPDFlibは拡張モジュールでインストールが必要ですが、 FPDFとTCPDFはクラスライブラリなのでサーバーの適当な場所に配置すればいいです。 後者の方が手軽に始められますね。 TCPDFでPDF作成！ GitHubからダウンロードできます。 https://github.com/tecnickcom/tcpdf HTML(XHTML+CSS)そのままPDFに <?php
これを見ておけば脱初心者！Adobe XD, Photoshop, Illustratorでデザインの作り方の手順がよく分かる1分動画
CC 2018でついに正式版としてリリースされたAdobe XD CCをはじめ、CC 2018ではPhotoshop, Illustrator, Premiereなど、数多くのアプリが機能を強化してバージョンアップされました。 それらのアプリでどんなことが具体的にできるのか、どのような手順なのか、1分で分かる動画を紹介します。 それぞれの動画は1分ほどですが、数があるのでブックマークしておいて、時間のある時にじっくり見てみてください。 いつもの作業にも新しい発見があるかもしれませんよ。
【CSS】擬似クラスの:nth-child()を覚えて特定の順番の要素を指定する | Handy Web Design
今日はCSSの擬似クラスのひとつの:nth-childについてご紹介します。 擬似クラスは他にもたくさんありますが、:nth-childを使うと要素の指定を、順番で指定することができます。何番目の要素、といった指定の仕方ですね。 実際にnth-childの使い方を見ていきます。 :nth-child(数値) 一番基本的な使い方はnth-child()のかっこに数値を入れて、そのまま指定する方法です。 p:nth-child(3) とすると、3番目のp要素という指定になります。 :nth-child(even) 偶数の要素を指定したい時に使います。 p:nth-child(even) とすると、偶数番のp要素という指定になります。偶数なので２・４・６・８・・・という順番ですね。 :nth-child(odd) 奇数の要素を指定したい時に使います。 p:nth-child(odd) とすると、
テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」 – bl6.jp
linkunderlineは、テキストリンクにアンダーラインを引くアニメーションを実装することができるjQueryプラグインです。テキストへのホバー時に、さりげないアニメーションでアンダーラインが引かれます。ちょっとしたアクセントを加えたい時によさそうですね。 以下、linkunderlineの実際のデモになります。デモページは2つ用意されています。 デモ1 デモ1 デモではテキストへホバーすると、スーッとシンプルにアンダーラインが引かれます。アンダーラインは、真ん中から左右に伸びるように引かれます。 ユーザーが現在どこにカーソルを合わせているのかを明確に把握しやすくなりますね。アニメーションがシンプルなので、ホバー時のアクションを主張しすぎる心配もありません。 さりげなく、そして美しい控えめなホバーエフェクトを実装したい人は有力な選択肢の一つになるのではないでしょうか？ ちなみに、どちら
iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
複数ユーザーで共同作業も可能な、簡単に使えるシンプルなフローチャート作成ツール・「Wireflow」
Wireflowは簡単に使えるシンプルなフローチャート作成ツールです。この手のツールの中でも特に手軽に作成できる印象でした。コンテナは既にデザインされたものを追加する簡易的なタイプですが、任意の画像をアップロードする事も可能です。ユニークなURLがランダムで発行されますが、そのURLを知らせれば複数ユーザーでの共同作業も可能となっています。最初の読み込みがちょっと時間かかりますが、基本的にはユーザー登録不要で作成からjpgへのエクスポートまで出来ます。複数ユーザーの動作確認でスマホからアクセスしましたがスマホからでも使えました。読み込みさえもう少し早いと嬉しいですね。 Wireflow
犬のイラストを描くためのカラーをまとめたPhotoshopのスウォッチ素材 -Dog Color Swatches
犬の毛色にはさまざまなカラーがあります。 ホワイト系、ブラック系、ブラウン系、レッド系、ゴールド系、イエロー系、クリーム系、グレー系、ブルー系など、犬のイラストを描くためのカラーをまとめたPhotoshopのスウォッチ素材を紹介します。 画像: aes0 カラーは犬の写真から選出されたもので、それぞれのカラーには名前がつけられており、毛色だけでなく、皮膚、目、鼻、舌などのカラーも揃っています。
これなら簡単！Bootstrap 4.0のデザインがカスタマイズできる商用でも無料のオンラインツール -Bootstrap Magic
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エナジードリンクを飲む子どもたちに起きている「異変」 - Yahoo!ニュース
任意のWebページにGoogle sheetやTrello等の簡易的な管理ツールを導入できる・「Integrations.js」
R-style
テキストを切り替える際に面白いアニメーションが使える「jquery-bubble-text」:phpspot開発日誌
作るのが楽しい！自分にそっくりな似顔絵のイラストを使ったアイコンが作成できるSketchライブラリ -Avataaars
商用でも無料で使えるフォントを定期的に紹介する・「WeeklyFonts.com」
ヘッドフォンプラグが抜き差しされた時にミュージックプレーヤの再生を止める『PauseMate』 | Macの手書き説明書
Todoリストやカンバン、マインドマップやスケジュールカレンダー等の機能を持ったプロジェクト管理ツール・「Zenkit」
CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」
リッチでカスタムデザインのドロップダウンリストが作れる「gorilla-dropdown」:phpspot開発日誌
フラットデザイン風のアバターを作ってダウンロードできる『Get Avataaars』 | 100SHIKI