Web Design Articles

  • 1819

shopifyという凄いECプラットフォーム

こんにちは、のすけです。ただの雑記なのですが、shopifyというECプラットフォームご存知でしょうか。最近は、簡単に個人のショップを作れるサービスがいっぱいあって例えば ・BASE ・STORES とか便利で利用していました。数クリックでWEBのECショップが簡単に作れて便利ですよね。ただ、セール中のモーダルを出してみたりなど、ちょっとした複雑な機能を 追加したりなんかは難しくてそうなってくると、他のECプラットフォームになってくるわけですがたとえば ・WordPressにECプラグイン(WooCommerceとか)入れる ・ECcubeを使う 何かの選択肢が出てきたりします。そんな中で、最近?2018年らしいけれど日本語にも対応したshopifyが中々凄いそう利用間隔はBASEやSTORESのような感じでありながら カスタマイズ性がWordPressやECcubeのような感じ。つまり サーバー不要で数クリックでショップを開けるけて かつ細かいカスタマイズも色々できる!APIもあって中々いじりがいがあるようです。 フロント部分はスクラッチで自前で作って、管理画面だけ利用するなんてこともできそうなので 期待が持てます。海外性ということもあり、海外向けのEC作りたい場合にはかなり重宝しそうです。ちょっと色々いじっていこうかなと では!

  • 1881

高速で動くWordPress環境を探して辿り着いた「KUSANAGI」に変えたら超速いし・安いし・データの転送容量制限ないしでかなり良かった

こんにちは、のすけです。WordPress構築用のサーバーは各社から色々なものが出ていて「WordPress おすすめ サーバー」なんて検索すると色々出てきます。 例えば有名どころだと、エックスサーバーやwpx なんかは昔か速いと評判だったりします。実際速いです。そのほか、速そうなのか「高速を追求したレンタルサーバー」と謳うヘテムルやLite Speed(なにそれ?)を使っているmixhostは速そうな感じです。それでも、配信データ量の制限があったり、値段がちょっと高いという点があって躊躇します。 あとNodeサーバーも立てたいなとか。。 そんな時出会ったのが、こちら【Conoha】です。クラウド型ホスティングサービス Conoha VPS。レンタルサーバーも一応提供されていて Conoha WINGは国内最速を謳っていたりします。が今回はVPSの方です。公式キャラクターは「このはちゃん」どうでもいいですねw。で、このConohaですがなんと転送量に課金がありません。基本的にはいくらでも使えます。さらに!!高速にWordPressが動作するサーバーイメージ「KUSANAGI for ConoHa」を提供しています。このKUSANAGIは WordPressの実行時間3ミリ秒台、秒間1000リクエストをページキャッシュ非使用で実現する世界最高速クラスのWordPress実行環境です とのことで、かなり速そうな感じ。早速使ってみました。結果から言うと、Conohaの月900円の1Gプラン(推奨は4Gプランにもかかわらず)でかなり高速でした。3秒と言うのはスマホで表示されるまでの時間なので、サーバ応答時間はもっと速くて0.029秒とかなり高速な結果が出ています。 Conohaでサーバを立てる KUSANAGIの初期設定をする URLの設定をする WordPressのインストール KUSANAGIの設定 表示してみる [...]

  • 1882

WordPressのテーマにサムネイルをサポートさせる

こんにちは、のすけです。自分でWordPressテーマを作ると必要な機能のみ入れることができ本当に便利なのですが。デフォルトの状態では投稿のサムネイルがサポートされていません。そこでサムネイルをサポートする方法を記載します。 投稿のサムネイルサポートする 一部の投稿タイプのみサムネイルをサポートする方法 テーマのテンプレートへの反映方法 表示サイズを変える方法 CSSクラスを設定する方法 投稿のサムネイルサポートする サムネイルをサポーとさせるには、functions.phpに設定を書き込みます。 add_theme_support( 'post-thumbnails' ); 投稿サムネイル - WordPress Codex 日本語版そうすると、投稿の編集画面で「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。 一部の投稿タイプのみサムネイルをサポートする方法 例えばカスタム投稿タイプ「blog」と「kouza」にのみにサムネイルをサポートさせるためには、 add_theme_support( 'post-thumbnails', [...]

  • 1884

WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインする

こんにちは、のすけです。はい。今まで様々な投稿関係のテクニカルなことを紹介してきましたが、今回は一番わかりやすいデザインを触っていきたいと思います。デザインはCSSを弄って色々とやっていくわけですが、如何せん設定項目が多く、CSSも膨大な数を書かなくてはいけないためとても大変です。 そこで巷ではCSSフレームワークというものが用意されています。有名な例では「Bootstrap」「Foundation」などがあります。今回は「Bootstrap」を導入する例を紹介したいと思います。なお、バージョンは最新のBootstrap4を扱います。 Bootstrap4はいわゆるよく利用されているBootstrap3の後継バージョンで、ついにフラットデザインになったものです。 利用されすぎて「Bootstrap臭さ」と呼ばれるものがあったBootstrap3ですが、4になっていくらか軽減されていると思います。 Bootstrapを読み込む ヘッダーを作る ナビゲーションメニューをつける li要素とaタグにクラスを付けるためにfunctions.phpに追記 まとめ Bootstrapを読み込む 今回はheader.phpに書き込む手法でいきたいと思います。また読み込み方法もCDNからデフォルトのBootstrapを読み込むもっとも簡単な方法を選びました。CSS <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> JS <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" [...]

プロジェクトでのタスク管理にオススメな「Backlog」の使い方

こんにちは、Hollywisの「のすけ」です。 今回は僕たちHollywisが日々どのような形で、プロジェクト管理をしているかをご紹介していきたいと思います。 なぜプロジェクト管理が必要? まず、僕らは日々の作業の7割はプロダクトを作る「プログラム開発」を 実施しています。たった2人で運営していますが、やらなくてはいけないことは数多くあります。 そのため、次に何をするのかを管理しないと優先順位がわからなくなるため オロオロすることになり行動が遅くなります。 そしてHollywisでは、より効率の良いプロジェクト管理のためにWebから利用できるプロジェクト管理システムを利用しています。 プロジェクト管理システムまで使わなくていいんじゃ? 以前はExcelで線表引く、MSプロジェクトを使うなどをやっていました。 しかし、状況の変化によってメンテナンスしなくてはならないため、管理者がExcelやMSプロジェクト と睨めっこする時間が膨大になり、管理する時間がもったいない状況でした。 その点、プロジェクト管理システムを用いればタスクは管理者だけではなく 利用者全員で自動的に管理されるため、管理コストが減ります。 また、日々変わる状況を瞬時に反映できるため、チーム全体のプロジェクトスピードも上がり、いいことづくめです。 その他、タスク忘れ防止・マイルストーン設定・チーム連携でも有効です。 よくあるプロジェクト管理ツール よくあるプロジェクト管理ツールとしては「Redmine」が有名です。 「プロジェクト管理ツールの定番!今更聞けないRedmineの特徴をまとめてみた。 | 株式会社LIG」 また、ソースコードのバージョン管理システムGitを取り込んだ「Gitnub」や「bitbuket」を使ってしまう というやり方もあります。 しかし、「Redmine」はサーバを自前で立てて管理しなきゃいけないので大変。 「Github」や「bitbuket」は主にソースコード管理支援システムなので、開発以外のタスク管理には 向かないという理由で、僕らは利用を断念しました。 そして現在たどりついたのが「Backlog」です。 Backlogでできること 何ができるのかをざっくりと言うと 課題を登録し共有できる 個々の課題の状態を管理できる 課題の状態をメンバーに自動通知できる ソース管理システムと連携できる wikiが使える といった感じです。 加えて有料のプレミアムプランからは、ガントチャートやバーンダウンチャートが使えます。 Redmineとあまり変わりませんが、画面がシンプルで使いやすいことと、 なによりサーバ管理をしなくても良いのが魅力です。あと値段も手ごろ。 まだチームの規模が大きくないので僕らはBasicプランで何とかなっています。 こんな感じの画面です。 どんな風に使うのか 一番役に立つと感じる部分は、すぐにタスクが登録できることです。 バグを見つけたら、即、課題登録。 会話の中でタスクができたら、即、課題登録。 なんか思いついたら、即、課題登録。 コツは、とりあえず課題登録することです(笑)。 あとで課題を棄却してもいいので、すぐ登録することで、忘れることを防ぎます。 登録した後で、誰にやってもらうか、期限はいつにするかを決めれば良いと思います。 課題を通知したいメンバーを選択することで、メールやBacklog内の 通知機能で「お知らせ」することができるので、とても便利です。 [...]

VisualStudio 2013 Update3 適用方法

VisualStudio 2013 Update3が2014/8/4にリリースされました。 主な改善点は以下 CodeLens」のGitやTFS対応機能強化 Code Map」の色付けによる可視化 Microsoft AzureのWebJobs機能追加 Hollywis(はりうす)でもPCのVisualStudioをアップデートする必要が出てきたので Visual Studio 2013 の更新プログラム 3 を取得する方法(アップデート)をご紹介します。 VisualStuido 2013を起動して[ツール]-[拡張機能と更新プログラム]を選択 次に「Visual Studio 2013 Update」を選んで「更新」をクリックすると、exeがダウンロードされますので、実行してください。 ダウンロードしたexeを実行するときは「Visual Studio 2013」は閉じておく必要があります。 ダウンロードが上手くいかない場合は、以下のMS公式ブログのリンクからダウンロードして実行してください。 MSDN Blogs Update3とは関係ありませんが Visual Studio Tools for Unityが無償公開されたのが気になりました。これを使うとUnitiyのデバックがVisualStudio上で可能になるそうです。 任意の場所にブレークポイントを配置して、止めることもできるとのこと。 のすけ

RSSって今も使ってる人多いのね。ということで「RSS機能」をリリースしました!

HOTCOOβ(ホックー!ベータ)に新しい機能が追加されました 主な修正は以下の通りです。 ・RSSで最新記事を配信開始! ・記事画面へのソーシャルボタンの配置! ・一部画像の描画の高速化 ■RSSの登録方法はこちら RSS機能はトップ画面(http://hotcoo.net)をずっと下までスクロールさせて、RSSアイコンをクリックしてください RSSリーダーで、そのURLを登録しいただければ、最新の記事投稿を10件取得できます。 上の画像はFireFoxの例 また、Chromeの拡張アプリ「RSS Subscription Extension(by Google)」とかをChromeウェブストアから入れてあげると 次のようにTopページにもアイコンが表示されますので、簡単に登録できます。 これからも、サービス向上に努めてまいりますので、HOTCOO | ホックー!をよろしくお願いします。

本日、 ユニークな場所・楽しみ方を発見できる「ホックー!β(ベータ)」をリリースしました!!!

やっとリリース!!! 当初のリリース予定日から1カ月ほど遅れてしまいました。 大変お待たせしてすみません。 本日、ユニークなお出かけスポットや観光地を発見できるサービス、ホックーαに 全面的な機能拡充・改善を施し、「ホックー!β(ベータ)」として新たにリリースしました!!!!! αバージョンからあった機能やページの見た目も大きく変化し使い勝手も向上していますので、ぜひチェックしてみてください! 新しくなったホックー!を見るにはこちらから! 新機能 HOT(流行)、STANDARD(定番)、COOL(穴場)ランキング 単にあるエリアのおでかけスポット情報が検索できるだけでなく、そのエリアで流行っているスポットや、必ず押さえたい定番、さらにユニークな穴場を探すことができるようになりました。 しかも、独自の解析機能「HOTCOO解析力」により、流行っている度合い、定番さの度合い、穴場さ(?)の度合いをスコア化し、そのランキングをみることができます!! ランキングを見るにはこちらから! この機能を使うことで.... HOTランキングをチェックすれば、流行を先取りしてお友達に自慢できます! STANDARDランキングで予習すれば、旅行先で、行っておくべき定番を見逃さない! COOLランキングから探せば、同じところに何回旅行しても新たな楽しみ方が見つかります! 本機能を皆様の旅行やお出かけに役立てていただけると幸いです。 プレスリリース http://www.value-press.com/pressrelease/129809 [さいぞう]

はりうすビール部 よなよなエールの巻

こんばんは。 はりうす はまだ一円も儲けていないので、ビール部では基本的に本物のビールはのんでおらず、 第三のビールばかりです。 これはこれでおいしく、特に夏はさっぱりしていて良いので最近は満足していたのですが、 この間、相方のすすめで、ついついよなよなエールのお試し飲み比べセットをamazonでポチってしまいました。 よなよなエールお試しセット http://item.rakuten.co.jp/yonayona/562929/ うひひ。 よなよなエール、水曜日のねこ、インドの青鬼、SUNSUNオーガニックビールの4本はいって1,000円でした。 本当は、全部一気にあけて飲み比べたたいのですが、そんなにお酒が強くないので、一日一本ずつあけてレビューしたいと思います。 たのしみ! [さいぞう]

知らなかった!神奈川の渋いスポット

こんばんは。さいぞうです。 最近のはりうすでは、 ホックー!の 遅れまくっている次のリリースに向け、大量のスポット情報のチェックをしています。 これは、基本的にはかなりめんどくくつまらない作業です。 でも、たまに、これまで自分が知らなかったけど、かなり面白そうなスポットを発見できることがあります。 せっかくなので、そういうスポットを少しご紹介します。 * 銭湯系 政之湯 https://hotcoo.net/Article/Details/EE26C23B-8401-4317-AA55-1F86EB17E2CF 川崎市内にある銭湯。写真を見た感じではかなり雑多な感じでとても魅力的です。 http://www.kawasaki1010.com/now/koten/cyubu/masanoyu.htm このページによると、温泉ではないが組み上げた鉱泉を沸かしているらしく、疲れも取れそうなのもいい感じです。 松島館(横浜) https://hotcoo.net/Article/Details/DA2588D3-E9C9-4AC6-98F8-8195B7E24510 なぜかとても渋いモノクロの写真になっています。 これだけでいってみたい気がしますが、名前も「~湯」じゃなくて「館」なのもしぶい。 桜木町とか繁華街にあるらしいから呑む機会があれば行ってみようと思います。 * 遺跡系 朝比奈切通 https://hotcoo.net/Article/Details/C2FDFCA6-39A9-4B42-8486-7920A45084B0 そもそも切通というものを知りませんでしたが、 wikipediaによると、山をぶち抜いて作った道みたいな感じらしいです。 人口の峠というか、上が空いているトンネルというか、そういうものです。 http://ja.wikipedia.org/wiki/%E6%9C%9D%E6%AF%94%E5%A5%88%E5%88%87%E9%80%9A%E3%81%97 この朝比奈切通は鎌倉と横浜の金沢あたりを結ぶ山道になっているようです。最近自然に触れていない気がするので、行って来ようと思います。 十六ノ井 https://hotcoo.net/Article/Details/B02B7B04-45C1-4905-8A6F-BC0BD0601386 鎌倉の寺院の裏にある岩窟内に4×4で並んでいる穴。 見た目にも不思議な感じですが、 何のための穴なのか不明というのがいろいろとそそられるスポットです。 行ってきたら、またホックーでレポートします。 さて作業の続きを頑張ろう... [さいぞう]

babylon.js ステップ8 アニメーション(Animations)

babylon.js でのステップも8個目!!今回はアニメーションです!アニメーションは、メッシュに動きを与えて見栄えがするシーンを作成出来ます。いきましょう! アニメーションの2つの方法 キーフレームアニメーション アニメーションを止める方法 終了を待って同期処理をする CreateAndStartAnimation関数 アニメーションのブレンド アニメーションの重みを設定してブレンド イージング機能 複雑なアニメーション まとめ アニメーションの2つの方法 アニメーション方法には2つあります。 予めアニメーションの動きのキーフレームを定義する方法 実行時にアニメーションを適用されるようにプロパティを随時変更する方法 キーフレームアニメーション まず環境を作りますシーン、ライト、カメラを設定してから、箱を一個置いてみます。 function createScene() { //Here... your basic scene as before: [scene, light, camera] //Create a box var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene); box1.position.x = -20;アニメーションオブジェクトを定義します。 (GSAPみたいなトゥイーン的な方法ですね) // new BABYLON.Animation(名前,変更対象(例:xの大きさ),値の型,動作タイプ); var animationBox = new [...]

babylon.js ステップ7 ライティング

babylon.js ステップ7 ライティングです。3D表現はライティングが無いと始まりません。ライディングの無い空間はただの暗黒です。暗黒の空間に一条の光として、ライトを設置します。ライトと言っても、太陽のような環境光もあります。いきましょう! ライトの種類 4種類のライトあります ポイントライト(Point Light) 指向性ライト(Directional Light) スポットライト(Spot LIghe) 半球ライト(HemiLight) ポイントライト/点光源(Point Light) ポイントライトは、ワールドスペース内の一意のポイント(点)にから発光されるライトです。光はこのポイントからあらゆる方向に放出されます。ポイントライトの分かりやすい例は、裸電球です。ちょっと上(y軸を多め)に置くとメッシュ全体を照らせます。 var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(1, 10, 1), scene); 例はこちら https://www.babylonjs-playground.com/#20OAV9 指向性ライト/平行光源(Directional Light) 指向性ライト/平行光源は、方向によって定義される特殊な光です。光は、指定された方向のあらゆる場所から放出され、無限の範囲を持ちます。指向性ライトの例としては、太陽からの十分に遠い惑星があったとしてその惑星に対して、並行な光が降り注ぐと思うのですが、そんな感じです。下方向に光を当てると、オブジェクトの上部が明るくなります。 var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);例はこちら https://www.babylonjs-playground.com/#20OAV9#1 スポットライト(Spot LIghe) スポットライトは、単一の点から一方向に円錐状に放出されます。方向、角度、および指数を設定出来ます。値は、位置、照らす方向で光の円錐を定義します。照射角は、ラジアンで、スポットライトの円錐ビームのサイズ(照明のフィールド)を定義し、指数は、距離(距離)に伴う光の減衰の速度を定義します。 // new BABYLON.SpotLight(名前, 位置, 照らす方向, 照射角, 光の減衰, [...]

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.